# Vue.js2+Cesium1.103.0 十二、绑定多个 DOM 弹窗,并跟随视角实时更新位置

news/2025/2/15 5:12:39/

Vue.js2+Cesium1.103.0 十二、绑定多个 DOM 弹窗,并跟随视角实时更新位置

Demo

基于 element-ui 的 Message 封装一个自定义弹窗,添加到页面中,并实时更新位置。

<template><divid="cesium-container"style="width: 100%; height: 100%;"/>
</template><script>
/* eslint-disable no-undef */
import { Message } from 'element-ui'
import Window from './components/Window.vue'
import * as turf from '@turf/turf'function MonomerMessage(h,{component = null,componentName = '',messageData = {},confirmValidate = () => {},...rest}
) {return Message({message: h(Window, {props: { messageData }}),duration: 0,...rest})
}
window.$MyMessage = MonomerMessageexport default {data() {return {}},computed: {},watch: {},mounted() {window.$InitMap()viewer.camera.flyTo({destination: Cesium.Rectangle.fromDegrees(70.01180980018789,20.12881664932077,134.27620577723778,50.568644557429835)})const positions = turf.randomPoint(20, {bbox: [70.01180980018789, 20.12881664932077, 134.27620577723778,50.568644557429835]}).features.map((_, index) => {return {longitude: parseFloat(_.geometry.coordinates[0]).toFixed(7),latitude: parseFloat(_.geometry.coordinates[1]).toFixed(7),altitude: index}})for (let index = 0; index < positions.length; index++) {const element = positions[index]$MyMessage(this.$createElement, {customClass: 'my_message',messageData: element})}},methods: {}
}
</script><style lang="scss">
.el-message {&.my_message {width: max-content;min-width: auto;transition: none;transform: scale(0.5);background-color: rgba($color: #ffffff, $alpha: 0.8);.el-icon-info {display: none;}}
}
</style>

Window.vue

<template><div style="display: flex; align-items: center;"><img:src="require('@/assets/images/site.png')"alt=""style="width: 20px;height: 20px;"><div><div>经度:{{ messageData.longitude }}</div><div>纬度:{{ messageData.latitude }}</div><div>海拔:{{ messageData.altitude }}</div></div></div>
</template><script>
/* eslint-disable no-undef */
export default {name: 'Window',props: {messageData: {type: Object,default() {return {}}}},data() {return {}},mounted() {viewer.scene.preRender.addEventListener(this.eventListener)},beforeDestroy() {viewer.scene.preRender.removeEventListener(this.eventListener)},methods: {eventListener() {const position = Cesium.Cartesian3.fromDegrees(this.messageData.longitude,this.messageData.latitude,this.messageData.altitude)const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,position)if (position) {this.$parent.$el.style.left = `${result.x}px`this.$parent.$el.style.top = `${result.y}px`}}}
}
</script>

http://www.ppmy.cn/news/1126433.html

相关文章

用CNC网关推动工业自动化革命

在当今的工业自动化领域&#xff0c;机床&#xff08;CNC&#xff0c;计算机数值控制&#xff09;已成为制造业的重要支柱。然而&#xff0c;这些复杂的设备在数据收集、通信和集成方面通常面临诸多挑战。其中&#xff0c;CNC转Modbus网关为解决这些问题提供了有效的解决方案。…

网络安全内网渗透之DNS隧道实验--dnscat2直连模式

目录 一、DNS隧道攻击原理 二、DNS隧道工具 &#xff08;一&#xff09;安装dnscat2服务端 &#xff08;二&#xff09;启动服务器端 &#xff08;三&#xff09;在目标机器上安装客户端 &#xff08;四&#xff09;反弹shell 一、DNS隧道攻击原理 在进行DNS查询时&#x…

如何使用php提取文章中的关键词?PHP使用Analysis中英文分词提取关键词

1、下载Analysis&#xff0c;创建test.php测试 2、引入Analysis实现中文分词 <?php include "./Analysis/Analysis.php";$annew \WordAnalysis\Analysis(); $content"机器学习是一门重要的技术&#xff0c;可以用于数据分析和模式识别。"; //10分词数…

跨域问题的原理及解决方法

一.同源策略 如果没有进行特殊处理&#xff0c;我们在进行前后端联调的时候游览器会发生报错&#xff1a; 这是因为请求被同源策略被阻止&#xff0c;浏览器出于安全的考虑&#xff0c;使用XMLHttpRequest对象发起HTTP请求&#xff08;异步请求&#xff09;时必须遵守同源策略…

代码随想录算法训练营第四十二天 | 动态规划 part 4 | 01背包问题(二维、一维滚动数组)、416. 分割等和子集

目录 01背包问题 二维代码 01背包问题&#xff08;一维滚动数组&#xff09;代码 416. 分割等和子集思路代码 01背包问题 二维 背包问题汇总&#xff1a; 二维数组dp——01背包五部曲 dp[i][j]表示从下标为[0-i]的物品里面任意取&#xff0c;放进容量为j的背包&#xff0c;价值…

配置pytorchGPU虚拟环境-python3.7

cuda版本的pytorch包下载地址戳这里 winR->输入cmd->输nvcc -V回车 cuda 11.0 输入以下命令来查找 CUDA 的安装路径&#xff1a; Windows: where nvcc 输入以下命令来查找 cuDNN 的版本号&#xff1a; Windows: where cudnn* cuDNN 8.0 本机安装的是cuda 11.0&…

企业如何寻找可替代serv-u的国产文件传输系统?

serv-u是一款基于FTP协议的文件传输软件&#xff0c;它可以在Windows和Linux平台上运行&#xff0c;支持FTP、FTPS、SFTP、HTTP和HTTPS等多种传输协议&#xff0c;提供了图形化的管理界面和丰富的配置选项&#xff0c;可以满足不同用户的文件传输需求。但随着企业对于文件传输的…

SpringBoot之文件上传(单文件与多文件上传的使用)

文章目录 前言文件上传总结 前言 SpringBoot的单文件、多文件上传。 文件上传 页面代码/static/form/form_layouts.html <form role"form" th:action"{/upload}" method"post" enctype"multipart/form-data"><div class&q…