实现 Entity实例生命周期和vue组件生命周期融合

  • 场景
  • 解决方案
  • 实现方案
  • index.vue
  • 方案解决效果

场景

ceisum中Entity实例的生成和销毁,大部分逻辑和vue代码分离,导致不好阅读和维护

解决方案

ceisum 中实例 Entity 的生命周期,和vue的生命周期’相似’,把两个生命周期结合(把entity封装为vue组件)

实现方案

  1. vue中 template 中内容可以放置 弹框的内容,通过ceisum 获取屏幕坐标,进行渲染
  2. 通过代码逻辑使 vue组件的 mountedbeforeDestroy 来和 entity 实例的生成 add,和销毁destroy 相关联
  3. 通过 Cesium.ScreenSpaceEventHandler 关联vue组件的方法实现交互

index.vue

采用原生cesium 实现entity的弹窗,并封装为vue组件

<!--/*** @author: liuk* @date: 2023/8/10* @describe: 小区视角* @email:1229223630@qq.com
*/-->
<template><div><div class="heat-info" v-if="showPopup" :style="{top:popupPos.top,left:popupPos.left}"><div class="name">小区</div>{{showPopup}}<div class="bottom_div"><div><div class="num">20.3&nbsp;<span></span></div><div style="margin-top: 6px;">均温</div></div><div><div class="num">92.9&nbsp;<span>%</span></div><div style="margin-top: 6px;">室温</div></div></div></div></div>
</template><script>
import communityList from "../data/community.json"let heatDatasource, preSelEntity,handler
export default {data(){return {showPopup: false,popupPos: {left: 0,top: 0},}},methods:{addEntity() {let features = communityList.features || [];features.forEach(el => {let pos = Cesium.Cartesian3.fromDegreesArray(el.geometry.coordinates[0].map(el1 => {return el1.join(',')}).join(',').split(',').map(Number));let boundingSphere = new Cesium.BoundingSphere.fromPoints(pos);let center = boundingSphere.center;heatDatasource.entities.add({position: center,customType: "communityEntity",label: {text: el.properties.name,disableDepthTestDistance: Number.POSITIVE_INFINITY,horizontalOrigin: Cesium.HorizontalOrigin.Top,scaleByDistance: new Cesium.NearFarScalar(2000, 1, 500000, 0.1)},show: true,polygon: {hierarchy: new Cesium.PolygonHierarchy(pos),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,material: Cesium.Color.fromCssColorString("white").withAlpha(0),},polyline: {show: true,positions: pos,width:1.5,material: Cesium.Color.fromCssColorString("#C0C0C0").withAlpha(0.5),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND}});})},onMouseClick(movement){var preSelEntity = window.dasViewer.scene.pick(movement.position);if (!Cesium.defined(preSelEntity) || !Cesium.defined(preSelEntity.id)) return;var entity = preSelEntity.id;if (!(entity instanceof Cesium.Entity) || entity.customType !== "communityEntity") return;window.dasViewer.camera.flyTo({destination: Cesium.Rectangle.fromCartesianArray(entity.polygon.hierarchy.getValue().positions),complete: () => {this.$emit('hideCommunityEntity')}});},onMouseMove(movement){var pickedObject = window.dasViewer.scene.pick(movement.endPosition);if (!Cesium.defined(pickedObject) || !Cesium.defined(pickedObject.id)) {this.resetSelectedEntity();return;}var entity = pickedObject.id;if (!(entity instanceof Cesium.Entity) || entity.customType !== "communityEntity") {this.resetSelectedEntity();return;}if (entity !== preSelEntity) {this.resetSelectedEntity();entity.polygon.material = Cesium.Color.fromCssColorString("white").withAlpha(0.1);entity.polyline.material = Cesium.Color.fromCssColorString("white").withAlpha(1);}preSelEntity = entity;this.showPopupBox(movement.endPosition);},onMouseLeave(){this.showPopup = false},resetSelectedEntity(){if (preSelEntity) {this.showPopup = falsepreSelEntity.polygon.material = Cesium.Color.fromCssColorString("white").withAlpha(0);preSelEntity.polyline.material = Cesium.Color.fromCssColorString("#C0C0C0").withAlpha(0.5);preSelEntity = null;}},showPopupBox(movement){this.showPopup = truethis.popupPos.left = `${movement.x + 10}px`;this.popupPos.top = `${movement.y + 10}px`;}},mounted(){const self = thisheatDatasource = new Cesium.CustomDataSource("community");window.dasViewer.dataSources.add(heatDatasource);this.addEntity()handler = new Cesium.ScreenSpaceEventHandler(window.dasViewer.scene.canvas);handler.setInputAction(self.onMouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction(self.onMouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(self.onMouseLeave, Cesium.ScreenSpaceEventType.MOUSE_LEAVE);},beforeDestroy() {handler.destroy()window.dasViewer.dataSources.remove(heatDatasource);}
}
</script><style lang="less" scoped>
.heat-info {position: absolute;width: 196px;min-height: 124px;padding: 12px;border: 1px solid rgba(85, 85, 85, 1);box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);border-radius: 4px;background-color: rgba(0, 0, 0, 0.8);color: #fff;z-index: 9999;pointer-events: none;.name {font-family: PingFangSC-Medium;font-size: 16px;color: #FFFFFF;letter-spacing: 0;font-weight: 500;margin-top: 5px;}.bottom_div {display: flex;position: relative;justify-content: space-between;font-size: 12px;color: #A2A3A3;letter-spacing: 0;font-weight: 400;font-family: PingFangSC-Regular;margin-top: 21px;.num {font-size: 20px;color: #FFFFFF;letter-spacing: 0;line-height: 16px;font-weight: 400;span {font-size: 12px;color: #FFFFFF;letter-spacing: 0;font-weight: 200;color: #A2A3A3;}}}
}
</style>

方案解决效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/67017.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python的requests库与chatGPT进行通信

前言 在人工智能领域&#xff0c;自然语言处理模型如OpenAI GPT-3.5 Turbo具有广泛的应用。虽然官方提供了Python库来与这些模型进行交互&#xff0c;但也有一些人更喜欢使用requests库来自定义请求和处理响应&#xff0c;比如现在很多第三方LLM都提供了与chatGPT类似的http请…

Jmete+Grafana+Prometheus+Influxdb+Nginx+Docker架构搭建压测体系/监控体系/实时压测数据展示平台+遇到问题总结

背景 需要大批量压测时&#xff0c;单机发出的压力能力有限&#xff0c;需要多台jmeter来同时进行压测&#xff1b;发压机资源不够&#xff0c;被压测系统没到瓶颈之前&#xff0c;发压机难免先发生资源不足的情形&#xff1b;反复压测时候也需要在不同机器中启动压测脚本&…

比较opencv,pillow,matplotlib,skimage读取图像的速度比

上面这些库都被广泛用于图像处理和计算机视觉任务&#xff1b; 不同的图像读取库&#xff08;OpenCV&#xff0c;Pillow&#xff0c;matplotlib和skimage&#xff09;的读取速度&#xff0c;是怎么样的一个情况&#xff1f; 下面分别从读取速度&#xff0c;以及转换到RGB通道…

《虚拟仿真实验教学平台》三项团体标准启动会在 ALVA 举办

8 月 11 日&#xff0c;《虚拟仿真实验教学平台》三项团体标准启动会&#xff08;下以“启动会”简称&#xff09;以线下线上相结合的会议形式在 ALVA Systems 北京总部举办。 启动会上&#xff0c;ALVA 与专家组、编写组成员和企业代表围绕《虚拟仿真实验教学平台建设指南》、…

不同写法的性能差异

“ 达到相同目的,可以有多种写法,每种写法有性能、可读性方面的区别,本文旨在探讨不同写法之间的性能差异 len(str) vs str "" 本部分参考自: [问个 Go 问题&#xff0c;字符串 len 0 和 字符串 "" &#xff0c;有啥区别&#xff1f;](https://segmentf…

18 Linux之Python定制篇-Python开发平台Ubuntu

18 Linux之Python定制篇-Python开发平台Ubuntu 文章目录 18 Linux之Python定制篇-Python开发平台Ubuntu18.1 安装Ubuntu虚拟机18.4 Ubuntu的root用户18.5 Ubuntu下开发Python 学习视频来自于B站【小白入门 通俗易懂】2021韩顺平 一周学会Linux。可能会用到的资料有如下所示&…

使用iOS应用程序进行数据采集:从入门到实践

随着移动互联网的普及&#xff0c;越来越多的数据产生于移动设备。为了更好地了解用户行为、优化产品体验&#xff0c;我们需要在iOS应用程序中进行数据采集。本文将指导您如何在iOS应用中实现数据采集&#xff0c;从基本概念到实际操作。 数据采集的基本概念与方法 a. 数据采集…

docker内部ip与内网其它ip网段冲突导致无法访问的解决方法

现象&#xff1a; 宿主机和docker内部能互相访问非常正常&#xff0c;但docker内部访问外部网络内网其中一个网段172.18.0.x则无法访问。 排查 由于docker是精简过的系统&#xff0c;需另外安装网络相关命令 首先更新apt-get&#xff0c;否则在apt-get install 命令时会报E:…

剑指 Offer 10- I. 斐波那契数列

剑指 Offer 10- I. 斐波那契数列 方法一 class Solution {int mod (int) 1e9 7;public int fib(int n) {if(n < 1) return n;int[] dp new int[n 1];dp[1] 1;for(int i 2; i < n; i){dp[i] (dp[i - 1] dp[i - 2]) % mod;}return dp[n];} }方法二 对方法一进行…

景区洗手间生活污水处理设备厂家电话

诸城市鑫淼环保小编带大家了解一下景区洗手间生活污水处理设备厂家电话 MBR生活污水处理设备构造介绍&#xff1a; mbr一体化污水处理的设计主要是对生活污水和相类似的工业有机污水的处理&#xff0c;其主要处理手段是采用目前较为成熟的生化处理技术接触氧化法&#xff0c;水…

el-table滚动加载、懒加载(自定义指令)

我们在实际工作中会遇到这样的问题&#xff1a; 应客户要求&#xff0c;某一个列表不允许分页。但是不分页的话&#xff0c;如果遇到大量的数据加载&#xff0c;不但后端响应速度变慢&#xff0c;前端的渲染效率也会降低&#xff0c;页面出现明显的卡顿。 那如何解决这个问题…

基础算法-递推算法-学习

现象&#xff1a; 基础算法-递推算法-学习 方法&#xff1a; 这就是一种递推的算法思想。递推思想的核心就是从已知条件出发&#xff0c;逐步推算出问题的解 最常见案例&#xff1a; 一&#xff1a;正向递推案例&#xff1a; 弹力球回弹问题&#xff1a; * 弹力球从100米高…

OpenLayers7官方文档翻译,OpenLayers7中文文档,OpenLayers快速入门

快速入门 这个入门文档向您展示如何放一张地图在web网页上。 开发设置使用 NodeJS&#xff08;至少需要Nodejs 14 或更高版本&#xff09;&#xff0c;并要求安装 git。 设置新项目 开始使用OpenLayers构建项目的最简单方法是运行&#xff1a;npm create ol-app npm create…

在ubuntu下远程链接仓库gitte/github

后期适当加点图片&#xff0c;提高可读性。 本教程是最基础的连接教程&#xff0c;设计git的操作也仅仅局限于push/pull&#xff0c;如果想全面了解&#xff0c;可以参考廖雪峰git教程 在Ubuntu上初始化本地Git仓库并链接到远程Gitee仓库(github同理)&#xff0c;需要按照以下步…

Go 面向对象(匿名字段)

概述 严格意义上说&#xff0c;GO语言中没有类(class)的概念,但是我们可以将结构体比作为类&#xff0c;因为在结构体中可以添加属性&#xff08;成员&#xff09;&#xff0c;方法&#xff08;函数&#xff09;。 面向对象编程的好处比较多&#xff0c;我们先来说一下“继承…

音视频 ffmpeg命令提取PCM数据

提取PCM ffmpeg -i buweishui.mp3 -ar 48000 -ac 2 -f s16le 48000_2_s16le ffmpeg -i buweishui.mp3 -ar 48000 -ac 2 -sample_fmt s16 out_s16.wav ffmpeg -i buweishui.mp3 -ar 48000 -ac 2 -codec:a pcm_s16le out2_s16le.wav ffmpeg -i buweishui.mp3 -ar 48000 -ac 2 -f…

QWidget的ui界面绘制成图片

文章目录 源文件源码解释效果修复图片清晰度 源文件 #include "widget.h" #include "ui_widget.h"#include <QPixmap> #include <QDir>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 构造…

Pinely Round 2 (Div. 1 + Div. 2) G. Swaps(组合计数)

题目 给定一个长度为n(n<1e6)的序列&#xff0c;第i个数ai(1<ai<n)&#xff0c; 操作&#xff1a;你可以将当前i位置的数和a[i]位置的数交换 交换可以操作任意次&#xff0c;求所有本质不同的数组的数量&#xff0c;答案对1e97取模 思路来源 力扣群 潼神 心得 感…

Android之布局转圆角

Android之布局转圆角 文章目录 Android之布局转圆角说明一、效果图二、实现步骤1.自定义RoundRelativeLayout2.使用 总结 说明 很多需求比较无语&#xff0c;需要某个布局转圆角&#xff0c;像个显眼包一样&#xff0c;所以为了满足显眼包&#xff0c;必须整呐提示&#xff1a…

Java智慧工地信息化管理平台源码,依托计算机信息、网络通讯、物联网、系统集成及云计算技术建立

Java智慧工地源码 智慧工地APP源码 系统定义&#xff1a; 智慧工地信息化管理平台是依托计算机信息、网络通讯、物联网、系统集成及云计算技术&#xff0c;通过数据采集、信息动态交互、智能分析&#xff0c;建立起来的一套集成的项目建设综合管理系统。实现项目管理信息化、网…