cesium中随entity动态变化的弹出框

本文介绍了在Cesium中如何实现弹出框随entity动态变化的方法。通过监听鼠标点击事件获取屏幕位置,结合弹出框的宽高动态设置其位置。在添加entity描述后,绑定弹出框表格,并利用帧渲染结束事件,实时获取entity位置,将_wgs84ToWindowCoordinates_转换为屏幕坐标,以更新弹出框的位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原理介绍:
1.监听鼠标单击事件,获取点击屏幕位置e.position,综合弹出框宽高,动态设置弹出框位置。
  bubble.style.left = e.position.x-70+"px";             
  var divheight = bubble.offsetHeight;
  var divy = e.position.y - divheight -50;
2.添加entity的描述时,绑定弹出框table
3.监听帧渲染结束事件,获取实时位置,动态改变弹出框 viewer.scene.postRender.addEventListener(function (e) {});
添加的_cartesian转屏幕坐标,实时改变
_pm_position_2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, _cartesian);

以下是代码:(基于supermap的demo改写的,加载数据路径可能不同)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>动态气泡</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="css/pretty.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/config.js"></script>
    <script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>    
</head>
<body>
    <div id="cesiumContainer"></div>
    <div id="bubble1" class="bubble" style="top:0;left:82%;display:block;width: 400px;visibility: hidden;"><!--class="bubble"-->
        <div id="tools" style="text-align : right">
            <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性<
### 实现 Vue 和 Cesium 的集成并添加弹出框功能 要在 Vue 中实现 Cesium 集成以及弹出框功能,可以按照以下方法完成。 #### 1. 安装依赖项 首先需要安装 `cesium` 库作为项目的一部分。可以通过 npm 或 yarn 来安装 cesium: ```bash npm install cesium --save ``` 或者使用 Yarn: ```bash yarn add cesium ``` 这一步是为了确保能够正常加载 Cesium 所需的资源[^1]。 --- #### 2. 创建 Cesium 组件 创建一个新的 Vue 组件来初始化 Cesium 地图实例,并将其挂载到指定 DOM 节点上。以下是组件的一个基本结构: ```vue <template> <div class="map-container"> <div id="cesiumContainer" style="width: 100%; height: 600px;"></div> </div> </template> <script> import * as Cesium from "cesium"; export default { name: "CesiumMap", data() { return { viewer: null, }; }, mounted() { this.initCesium(); }, methods: { initCesium() { const options = { terrainProvider: Cesium.createWorldTerrain(), }; this.viewer = new Cesium.Viewer("cesiumContainer", options); // 添加鼠标点击事件监听器用于触发弹窗逻辑 this.viewer.screenSpaceEventHandler.setInputAction((movement) => { const cartesian = this.viewer.camera.pickEllipsoid( movement.position, this.viewer.scene.globe.ellipsoid ); if (cartesian) { const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const longitudeString = Cesium.Math.toDegrees( cartographic.longitude ).toFixed(3); const latitudeString = Cesium.Math.toDegrees( cartographic.latitude ).toFixed(3); alert(`纬度: ${latitudeString}, 经度: ${longitudeString}`); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, }, }; </script> <style scoped> .map-container { width: 100%; } </style> ``` 上述代码实现了在地图上的左键单击事件中显示经纬度信息的功能。如果希望进一步自定义弹出窗口,则可以用 HTML/CSS 替代默认的 `alert()` 方法[^2]。 --- #### 3. 封装常用方法 为了避免重复编写相同的代码片段,可将常用的 Cesium 功能封装至单独的 JavaScript 文件中。例如,创建名为 `cesiumUtils.js` 的工具类文件: ```javascript // src/utils/cesiumUtils.js import * as Cesium from 'cesium'; const createViewer = (containerId, options = {}) => { return new Cesium.Viewer(containerId, options); }; const getCoordinatesFromClick = (viewer) => { return function(movement) { const cartesian = viewer.camera.pickEllipsoid( movement.position, viewer.scene.globe.ellipsoid ); if (!cartesian) return; const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(3); const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3); return { latitude: lat, longitude: lng }; }; }; export { createViewer, getCoordinatesFromClick }; ``` 通过这种方式,可以在多个地方重用这些函数而无需重新书写它们。 --- #### 4. 自定义弹出框样式 为了提供更友好的用户体验,推荐替换掉原始的 `alert()` 函数,改用基于 HTML 的模态对话框或提示气泡形式展示位置数据。下面是一个简单的例子: ```html <div v-if="showPopup" class="popup"> <p>您选择了:</p> <ul> <li><strong>经度:</strong> {{ popupData.longitude }}</li> <li><strong>纬度:</strong> {{ popupData.latitude }}</li> </ul> </div> ``` 同时更新脚本部分以支持动态绑定变量: ```javascript data() { return { showPopup: false, popupData: {}, }; }, methods: { handleMouseClick(event) { const coordinates = getCoordinatesFromClick(this.viewer)(event); if (coordinates) { this.popupData = coordinates; this.showPopup = true; } else { this.showPopup = false; } }, }, mounted() { this.viewer = createViewer('cesiumContainer', {}); this.viewer.screenSpaceEventHandler.setInputAction( this.handleMouseClick.bind(this), Cesium.ScreenSpaceEventType.LEFT_CLICK ); }, ``` 最后记得给 `.popup` 类设置合适的 CSS 样式以便于它能漂浮在地图上方。 --- ### 总结 以上介绍了如何利用 Vue 框架引入 Cesium 插件,并且展示了怎样处理交互操作(如点击获取坐标),还讨论了关于优化代码管理的重要性。实际应用过程中可能还需要考虑更多细节问题比如性能调优、错误捕获等。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值