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

news/2024/4/15 7:32:58

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…

numpy的基础操作

numpy 创建:array import numpy as np anp.([[1,2,3],[4,6,2]]) anp.([[3,4,5]],dtypenp.int)#说明是int型的元素类型&#xff0c;默认是64位&#xff0c;或者可以dtypenp.float anp.zeros((3,4))#创建三行四列的零矩阵 anp.ones((3,4))dtype可以规定创建的数据类型即可创建二…

Linux入门教程||Shell echo命令||Shell printf 命令

Shell 的 echo 指令与 PHP 的 echo 指令类似&#xff0c;都是用于字符串的输出。命令格式&#xff1a; echo string您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test"这里的双引号完全可以省略&#xff0c;以下命令与上面实例效果一…

MQ - 32 基础功能:消息查询的设计

文章目录 导图概述什么时候会用到消息查询消息队列支持查询的理论基础消息数据存储结构关于索引的一些知识点内核支持简单查询根据 Offset 查询数据根据时间戳查询数据根据消息 ID 查询数据借助第三方工具实现复杂查询第三方引擎支持查询工具化简单查询总结导图 概述 从功能上…

探索轻量级模型性能上限,基于GhostNet模型开发构建多商品细粒度图像识别系统

商品图像数据的细粒度识别有别于传统的图像识别任务&#xff0c;本身细粒度识别对于模型特征提取计算能力要求就比较高&#xff0c;在我们前面的一些项目中&#xff0c;涉及到的细粒度识别大多是同一物种下不同亚种的识别&#xff0c;比如&#xff1a;鸟类细粒度识别、狗类细粒…

python工具-base64-zip-json

python工具-base64-zip-json # 先 base64 解码&#xff0c;再 zip 解码&#xff0c;再打印 json 内容&#xff0c;支持多个字符串解码import sys import base64 import zlib import jsondef enc_json_zip_base64(input_data):json_object json.loads(input_data)zip_data zl…

第3章-指标体系与数据可视化-3.1.2-Seaborn绘图库

目录 3.1.2 Seaborn绘图库 1. 带核密度估计的直方图 2. 二元分布图 一维正态分布 联合分布

Repurposing Segmentation as a Practical LVI-NULL Mitigation in SGX【USENIX`22】

目录 摘要引言贡献 背景瞬态执行攻击负载值注入LVI-NULL Intel SGX虚拟内存与分段对象重新定位 威胁模型硬件软件 摘要 负载值注入&#xff08;LVI&#xff09;在类似Spectre的混乱代理攻击中使用Meltdown类型的数据流。LVI已经在对英特尔SGX飞地的实际攻击中得到了证明&#…

6种最常用的3D点云语义分割AI模型对比

由于增强现实/虚拟现实的发展及其在计算机视觉、自动驾驶和机器人领域的广泛应用&#xff0c;点云学习最近引起了人们的关注。 深度学习已成功用于解决 2D 视觉问题&#xff0c;然而&#xff0c;由于其处理面临独特的挑战&#xff0c;深度学习技术在点云上的使用仍处于起步阶段…

thinkphp5 如何模拟在apifox里面 post数据接收

tp5里面控制器写的方法想直接apifox里面请求接受 必须带上这个参数 header里面 X-Requested-With&#xff1a;XMLHttpRequest

Linux0.11——操作系统怎么把自己从硬盘搬到内存

这里先直接给出答案&#xff1a;中断 此时&#xff0c;操作系统用短短几行代码&#xff0c;将数据段寄存器ds和代码段寄存器cs设置为了0x9000&#xff0c;方便之后的程序访问代码和数据&#xff0c;并且将栈顶地ss:sp设置在了远离代码的位置0x9000足够遥远的0x9FF00&#xff0c…

【lesson11】环境变量

文章目录 环境变量的认识main函数参数问题 环境变量的认识 我们知道我们运行自己写的可执行程序的时候&#xff0c;我们必须带路径才能运行&#xff0c;可是执行系统指令的时候不用路径就能运行。 演示&#xff1a; 问题&#xff1a;系统命令可以直接运行&#xff0c;自己写…

产权未转移登记的离婚析产协议不能对抗债权人

债权人代位析产纠纷作为一个新的民事案由&#xff0c;是民事执行阶段中债务人不能到期清偿债务&#xff0c;又怠于分割共同财产或以诉讼方式分割共同财产&#xff0c;而由债权人请求代替债务人向其他共有人提出分割财产以实现债权的诉讼。债权人代位析产&#xff0c;增加了债权…
最新文章