cesium自定义弹出框

通过添加div的方式可以实现cesium自定义的弹窗效果。你可以按照以下步骤来创建cesium自定义弹出框：

1. 创建cesiumContainer容器：在HTML的script标签内添加一个id为cesiumContainer的容器，用来放置cesium场景。

   <script>
     var viewer = new Cesium.Viewer('cesiumContainer', {
       // 设置其他参数
     });
   </script>

2. 创建自定义的弹出框内容：使用HTML和CSS创建一个div元素，并设置其样式和内容作为弹出框的模板。

   <div id="customPopup" style="position: absolute; top: 10px; left: 10px; background-color: white; padding: 10px;">
     <h3>Title</h3>
     <p>Content</p>
   </div>

3. 监听鼠标事件并显示弹出框：在cesium的相应事件监听器中，例如鼠标点击事件或鼠标移动事件，获取事件坐标，并将自定义的弹出框添加到cesiumContainer容器中，并设置其位置。

   viewer.screenSpaceEventHandler.setInputAction(function (event) {
     var popup = document.getElementById("customPopup");
     popup.style.display = "block";
     popup.style.left = event.position.x + "px";
     popup.style.top = event.position.y + "px";
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

4. 隐藏弹出框：监听其他事件，例如鼠标移出事件或关闭按钮点击事件，隐藏弹出框。

   viewer.screenSpaceEventHandler.setInputAction(function (event) {
     var popup = document.getElementById("customPopup");
     popup.style.display = "none";
   }, Cesium.ScreenSpaceEventType.MOUSE_LEAVE);