使用 Cesium 实现属性弹窗的功能

文章预览

1. 实现效果 实现的弹窗效果如下：点击 Entity 弹窗展示相关信息，点击空白处或者点击关闭按钮即可关闭弹窗。 2. 封装一个弹窗组件 这里我们直接将代码贴出来，样式省略：这里实现的关键要点如下： 首先，需要监听鼠标点击的位置变化，因此需要监听 position 属性; 其次，需要给 Scene 的 preRender 添加一个监听器，以便在渲染场景（Scene）之前改变弹窗的位置，有关 preRender 请看下图，翻译一下就是：获取在 更新场景之后 和 渲染场景之前 将引发的事件。事件的订阅者接收 Scene 实例 作为第一个参数，将 当前时间 作为第二个参数。 我们在关闭弹窗后则需要解除上述监听器，具体请看 setPopupUndefined() 。 我们通过鼠标点击获取的是笛卡尔坐标，需要将其转换为屏幕坐标，借助 SceneTransforms.worldToWindowCoordinates() 方法即可实现。 < template >    < div   class = ………………………………