Cesium添加自定义弹窗并设置随地图移动位置移动

项目场景：

需求：项目中使用Cesium制作三维地图，在地图上铺点，对点位进行点击，弹出自定义弹窗（form+charts），且弹窗随地图一起动，思路及代码如下：

思路：

地图初始化时隐藏cesium自带的弹窗；
写一个弹窗的vue文件（子），在地图vue文件（父）中引入，通过v-if控制参数popVisible为false默认隐藏，并用一个div（弹窗父元素）包起来；
地图初始化铺点后给点添加点击事件，获取该点的相关属性（也可再调用接口获取更多弹窗需要数据），并获取点击坐标（如代码中的handlePinClick方法）；
弹窗所需数据获取完成之后，找到弹窗父元素，设置其样式：绝对定位，top和left为点击事件获取到的屏幕坐标，同时设置弹窗子组件展示（popVisible=true）；

==================这个时候点击地图的点设置自定义弹窗功能就完成了，但是发现地图移动的时候，地图上的点移动了，弹窗没有移动。接下来解决：

在添加点击事件的时候同时添加一个地图监听（如代码中的bindMapMove方法），监听地图移动之后对应点击的点的地图坐标，转换成新的屏幕坐标，再重新给弹窗vue组件设置定位即可。

代码（详解看代码注释）:

html代码：

 <divid="cesiumContainer"class="boxs"/><div id="popup"><!-- OverlayChart 是引入的弹窗组件，样式自己随便写，也可自己重新命名；overlayChartObj是传给弹窗的参数，自行进行引入和注册使用，代码中没有涉及到这一块--><OverlayChartv-if="popVisible"ref="overlay":overlay-chart-obj="overlayChartObj"/></div>

mounted代码：

  this.cesiumViewer = this.mapCreate();this.queryData();this.gotoCenter();

methods代码：

 // 底图初始化mapCreate() {var viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false//隐藏cesium自带的弹窗});return viewer;},// 回中心点gotoCenter() {const height = 1100000;const viewer=this.cesiumViewerviewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(gisServer.center[0], gisServer.center[1], height),orientation: {// heading: Cesium.Math.toRadians(0),// pitch: Cesium.Math.toRadians(-45)},duration: 5});},
// 获取聚合图层数据async queryData() {const emstTypeSub = this.emstTypeSub;const result = await getEmstWqListByEmstTypeSub({params: {emstTypeSub}});this.loading = false;//加载点位this.renderCesiumPoint(this.cesiumViewer, result.data.data);//添加点击事件this.handlePinClick();//添加地图移动监听:使地图移动弹窗跟着移动this.bindMapMove();},// 加载点位renderCesiumPoint(cesiumViewer, projectList) {cesiumViewer.entities.removeAll();for (let i = 0; i < projectList.length; i++) {const pro = projectList[i];cesiumViewer.entities.add({position: Cesium.Cartesian3.fromDegrees(pro.emstLong, pro.emstLat, 1000),name: pro.emstName,id: pro.emstCode,property: pro,//自己加的相关属性，弹窗里需要用到billboard: {scale: 1,image: "这里是图片地址",verticalOrigin: Cesium.VerticalOrigin.BOTTOM},label: { // 文字标签text: pro.emstName,font: "400 30px MicroSoft YaHei", // 15pt monospacescale: 0.6,fillColor: "#e4393c",show: false,outlineWidth: 3,outlineColor: "#000",pixelOffset: Cesium.Cartesian2(0, -60) // 偏移量}});}},// 点击地图上的点handlePinClick() {const cesiumViewer = this.cesiumViewerconst tt = this;const handle3D = new Cesium.ScreenSpaceEventHandler(cesiumViewer.scene.canvas);handle3D.setInputAction((movement) => {//movement.position 是点击的屏幕坐标const pick = cesiumViewer.scene.pick(movement.position);if (!pick) {return}const obj = pick.id.property;// 解决点击不同点数据不更换问题if (tt.overlayChartObj.popForm != {}) {tt.popVisible = false;tt.overlayChartObj.popForm = {}}const coordinate = movement.position;/*overlayChartObj是传给子组件（弹窗）的数据：{popForm:点渲染的时候就有的数据，chartData：点击调用接口获取的数据}*/tt.overlayChartObj.popForm = obj;tt.getProjDetailPop(coordinate, obj);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);},// 点击地图图标展示async getProjDetailPop(coordinate, params) {const tt = this;const result = await getWqgStateLast7Day({params: {emstCode: params.emstCode}});tt.showOverlayChart(coordinate, result.data.data);},// 显示图表showOverlayChart (position, data) {const pop = document.getElementById("popup");pop.style.position = "absolute";pop.style.top = position.y + "px";pop.style.left = position.x + "px";pop.style.zIndex = 99;this.overlayChartObj.chartData = data;this.popVisible = true;},// 地图移动时弹窗跟随bindMapMove() {const cesiumViewer = this.cesiumViewerconst tt = thiscesiumViewer.scene.preRender.addEventListener(() => { // 一直触发//如果弹窗没有展示，不进行任何操作，只有弹窗本身展示的时候才进行监听if (!tt.popVisible) returnconst scratch = Cesium.Cartesian2()const position = Cesium.Cartesian3.fromDegrees(Number(tt.overlayChartObj.popForm.emstLong),Number(tt.overlayChartObj.popForm.emstLat), 2500)// cartesianToCanvasCoordinates 转换三维空间坐标到canvas坐标（窗口坐标）const canvasPosition = cesiumViewer.scene.cartesianToCanvasCoordinates(position, scratch)if (Cesium.defined(canvasPosition)) {tt.setPopPosition(canvasPosition)}})},setPopPosition(position) {const pop = document.getElementById("popup");pop.style.top = position.y + "px";pop.style.left = position.x + "px";},

