当前位置: 首页 > news >正文

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>

相关文章:

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

Vue.js2Cesium1.103.0 六、标绘与测量 点&#xff0c;线&#xff0c;面的绘制&#xff0c;可实时编辑图形&#xff0c;点击折线或多边形边的中心点&#xff0c;可进行添加线段移动顶点位置等操作&#xff0c;并同时计算出点的经纬度&#xff0c;折线的距离和多边形的面积。 De…...

【redis 延时队列】使用go-redis的list做异步,生产消费者模式

分享一个用到的&#xff0c;使用go-redis的list做异步&#xff0c;生产消费者模式&#xff0c;接着再用 go 协程去检测队列里是否有东西去消费 如果队列为空&#xff0c;就会一直pop&#xff0c;空轮询导致 cpu 资源浪费和redis qps无效升高&#xff0c;所以可以通过 time.Sec…...

激光焊接塑料多点测试全画面穿透率测试仪

工程塑料由于其具有高比强度、电绝缘性、耐磨性、耐腐蚀性等优点&#xff0c;已广泛应用于各个重要领域。另一方面&#xff0c;工程塑料还具有良好的焊接性&#xff0c;是制成复合材料的基体材料的优良选择&#xff0c;因此目前已成为国内外新型复合材料的研究热点。 工程塑料…...

用 Uno 当烧录器给 atmega328 烧录 bootloader

用 Uno 当烧录器给 atmega328 烧录 bootloader date: 2023-8-10 https://backmountaindevil.github.io/#/hackaday/arduino/isp 引脚接线 把两个板子的 11(MOSI)、12(MISO)、13(SCK)、5V、GND 两两相连&#xff0c;还要把 Uno&#xff08;烧录器&#xff09;的 10 接到atmeg…...

spring boot策略模式实用: 告警模块为例

spring boot策略模式实用: 告警模块 0 涉及知识点 策略模式, 模板方法, 代理, 多态, 反射 1 需求概括 场景: 每隔一段时间, 会获取设备运行数据, 如通过温湿度计获取到当前环境温湿度;需求: 对获取回来的进行分析, 超过配置的阈值需要产生对应的告警 2 方案设计 告警的类…...

Camunda 7.x 系列【10】使用 Rest API 运行流程实例

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 前言2. 官方接口文档3. 本地接口文档3.1 Postman3.2 Camunda Platform Run Swagger3.3 S…...

Python-OpenCV中的图像处理-边缘检测

Python-OpenCV中的图像处理-边缘检测 边缘检测Canny算子 边缘检测Canny算子 Canny 边缘检测是一种非常流行的边缘检测算法&#xff0c;是 John F.Canny 在 1986 年提出的。它是一个有很多步构成的算法&#xff1a;噪声去除、计算图像梯度、非极大值抑制、滞后阀值等。 Canny(i…...

一文了解Java序列化和反序列化:对象的存储与传输

一文了解Java序列化和反序列化&#xff1a;对象的存储与传输 作者&#xff1a;Stevedash 发布时间&#xff1a;2023年8月9日 21点30分 前言 Java序列化是一项强大而重要的技术&#xff0c;它允许我们将对象转换为字节流&#xff0c;以便在存储、传输和重建时使用。在本文中&…...

react-codemirror2 编辑器需点击一下或者延时才显示数据的问题

现象&#xff1a; <Codemirror/>组件的数据已经赋上值的情况下&#xff0c;初始状态不渲染数据&#xff0c;需要点击编辑框获取焦点后才展示&#xff0c;或者延迟了几秒才显示出来。 原因&#xff1a; 指定了一些依赖的版本&#xff0c;可能不兼容了一些功能&#xff0c…...

火山引擎联合Forrester发布《中国云原生安全市场现状及趋势白皮书》,赋能企业构建云原生安全体系

国际权威研究咨询公司Forrester 预测&#xff0c;2023年全球超过40%的企业将会采用云原生优先战略。然而&#xff0c;云原生在改变企业上云及构建新一代基础设施的同时&#xff0c;也带来了一系列的新问题&#xff0c;针对涵盖云原生应用、容器、镜像、编排系统平台以及基础设施…...

需要数电发票接口的,先熟悉下数电发票基本常识

