cesium学习记录08-鼠标绘制多边形

上一篇学习了实体的一些基础知识，这一篇来学习鼠标绘制实体多边形的实现

1，结果显示

贴地：

在这里插入图片描述

不贴地：

在这里插入图片描述

2，方法全部代码：

主方法：
 /*** 绘制多边形* @param {Object}  option* @param {Boolean} option.ground 是否贴地*/ DrawPolygon(option) {var allPoints=[]// 设置返回值return new Promise((resolve, reject) => {// 1. 获取Cesium Viewerlet viewer = this.viewer;// 2. 创建一个用于存储多边形顶点的数组let polygonPoints = [];// 3. 创建一个用于显示当前绘制中的多边形的实体let drawingPolygon = viewer.entities.add({id: "drawingPolygon",name: "画多边形",polygon: {hierarchy: new Cesium.CallbackProperty(() => {return new Cesium.PolygonHierarchy(polygonPoints);}, false),material: Cesium.Color.BLUE.withAlpha(0.2),perPositionHeight: (option&&option.ground)||false // true:不贴地/false:贴地},});// 4. 创建一个用于显示当前绘制中的线的实体let drawingLine = viewer.entities.add({id: "drawingLine",name: "画线",polyline: {positions: new Cesium.CallbackProperty(() => {return polygonPoints;}, false),width: 3,material: Cesium.Color.GREEN}});// 5. 监听鼠标点击事件，将点击的点添加到顶点数组中，并添加点实体let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(event => {var cartesian = this.getCatesian3FromPX(event.position);if (cartesian) {// 将点坐标添加到数组中polygonPoints.push(cartesian.clone());// 在第一次点击时，添加一个克隆的点到数组中，用于动态更新if (polygonPoints.length === 1) {polygonPoints.push(cartesian.clone());}// 添加点实体viewer.entities.add({position: cartesian,point: {color: Cesium.Color.RED,pixelSize: 10}});//将三维笛卡尔坐标系点转为经纬度坐标点，并保存到点数组中let cartesian3 = cartesian.clone()// 使用Cesium.Cartographic.fromCartesian将Cartesian3对象转换为Cartographic对象let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);allPoints.push([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height]);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 6. 监听鼠标移动事件，动态更新多边形和线的形状handler.setInputAction(event => {var cartesian = this.getCatesian3FromPX(event.endPosition);if (polygonPoints.length >= 2) {if (cartesian && cartesian.x) {polygonPoints.pop();polygonPoints.push(cartesian);}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 7. 监听鼠标右键点击事件，结束绘制handler.setInputAction(() => {var cartesian=polygonPoints[polygonPoints.length-1]// 添加点实体viewer.entities.add({position: cartesian,point: {color: Cesium.Color.RED,pixelSize: 10}});handler.destroy(); // 关闭鼠标事件监听，结束绘制resolve(allPoints);}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);})},
调用进行位置拾取和转换的方法（此处三个方法来自测量插件）：
 /*** 拾取位置点* @param {Object} px 屏幕坐标* @return {Object} Cartesian3 三维坐标*/getCatesian3FromPX: function(px) {if (this.viewer && px) {var picks = this.viewer.scene.drillPick(px);var cartesian = null;var isOn3dtiles = false,isOnTerrain = false;// drillPickfor (let i in picks) {let pick = picks[i];if ((pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||(pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||(pick && pick.primitive instanceof Cesium.Model)) {//模型上拾取isOn3dtiles = true;}// 3dtilsetif (isOn3dtiles) {this.viewer.scene.pick(px); // pickcartesian = this.viewer.scene.pickPosition(px);if (cartesian) {let cartographic = Cesium.Cartographic.fromCartesian(cartesian);if (cartographic.height < 0) cartographic.height = 0;let lon = Cesium.Math.toDegrees(cartographic.longitude),lat = Cesium.Math.toDegrees(cartographic.latitude),height = cartographic.height;cartesian = this.transformWGS84ToCartesian({lng: lon,lat: lat,alt: height});}}}// 地形let boolTerrain =this.viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider;// Terrainif (!isOn3dtiles && !boolTerrain) {var ray = this.viewer.scene.camera.getPickRay(px);if (!ray) return null;cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);isOnTerrain = true;}// 地球if (!isOn3dtiles && !isOnTerrain && boolTerrain) {cartesian = this.viewer.scene.camera.pickEllipsoid(px,this.viewer.scene.globe.ellipsoid);}if (cartesian) {let position = this.transformCartesianToWGS84(cartesian);if (position.alt < 0) {cartesian = this.transformWGS84ToCartesian(position, 0.1);}return cartesian;}return false;}},/**** 坐标转换 84转笛卡尔* @param {Object} {lng,lat,alt} 地理坐标* @return {Object} Cartesian3 三维位置坐标*/transformWGS84ToCartesian: function(position, alt) {if (this.viewer) {return position? Cesium.Cartesian3.fromDegrees(position.lng || position.lon,position.lat,(position.alt = alt || position.alt),Cesium.Ellipsoid.WGS84): Cesium.Cartesian3.ZERO;}},/**** 坐标转换 笛卡尔转84* @param {Object} Cartesian3 三维位置坐标* @return {Object} {lng,lat,alt} 地理坐标*/transformCartesianToWGS84: function(cartesian) {if (this.viewer && cartesian) {var ellipsoid = Cesium.Ellipsoid.WGS84;var cartographic = ellipsoid.cartesianToCartographic(cartesian);return {lng: Cesium.Math.toDegrees(cartographic.longitude),lat: Cesium.Math.toDegrees(cartographic.latitude),alt: cartographic.height};}},

3，调用方法：

let option = {ground: true     //true:不贴地/false:贴地           };
DrawPolygon(option).then(allPoints => {// 在这里，allPoints是结束绘制后的点坐标数组var resultPoints=allPoints})

4，DrawPolygon方法说明：

1，定义返回结果的方式:
var allPoints=[]
return new Promise((resolve, reject) => {
......
}

在这个方法开始时，定义了一个allPoints数组，用于存储绘制的多边形的所有顶点，并且返回一个Promise，允许在绘制结束后将这些点的坐标返回。

2，获取Cesium Viewer:
let viewer = this.viewer;

获取Cesium的Viewer实例

3，创建一个实体以显示绘制中的多边形：
let drawingPolygon = viewer.entities.add({ ... });

这段代码通过Cesium的entities.add方法创建一个新的实体，并将它添加到地图上。这个实体用于实时显示用户绘制的多边形。

4，创建一个实体以显示绘制中的线:
let drawingLine = viewer.entities.add({ ... });

创建一个实体来实时显示用户绘制的线。

5，设置鼠标点击事件的监听:
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(event => { ... }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

这段代码创建一个新的ScreenSpaceEventHandler实例来监听鼠标和触摸事件。然后设置一个函数来监听左键点击事件。每当用户点击鼠标左键时，这个函数就会被调用，并将点击的位置添加到polygonPoints数组（即多边形的顶点）和allPoints数组。
需要说明的是这一段代码：

//将三维笛卡尔坐标系点转为经纬度坐标点，并保存到点数组中let cartesian3 = cartesian.clone()// 使用Cesium.Cartographic.fromCartesian将Cartesian3对象转换为Cartographic对象let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);allPoints.push([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height]);

加上这一段只是因为，如果要对获取的点数组进行进一步使用，我更习惯使用经纬度坐标

6，设置鼠标移动事件的监听:
handler.setInputAction(event => { ... }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

当用户移动鼠标时，这个函数会被调用。它用于实时更新正在绘制的多边形和线的形状。

7，设置鼠标双击事件的监听:
handler.setInputAction(() => { ... }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

这个函数监听鼠标左键双击事件。当用户双击鼠标左键时，这个函数会被调用，表示用户完成了多边形的绘制。此时，它会添加最后一个点实体，关闭鼠标事件监听，结束绘制，并通过resolve(allPoints)将绘制的点坐标返回。

8，总说明：

这个方法允许用户通过点击和移动鼠标在Cesium地图上绘制一个多边形。在用户完成绘制（通过双击鼠标左键）后，这个方法通过Promise的resolve函数将绘制的点坐标数组allPoints返回，供其他部分的代码使用。
（比如进行填挖方的计算，将上面的点数组传到地形填挖方计算的方法，用来生成三角网）
在这里插入图片描述

5，getCatesian3FromPX方法说明：

该方法根据给定的屏幕坐标px，计算出对应的三维世界坐标。该三维世界坐标可以代表一个具体的点在地图上的位置。
使用drillPick方法来获取屏幕坐标点上所有的对象。如果该点上有一个或多个对象，方法会尝试从3D模型上拾取坐标。
如果拾取不在3D模型上，并且地形存在，则从地形上拾取坐标。
如果既不在3D模型上也不在地形上，则从地球椭球体上拾取坐标。
最后返回这个点的三维世界坐标，或者在无法确定时返回false。

6，transformWGS84ToCartesian方法说明：

该方法根据给定的地理坐标（WGS84格式）计算出相应的三维世界坐标（笛卡尔坐标）。
使用Cesium的Cartesian3.fromDegrees方法从给定的经纬度和高度计算出三维坐标。

7，transformCartesianToWGS84方法说明：

该方法根据给定的三维世界坐标（笛卡尔坐标）计算出相应的地理坐标（WGS84格式）。
使用Cesium的Ellipsoid.WGS84和cartesianToCartographic方法将三维世界坐标转换为地理坐标。

8，后续学习记录文章说明：

将火星科技（Mars3D）的一些例子，自己用Cesium来实现

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

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

相关文章

通过TightVNC远程访问MacOS

通过TightVNC远程访问MacOS

目录 一、下载 TightVNC 下载链接&#xff1a;https://www.tightvnc.com/ 下载后按步骤进行安装&#xff0c;安装完成后安装目录如下&#xff1a; 运行 tvnviewer.exe&#xff0c;输入远程 IP&#xff0c;点击【connect】&#xff1a; 输入密码&#xff0c;点击【OK】后即可远…
阅读更多...
Spring Boot 知识集锦之actuator监控端点详解

Spring Boot 知识集锦之actuator监控端点详解

文章目录 0.前言1.参考文档2.基础介绍默认支持的端点 3.步骤3.1. 引入依赖3.2. 配置文件3.3. 核心源码 4.示例项目5.总结 0.前言 背景&#xff1a; 一直零散的使用着Spring Boot 的各种组件和特性&#xff0c;从未系统性的学习和总结&#xff0c;本次借着这个机会搞一波。共同学…
阅读更多...
自适应AI chatgpt智能聊天创作官网html源码

自适应AI chatgpt智能聊天创作官网html源码

我们致力于开发先进的自适应AI智能聊天技术&#xff0c;旨在为用户提供前所未有的聊天体验。通过融合自然语言处理、机器学习和深度学习等领域的顶尖技术&#xff0c;我们的智能聊天系统能够准确理解用户的需求并给出相应的回应。 我们的自适应AI智能聊天系统具备以下核心特点…
阅读更多...
数据结构：堆的实现

数据结构：堆的实现

1.堆的概念 如果有一个关键码的集合 K { k1 &#xff0c;k2 &#xff0c;k3 &#xff0c;…&#xff0c;kn }&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中&#xff0c;并且 k(i) < k(i*21) 和 k(i) < k(i*22)&#xff0c; i 0 &#xff…
阅读更多...
软件测试常用工具总结（测试管理、单元测试、接口测试、自动化测试、性能测试、负载测试等）

软件测试常用工具总结（测试管理、单元测试、接口测试、自动化测试、性能测试、负载测试等）

前言 在软件测试的过程中&#xff0c;多多少少都是会接触到一些测试工具&#xff0c;作为辅助测试用的&#xff0c;以提高测试工作的效率&#xff0c;使用好了测试工具&#xff0c;能对测试起到一个很好的作用&#xff0c;同时&#xff0c;有些公司&#xff0c;也会要求掌握一…
阅读更多...
centos7安装erlang及rabbitMQ

centos7安装erlang及rabbitMQ

下载前注意事项&#xff1a; 第一&#xff1a;自己的系统版本&#xff0c;centos中uname -a指令可以查看&#xff0c;el8&#xff0c;el7&#xff0c;rabbitMQ的包不一样&#xff01; 第二&#xff1a;根据rabbitMQ中erlang version找到想要下载rabbitMQ对应erlang版本&#x…
阅读更多...
【Python】解决“Tk_GetPixmap: Error from CreateDIBSection”闪退问题

【Python】解决“Tk_GetPixmap: Error from CreateDIBSection”闪退问题

解决Python使用Tkinter的Notebook切换标签时出现的“Tk_GetPixmap: Error from CreateDIBSection 操作成功完成”闪退问题 零、问题描述 在使用Tkinter的Notebook控件时&#xff0c;对其标签进行切换&#xff0c;发现切换不了&#xff0c;一切换就报如下图错误&#xff1a; …
阅读更多...
Stable Diffusion基础：ControlNet之图片高仿效果

Stable Diffusion基础：ControlNet之图片高仿效果

今天继续给大家分享AI绘画中 ControlNet 的强大功能&#xff0c;本次的主角是 Reference&#xff0c;它可以将参照图片的风格迁移到新生成的图片中&#xff0c;这句话理解起来很困难&#xff0c;我们将通过几个实例来加深体会&#xff0c;比如照片转二次元风格、名画改造、AI减…
阅读更多...
日常BUG——微信小程序提交代码报错

日常BUG——微信小程序提交代码报错

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 在使用微信小程序开发工具进行提交代码时&#xff0c;报出如下错误&#xff1a; Invalid a…
阅读更多...
FlexRay汽车总线静电防护，如何设计保护方案图？

FlexRay汽车总线静电防护，如何设计保护方案图？

FlexRay是一种高速、实时、可靠、具备故障容错能力的总线技术&#xff0c;是继CAN和LIN总线之后的最新研发成果。FlexRay为线控应用&#xff08;即线控驱动、线控转向、线控制动等&#xff09;提供了容错和时间确定性性能要求。虽然FlexRay将解决当前高端和未来主流车载网络的挑…
阅读更多...
关于vant2 组件van-dropdown-item，在IOS手机上，特定条件下无法点击问题的探讨

关于vant2 组件van-dropdown-item，在IOS手机上，特定条件下无法点击问题的探讨

情景重现 先贴有问题的代码 <template><div :class"showBar ? homeContain : homeContain-nobar"><div class"contant" id"content"><van-dialog v-model"loading" :before-close"onBeforeClose" :…
阅读更多...
Openlayers 实战 - 地图视野（View）- 图层 -（layer）- 资源（source）显示等级设置。

Openlayers 实战 - 地图视野（View）- 图层 -（layer）- 资源（source）显示等级设置。

Openlayers 实战 - 地图视野&#xff08;View&#xff09;- 图层 -&#xff08;layer&#xff09;- 资源&#xff08;source&#xff09;显示等级设置。 问题原因核心代码完整代码&#xff1a;在线示例 在以往的项目维护中&#xff0c;出现一个问题&#xff0c;使用最新高清底图…
阅读更多...
什么是数字孪生技术？如何将其应用到建筑行业？

什么是数字孪生技术？如何将其应用到建筑行业？

随着科技的飞速发展&#xff0c;数字孪生技术逐渐成为了建筑行业的一个新选择&#xff0c;可能为建筑环境带来深远的变革。数字孪生技术是将物理世界与数字世界相连接的创新方法&#xff0c;通过实时数据采集、模拟仿真和智能分析&#xff0c;实现真实世界与虚拟世界的无缝互动…
阅读更多...
css3-flex布局：基础使用 / Flexbox布局

css3-flex布局：基础使用 / Flexbox布局

一、理解flex 二、理解Flex布局&#xff08;又称Flexbox布局&#xff09; Flex布局&#xff08;又称Flexbox布局&#xff09;是一种基于Web的CSS3布局模式&#xff0c;其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项…
阅读更多...
通过 Amazon SageMaker JumpStart 部署 Llama 2 快速构建专属 LLM 应用

通过 Amazon SageMaker JumpStart 部署 Llama 2 快速构建专属 LLM 应用

来自 Meta 的 Llama 2 基础模型现已在 Amazon SageMaker JumpStart 中提供。我们可以通过使用 Amazon SageMaker JumpStart 快速部署 Llama 2 模型&#xff0c;并且结合开源 UI 工具 Gradio 打造专属 LLM 应用。 Llama 2 简介 Llama 2 是使用优化的 Transformer 架构的自回归语…
阅读更多...
Redis辅助功能

Redis辅助功能

一、Redis队列 1.1、订阅 subscribe ch1 ch2 1.2 publish:发布消息 publish channel message 1.3 unsubscribe: 退订 channel 1.4 模式匹配 psubscribe ch* 模糊发布&#xff0c;订阅&#xff0c;退订&#xff0c; p* <channelName> 1.5 发布订阅原理 订阅某个频道或…
阅读更多...
C语言入门 Day_3 整数和变量

C语言入门 Day_3 整数和变量

目录 1.整型 2.变量 3.易错点 4.思维导图 前言&#xff1a; 昨天的课程里面&#xff0c;我们学会了使用printf()打印一行字母&#xff0c;比如 printf("Hello World!\n"); 那么编程中用来表示&#xfeff;数字的是什么类型呢&#xff1f; 接下来我们学习一下…
阅读更多...
物联网工程应用实训室建设方案

物联网工程应用实训室建设方案

一、物联网工程应用系统概述 1.1物联网工程定义 物联网工程&#xff08;Internet of Things Engineering&#xff09;是一种以信息技术&#xff08;IT&#xff09;来改善实体世界中人们生活方式的新兴学科&#xff0c;它利用互联网技术为我们的日常生活活动提供服务和增益&am…
阅读更多...
断点续传的未来发展趋势与前景展望

断点续传的未来发展趋势与前景展望

断点续传是一种在网络传输中断后&#xff0c;能够从中断的位置继续传输的技术。它可以有效地避免因为网络不稳定、服务器故障、用户操作等原因导致的传输失败&#xff0c;节省了用户的时间和流量&#xff0c;提高了传输的效率和可靠性。断点续传在很多场景中都有广泛的应用&…
阅读更多...
怎么使用手机远程控制Win10电脑？

怎么使用手机远程控制Win10电脑？

可以使用手机远程控制电脑吗&#xff1f; “近期&#xff0c;我将出差一段时间。问题是&#xff0c;我希望能够从很远的地方浏览家里电脑上的一些东西&#xff0c;但我不会一直随身携带笨重的笔记本电脑。我可以手机远程访问Windows电脑吗&#xff1f; ” 当然&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023