Cesium自定义气泡框与实时更新气泡框

//转为笛卡尔坐标
const scenePosition = Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), 0);
        var scene = viewer.scene;
        const bubble = document.getElementById('bubble');
        ReactDom.render(<VideoPlay url={videoUrl.data.url} setVideoHandle={setVideo} />, bubble)

        // doSqlQuery(`模型名称 = ${record.model_name}`)
     // 每一帧都去计算气泡的正确位置
        scene.postRender.addEventListener(function () {
            if (scenePosition) {
                var canvasHeight = scene.canvas.height;
                var windowPosition = new Cesium.Cartesian2();
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
                bubble.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
                bubble.style.left = (windowPosition.x - 70) + 'px';
                bubble.style.visibility = "visible";
            }
        });

第二种办法:

//更新气泡位置
    renderPosition() {
        const { viewer, markerList, callPoliceArr } = this;
        let entitys = [...markerList, ...callPoliceArr]

        viewer.clock.onTick.addEventListener(function (clock: any) {

            entitys.forEach((item) => {
                const scratch3dPosition = new Cesium.Cartesian3();
                const scratch2dPosition = new Cesium.Cartesian2();
                const { entity, div } = item;
                let position3d;
                let position2d;

                if (entity.position) {
                    position3d = entity.position.getValue(clock.currentTime, scratch3dPosition);
                }

                if (position3d) {
                    position2d = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position3d, scratch2dPosition);
                }

                if (position2d) {
                    if (div.className === 'emergency3d-popup-container') {
                        //应急物资点
                        div.style.left = position2d.x - div.offsetWidth / 2 + 'px';
                        div.style.top = position2d.y - div.offsetHeight - 20 + 'px';
                    } else if (div.className === 'people-popup-container') {
                        //人物名称
                        div.style.left = position2d.x - div.offsetWidth / 2 + 'px';
                        div.style.top = position2d.y - div.offsetHeight - 15 + 'px';
                    } else {
                        div.style.left = position2d.x + 'px'; //其他标注
                        div.style.top = position2d.y - div.offsetHeight - 8 + 'px';
                    }
                }
            });
        })
    }