最近有一些技术小伙伴来咨询数电发票接口的时候&#xff0c;对数电发票的一些常识不太了解&#xff0c; 导致沟通起来比较困难。比较典型的这三个问题&#xff1a; 一、开具数电票时&#xff0c;如何设置身份认证频次&#xff1f; 请公司的法定代表人或财务负责人登录江苏省电…...

node-sass是什么

一、Sass&#xff08;Syntactically Awesome Style Sheets&#xff09; 是一种CSS预处理器&#xff0c;它扩展了CSS的功能并提供了更强大的样式表语言。Sass允许开发人员使用变量、嵌套规则、混合&#xff08;Mixins&#xff09;、继承等高级功能来编写更简洁、可维护的样式代…...

C语言指针之 进阶

前言 今天来较为深入的介绍一下指针&#xff0c;希望大家能有所收获&#xff5e; 那么&#xff0c;先进行一些简单的基础知识复习吧。 字符指针 格式&#xff1a;char * 补充&#xff1a; 表达式“abcdef”的值是首字符a的地址 所以当像下面这么使用时&#xff0c;它的含…...

C++单例模式

文章目录 1、什么是单例2、一个好的单例应该具备的条件3、懒汉模式与饿汉模式4、单例实现&#xff1a;线程安全、内存安全的懒汉式单例&#xff08;基于C11的智能指针和互斥锁&#xff09; 1、什么是单例 单例 Singleton 是设计模式的一种&#xff0c;其特点是只提供唯一一个类…...

C++ 析构函数

析构函数 析构函数于构造函数相对应&#xff0c;构造函数是对象创建的时候自动调用的&#xff0c;而析构函数就是对象在销毁的时候自动调用的 特点&#xff1a; 1&#xff09;构造函数可以有多个来构成重载&#xff0c;但析构函数只能有一个&#xff0c;不能构成重载 2&…...

CSS——字体选择

在网页设计和开发中&#xff0c;字体选择是一个非常重要的因素。字体不仅仅是文字的表现形式&#xff0c;它们还能够传达出一种特定的情感和风格。在CSS中&#xff0c;我们可以通过使用字体代码来定义网页中使用的字体。 CSS提供了一种简单而灵活的方式来设置字体。通过使用fo…...

SpringBoot自动装配及run方法原理探究

自动装配 1、pom.xml spring-boot-dependencies&#xff1a;核心依赖在父工程中&#xff01;我们在写或者引入一些SpringBoot依赖的时候&#xff0c;不需要指定版本&#xff0c;就因为有这些版本仓库 1.1 其中它主要是依赖一个父工程&#xff0c;作用是管理项目的资源过滤及…...

Mybatis实现JsonObject对象与JSON之间交互

项目中使用PostGresql数据库进行数据存储&#xff0c;表中某字段为Json类型&#xff0c;用于存储Json格式数据。PG数据库能够直接存储Json算是一大特色&#xff0c;很多特定情境下使用直接存储Json字段数据能够大量节省开发时间&#xff0c;提高后台数据查询和转换效率。 1、基…...

spring boot 集成 jetcache【基础篇:@Cached、@CreateCache、@CacheRefresh】

手打不易&#xff0c;如果转摘&#xff0c;请注明出处&#xff01; 注明原文&#xff1a;https://zhangxiaofan.blog.csdn.net/article/details/129832925 目录 前言 版本 配置通用说明 项目结构 代码 启动类 实体类 基础使用——增删改查&#xff08;Cached、CacheInv…...

个人对前后端分离的一些看法

内容简介&#xff1a;前端开发过程中能完全不依赖后端的才是真正的前后端分离指的是工作过程中&#xff0c;前端的的代码中往往会掺杂一些后端的逻辑。后端返回了一个json对象 前端开发过程中能完全不依赖后端的才是真正的前后端分离 指的是工作过程中&#xff0c;前端的的代码…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...

【Qt】控件 QWidget

控件 QWidget 一. 控件概述二. QWidget 的核心属性可用状态&#xff1a;enabled几何&#xff1a;geometrywindows frame 窗口框架的影响 窗口标题&#xff1a;windowTitle窗口图标&#xff1a;windowIconqrc 机制 窗口不透明度&#xff1a;windowOpacity光标&#xff1a;cursor…...