Vue.js2+Cesium1.103.0 六、标绘与测量

Vue.js2+Cesium1.103.0 六、标绘与测量

点,线,面的绘制,可实时编辑图形,点击折线或多边形边的中心点,可进行添加线段移动顶点位置等操作,并同时计算出点的经纬度,折线的距离和多边形的面积。

Demo

import PlotUtil from '@/utils/CesiumUtils/Plot/index.js'
export default {data () {return {plottingStatus: false,plotData: {},$PlotUtil: null,active: '',btns: [{name: 'point'},{name: 'polyline'},{name: 'polygon'}// {//   name: 'text'// }]}},methods: {handleSave() {this.addGraphic(this.plotData)this.$PlotUtil.Destory()},addGraphic(data) {const _color = new Cesium.Color.fromCssColorString('#17E980')if (data.drawingMode === 'point') {viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),point: {color: _color,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 0.7e4, 0.8),pixelSize: 14,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#fff')},label: {text: `经度:${data.centerPoint.longitude}\n纬度:${data.centerPoint.latitude}\n海拔:${data.centerPoint.altitude}`,font: '30px sans-serif',// pixelOffset: new Cesium.Cartesian2(0.0, 45.0),// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})} else if (data.drawingMode === 'polyline') {viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),label: {text: `${data.activeShapeComputed}m`,font: '30px sans-serif',// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})if (data.activeSubLine && data.activeSubLine.length > 0) {data.activeSubLine.map((line, lineIndex) => {if (line.distance <= 0) returnconst positions = Cesium.Cartesian3.fromDegreesArrayHeights([line.start.longitude, line.start.latitude, line.start.altitude,line.end.longitude, line.end.latitude, line.end.altitude])viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(line.centerPoint.longitude, line.centerPoint.latitude, line.centerPoint.altitude),polyline: {// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,positions: positions,material: _color,depthFailMaterial: new Cesium.PolylineDashMaterialProperty({_color}),width: 5},label: {text: `${line.distance}`,font: '30px sans-serif',fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})})}} else if (data.drawingMode === 'polygon') {const vertices = data.verticesPosition || data.activeShapePoints || []const _hierarchy = []if (vertices.length > 0) {vertices.map(point => {_hierarchy.push(Cesium.Cartesian3.fromDegrees(point.longitude,point.latitude,point.altitude))})}if (_hierarchy.length > 0) {const dynamicPositions = new Cesium.CallbackProperty(function () {return new Cesium.PolygonHierarchy(_hierarchy)}, false) // 使贴地多边形在模型上有立体效果const center = data.centerPointconst altitudes = vertices.map(_ => _.altitude)const max = altitudes.sort()[altitudes.length - 1]center.altitude = maxviewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),polygon: {// hierarchy: hierarchy,hierarchy: dynamicPositions,// extrudedHeight: 200,// perPositionHeight: true,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,material: new Cesium.ColorMaterialProperty(_color)},label: {text: `${data.activeShapeComputed}平方米`,font: '30px sans-serif',fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// eyeOffset: new Cesium.Cartesian3(0, 0, -10000),// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})}} else if (data.drawingMode === 'text') {viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),label: {text: text,font: _font,fillColor: _color,disableDepthTestDistance: Number.POSITIVE_INFINITY,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5),show: visible}})}},initPlotUtil() {const _this = thisthis.$PlotUtil = new PlotUtil({defaultColorValue: '#17E980',PlottingStatus: function (value) {_this.plottingStatus = valueconsole.log('..................PlottingStatus', value)},Finish: function (data) {console.log('..................Finish', data)_this.plotData = data},VerticesFinish: function (data) {console.log('..................VerticesFinish', data)},CurrentEditVertice: function (data) {console.log('..................CurrentEditVertice', data)}})},handleClick (item) {this.active =this.active === item.name? (this.active = ''): (this.active = item.name)if (this.active) {this.$PlotUtil.StartPlot(this.active)} else {this.$PlotUtil.Destory()}}}
}
      <div class="ul"><div v-for="(item, index) of btns" :key="index" class="li" :class="{ active: item.name === active }"@click="handleClick(item)">{{ item.name }}</div><div class="li" :class="{ disabled: plottingStatus }" @click="handleSave">保存</div></div>

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

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

相关文章

mysql死锁分析show engine innodb status

文章目录 1、show engine innodb status命令2、前置知识3、无符号数、有符号数4、innodb关于有符号数的规定5、为什么会有这个规定 1、show engine innodb status命令 最近在使用mysql的show engine innodb status命令分析死锁&#xff0c;发现了一个有意思的点。就是红框里圈…

Docker 方式 部署 vue 项目 (docker + vue + nginx)

1.安装好 nginx 。 2. 把 vue 项目的源码克隆到确定目录下。用 git 管理&#xff0c;所以直接 git clone 到既定目录就行了。 如我的目录是&#xff1a;/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包&#xff1a; npm run build 复制 会自动生成 dist…

详解推送Git分支时发生的 cannot lock ref 错误

在码云上建了一个项目仓库,分支模型使用 git-flow ,并在本地新建了一个功能分支 feature/feature-poll。后来在推送时发生错误,提示 cannot lock ref ...... 这样的错误信息。下面复盘一下具体过程和解决办法,以供参考。 在码云中建立仓库时,考虑到想按照 GitFlow 的模式…

两个状态的马尔可夫链

手动推导如下公式。 证明&#xff1a; 首先将如下矩阵对角化&#xff1a; { 1 − a a b 1 − b } \begin {Bmatrix} 1-a & a \\ b & 1-b \end {Bmatrix} {1−ab​a1−b​} (1)求如下矩阵的特征值&#xff1a; { 1 − a a b 1 − b } { x 1 x 2 } λ { x 1 x 2 }…

【心电图信号压缩】ECG信号压缩与通过三次样条近似重建的ECG信号压缩研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Stable Diffusion - 幻想 (Fantasy) 风格与糖果世界 (Candy Land) 的人物图像提示词配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132212193 图像由 DreamShaper8 模型生成&#xff0c;融合糖果世界。 幻想 (Fantasy) 风格图像是一种以想象力为主导的艺术形式&#xff0c;创造了…

Electron学习1 安装环境与第一个程序

Electron学习1 安装环境与第一个程序 一、 Electron 简介二、安装 nvm三、安装nodejs四、安装nrm五、安装electron1. npm 初始化2. 创建 package.json3. 安装electron4. 创建一个页面5. 创建文件main.js6. 创建预加载器文件 preload.js7. 启动程序 六、打包 一、 Electron 简介…

Scala编程语言入门教程

Scala教程 方便个人学习和查阅 学习目标 Scala介绍 简介 Scala创始人Martin Odersky马丁奥德斯基 再回到我们的scala语言&#xff0c;在Scala官网https://www.scala-lang.org/介绍了其六大特征。 Java和scala可以混编 类型推测(自动推测类型) 并发和分布式&#xff08;Ac…

每日一学:什么是 Harbor ?

目录 什么是 Harbor &#xff1f; 一、Harbor 的优势 二、Harbor 架构构成 三、Core services 这是 Harbor 的核心功能 什么是 Harbor &#xff1f; Harbor 是 VMware 公司开源的企业级 Docker Registry 项目&#xff0c;其目标是帮助用户迅速搭建一个企业级的 Docker Reg…

VUE之JWT前后端分离认证,学生管理系统

参考资料: SpringBoot搭建教程 SpringCloud搭建教程 JWT视频教程 JWT官网 Vue视频教程 JWT视频参考资料、VUE视频资料,及前后端demo 特别有参考价值的JWT博客1 特别有参考价值的JWT博客2 cookie、localstorage和sessionStorage的区别1 cookie、localstorage和sessi…

Metamask登录方式集成

Metamask登录 https://www.toptal.com/ethereum/one-click-login-flows-a-metamask-tutorial#how-the-login-flow-works 参考&#xff1a; https://zh.socialgekon.com/one-click-login-with-blockchain 后端需要在用户表中增加address和nonce字段。兼容其他登录方式&#xff0…

【分布式技术专题】RocketMQ延迟消息实现原理和源码分析

痛点背景 业务场景 假设有这么一个需求&#xff0c;用户下单后如果30分钟未支付&#xff0c;则该订单需要被关闭。你会怎么做&#xff1f; 之前方案 最简单的做法&#xff0c;可以服务端启动个定时器&#xff0c;隔个几秒扫描数据库中待支付的订单&#xff0c;如果(当前时间-订…

国产芯力特SIT1024QHG四通道本地互联网络(LIN)收发器,可替代TJA1024HG

SIT1024Q 是一款四通道本地互联网络&#xff08;LIN&#xff09;物理层收发器&#xff0c;符合 LIN 2.0、LIN 2.1、LIN 2.2、 LIN 2.2A 、 ISO 17987-4:2016 (12V) 和 SAE J2602 标准。主要适用于使用 1kbps 至 20kbps 传输速 率的车载网络。 SIT1024Q 通过 TXDx 引…

【0805作业】Linux中 AB终端通过两根有名管道进行通信聊天(半双工)(全双工)

作业一&#xff1a;打开两个终端&#xff0c;要求实现AB进程对话【两根管道】 打开两个终端&#xff0c;要求实现AB进程对话 A进程先发送一句话给B进程&#xff0c;B进程接收后打印B进程再回复一句话给A进程&#xff0c;A进程接收后打印重复1.2步骤&#xff0c;当收到quit后&am…

桥接模式-java实现

桥接模式 桥接模式的本质&#xff0c;是解决一个基类&#xff0c;存在多个扩展维度的的问题。 比如一个图形基类&#xff0c;从颜色方面扩展和从形状上扩展&#xff0c;我们都需要这两个维度进行扩展&#xff0c;这就意味着&#xff0c;我们需要创建一个图形子类的同时&#x…

【MMU】认识 MMU 及内存映射的流程

MMU&#xff08;Memory Manager Unit&#xff09;&#xff0c;是内存管理单元&#xff0c;负责将虚拟地址转换成物理地址。除此之外&#xff0c;MMU 实现了内存保护&#xff0c;进程无法直接访问物理内存&#xff0c;防止内存数据被随意篡改。 目录 一、内存管理体系结构 1、…

内网穿透:实现公网访问内网群晖NAS的方法

公网远程访问内网群晖NAS 7.X版 【内网穿透】 文章目录 公网远程访问内网群晖NAS 7.X版 【内网穿透】前言1. 在群晖控制面板找到“终端机和SNMP”2. 建立一条连接公网数据隧道3. 获取公网访问内网群晖NAS的数据隧道入口 前言 群晖NAS作为应用较为广泛的小型数据存储中心&#…

SQL92 SQL99 语法 Oracle 、SQL Server 、MySQL 多表连接、Natural 、USING

SQL92 VS SQL 99 语法 92语法 内连接 from table1&#xff0c; table2 where table1.col table2.col 外连接 放在 从表 左连接&#xff1a; from table1&#xff0c; table2 where table1.col table2.col() 右连接&#xff1a; from table1&#xff0c; table2 where table…

自定义注解(Annontation)

目录 1.注解定义 2.元注解定义 3. 自定义注解&#xff08;自定义的注解名称相同的会覆盖原注解&#xff09; 4.Annotation架构&#xff08;元注解参数介绍&#xff09; 1.注解定义 注解是用来将任何的信息或元数据&#xff08;metadata&#xff09;与程序元素&#xff08;类…