Cesium添加自定义弹窗并跟随地图移动

项目场景：

需求：项目中使用Cesium制作三维地图，添加面状图层，点击图层弹出自定义弹窗，且弹窗随地图一起动。

代码参考：

1：html

    <!-- 当前窗口 -->
    <div id="container"></div>
    <!-- 弹出框样式 -->
    <div id="stateShow">
        <div>标题：<span id="title"></span></div>
        <div>状态：<span id="state"></span></div>
        <div>信息：<span id="info"></span></div>
    </div>

2：style

        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #stateShow {
            width: 200px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            background: #18363ff0;
            color: white;
            font-size: 17px;
        }
        #stateShow div {
            padding: 10px;
        }

3：script

        const viewer = new Cesium.Viewer("container")
        // 添加面
        viewer.entities.add({
            id: '面图层',
            polygon: {
                // new Cesium.PolygonHierarchy ( positions , holes )
                hierarchy: {
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        121.52768665805318, 31.30146015943855,
                        121.52695425668553, 31.29401473957796,
                        121.53801673848739, 31.293860257839142,
                        121.53828668886521, 31.30262812753377,
                        121.52768665805318, 31.30146015943855,
                    ])
                },
                outline: true, // 是否显示边框
                outlineColor: Cesium.Color.WHITE, // 边框颜色
                outlineWidth: 2, // 边框尺寸
                material: Cesium.Color.GREEN.withAlpha(0.5), // 填充的颜色
                height: 10, // 高度
            },
            data: {
                title: '面图层',
                state: '显示',
                info: '这是一个面图层'
            }
        });
        let cartesian; // 射线与地球表面之间的交点
        // 绑定屏幕空间事件 全局点击事件
        let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (event) {
            let pick = viewer.scene.pick(event.position);
            if (pick && pick.id.id) {
                document.getElementById('stateShow').style.display = "block";
                let ray = viewer.camera.getPickRay(event.position);
                cartesian = viewer.scene.globe.pick(ray, viewer.scene);
                document.getElementById('title').innerHTML = pick.id.data.title;
                document.getElementById('state').innerHTML = pick.id.data.state;
                document.getElementById('info').innerHTML = pick.id.data.info;
                // 实时更新位置
                viewer.scene.postRender.addEventListener(updatePosition);
            } else {
                document.getElementById('stateShow').style.display = "none";
                // 移除事件监听
                viewer.scene.postRender.removeEventListener(updatePosition);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK) 

        // 位置更新
        function updatePosition() {
            // 将WGS84坐标中的位置转换为窗口坐标
            let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
            // 数值是样式中定义的宽高
            if (windowPosition == undefined) return
            document.getElementById('stateShow').style.left = (windowPosition.x - (220 / 2)) + 'px'
            document.getElementById('stateShow').style.top = (windowPosition.y - 150) + 'px'
        }

4：效果图