总结：

写博客是为了记笔记！

Cesium添加自定义弹窗并设置随地图移动位置移动相关推荐

GMap实现随地图等级变化的图片
学习了这篇古早文章: GMap.NET开发技巧(六)-如何缩放基于图片的地图图元 | GPS软件平台开发技术博客该篇文章实现图片随地图等级缩放而缩放的思路主要是这两个方法: 1.gMapContro ...
airpods链接mac弹窗_airpods弹窗怎么设置
Apple AirPods是一款无线耳机,耳机内置红外传感器能够自动识别耳机是否在耳朵当中进行自动播放,通过双击可以控制Siri控制.续航5小时,带上耳机自动播放音乐, 麦克风效果较好,双击耳机开启S ...
百度地图jsapi在手机站里实现中心标注不随地图移动的效果
本例实现类似百度外卖手机站上的地图功能,地图中间有个标注点,拖动地图时中间点不随地图移动,效果可以查看此网址:http://www.totcms.com/map/marker.htm 下面说一下实现原 ...
swift设置启动图不现实_如何通过装饰房屋来开始在Swift中使用增强现实
swift设置启动图不现实 by Ranadhir Dey 由Ranadhir Dey 如何通过装饰房屋来开始在Swift中使用增强现实 (How to get started with augmen ...
R语言使用treemap包中的treemap函数可视化treemap图：treemap将分层数据显示为一组嵌套矩形、自定义设置treemap图的调色板、自定义设置treemap标题字体的大小
R语言使用treemap包中的treemap函数可视化treemap图:treemap将分层数据显示为一组嵌套矩形.自定义设置treemap图的调色板.自定义设置treemap标题字体的大小目录
R语言使用ggplot2可视化凹凸图（bumps chart、凹凸图是一种特殊形式的线图，旨在探索随着时间的推移等级的变化）、并设置凹凸图的线条为曲线而不是直线(change into curves)
R语言使用ggplot2可视化凹凸图(bumps chart.凹凸图是一种特殊形式的线图,旨在探索随着时间的推移等级的变化).并设置凹凸图的线条为曲线而不是直线(change bumps chart ...
seaborn使用boxplot函数进行箱图可视化（使用色彩调色板自定义设置箱图的颜色、在boxplot函数内设置palette参数自定义调色板）
seaborn使用boxplot函数进行箱图可视化(使用色彩调色板自定义设置箱图的颜色.在boxplot函数内设置palette参数自定义调色板) 目录
设置图的位置_消防泵房内设备、管网、阀门的设置及系统图
这是消防泵房内的消防泵.喷淋泵.稳压泵以及管网.阀门设置的平面布置图,从图中可以看出每组消防泵均有两个独立的吸水管,吸水管上设置有闸阀.过滤器.柔性接头,但是没有设置真空表.压力表或真空压力表.出水管 ...
使用 XML 实现按钮改变焦点设置背景图
在 drawable 文件夹中添加一个 advancedbutton.xml 设置<selector>和 <item>标签 <?xml version="1.0 ...
Swift5.x使用纯代码创建NavigationTab控制器设置启动图Wb第1部分
Swift5.x使用纯代码创建NavigationTab控制器设置启动图Wb第1部分前言 1 使用纯代码创建NavigationTab控制器必须会,也可使用storyboard拖控件,没有代码创建灵 ...

Cesium添加自定义弹窗并设置随地图移动位置移动

项目场景：

思路：

代码（详解看代码注释）:

总结：

Cesium添加自定义弹窗并设置随地图移动位置移动相关推荐

最新文章

热门文章