vue cesium 弹窗

在 Vue 中使用 Cesium 实现弹窗效果
为了在 Vue 项目中集成 Cesium 并实现弹窗功能，可以按照如下方法操作：
安装依赖库
首先，在 Vue 项目中安装必要的依赖项。这通常涉及安装 cesium 库以及可能需要的一些辅助工具。
npm install cesium
登录后复制
初始化 Cesium Viewer
创建一个新的组件来初始化 Cesium 的 viewer 对象，并将其挂载到指定的 DOM 节点上。可以在 mounted 生命周期钩子内完成此工作[^2]。
import * as Cesium from 'cesium';

export default {
name: "CesiumMap",
data() {
return {
viewer: null,
};
},
methods: {},
mounted() {
this.viewer = new Cesium.Viewer('cesiumContainer', {});
}
}
登录后复制
创建自定义实体并绑定点击事件
当用户点击地图上的某个位置时触发弹窗显示。为此目的，可以通过监听鼠标左键单击事件 (LEFT_CLICK) 来获取坐标信息，并在此基础上构建带有属性数据（如名称、描述等）的新实体对象；随后利用这些信息展示相应的提示框或对话窗口。
methods: {
addClickHandler() {
const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);

handler.setInputAction((movement) => {
let pickedObject = this.viewer.scene.pick(movement.position);

if (Cesium.defined(pickedObject)) {
console.log(`Clicked on ${pickedObject.id.name}`);

// 显示弹窗逻辑...
} else {
console.log("No entity clicked");
}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
},
mounted() {
this.viewer = new Cesium.Viewer('cesiumContainer');

this.addClickHandler();
}
登录后复制
使用 HTML 和 CSS 自定义弹窗样式
对于更复杂的交互需求，则可以直接通过修改页面中的 HTML 结构配合 JavaScript 控制可见性和定位参数来自由设计所需的 UI 组件外观形式。例如，可采用绝对布局方式将 div 元素放置于视图顶部中央作为临时消息通知区域。
<div id="popup" style="position:absolute; top:50%; left:50%;">
<!-- 弹窗内容 -->
</div>
登录后复制