cesium vue打点悬浮弹窗

### 在 Cesium 和 Vue 集成的项目中实现点击地图标记后显示悬浮弹窗的功能 要在基于 Cesium 和 Vue 的项目中实现点击地图标记后显示悬浮弹窗的功能，可以通过以下方法完成： #### 1. 初始化 Cesium 地图并绑定事件监听器 在 Vue 组件中初始化 Cesium 地图时，需设置 `viewer` 并为其绑定鼠标单击事件。通过该事件捕获用户的点击行为，并判断是否点击到了某个特定的地图标记。 ```javascript // 在 mounted 生命周期钩子中初始化 Cesium 地图 mounted() { this.viewer = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE3D, terrainProvider: Cesium.createWorldTerrain() }); // 添加实体点作为标记 const entity = this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.5978, 40.0389), point: { pixelSize: 10, color: Cesium.Color.RED }, properties: { name: 'Sample Point', description: 'This is a sample point.' } }); // 监听左键单击事件 this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); this.handler.setInputAction((movement) => { const pickedObject = this.viewer.scene.pick(movement.position); if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) { const clickedEntity = pickedObject.id; if (clickedEntity.properties) { this.showPopup(clickedEntity); // 显示悬浮弹窗 } } else { this.hidePopup(); // 如果未点击到任何实体，则隐藏弹窗 } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } ``` 上述代码实现了当用户点击地图上的某一点时，如果该点是一个已定义的实体（entity），则调用 `showPopup()` 方法来展示悬浮弹窗[^1]。 --- #### 2. 创建和管理悬浮弹窗 为了创建一个动态的悬浮弹窗，可以在 HTML 中预先定义一个容器用于承载弹窗内容，并通过 JavaScript 控制其样式和可见性。 ```html <div id="popup-container" style="position:absolute; display:none;"> <div id="popup-content"></div> </div> ``` 接着，在 Vue 组件的方法中编写逻辑以更新弹窗的内容及其位置。 ```javascript methods: { showPopup(entity) { const popupContent = document.getElementById('popup-content'); popupContent.innerHTML = ` <h4>${entity.properties.name}</h4> <p>${entity.properties.description}</p> `; const popupContainer = document.getElementById('popup-container'); popupContainer.style.display = 'block'; // 获取当前视口中的屏幕坐标 const cartesianPosition = Cesium.Cartesian3.clone(entity.position.getValue()); const canvasCoordinates = this.viewer.camera.worldToScreenCoordinates(cartesianPosition); if (!canvasCoordinates) return; // 设置弹窗的位置 popupContainer.style.left = `${canvasCoordinates.x + 10}px`; popupContainer.style.top = `${canvasCoordinates.y + 10}px`; }, hidePopup() { const popupContainer = document.getElementById('popup-container'); popupContainer.style.display = 'none'; } } ``` 此部分代码负责根据被点击实体的信息填充弹窗内容，并将其定位至对应的地图标记附近[^4]。 --- #### 3. 解决父子组件生命周期问题 由于 Vue 的父子组件之间存在一定的生命周期顺序差异，因此需要确保父组件完全挂载后再执行子组件的相关操作。这可通过 `$emit` 或者 Vuex 状态管理模式解决跨组件通信的需求。 例如，假设父组件已经完成了地图初始化工作，那么它应该向所有依赖于它的子组件发送通知信号。 ```javascript // 父组件触发事件告知已完成初始化 this.$bus.$emit('map-initialized', true); ``` 而子组件则订阅这一消息以便及时响应。 ```javascript created() { this.$bus.$on('map-initialized', () => { console.log('Map has been initialized.'); // 此处可放置进一步处理逻辑... }); } ``` 这种方式能够有效协调两者之间的协作关系[^2]。 --- ### 总结 综上所述，要实现在 Cesium 和 Vue 结合使用的环境中点击地图标记后显示出带有相关信息的浮动窗口功能，关键是合理配置好 Cesium Viewer 对象的各项参数、正确捕捉用户交互动作以及妥善安排前端界面布局与渲染流程。