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

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

一、方法一:

1,结果显示

贴地:

在这里插入图片描述

不贴地:

在这里插入图片描述

2,方法全部代码:

主方法:
 /**
   * 绘制多边形
   * @param {Object}  option
   * @param {Boolean} option.ground 是否贴地
   */ 
   DrawPolygon(option) {
    var allPoints=[]
    // 设置返回值
    return new Promise((resolve, reject) => {
    // 1. 获取Cesium Viewer
    let 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
          }
        });
      polygonPoints.push(polygonPoints[0]);
      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;
      // drillPick
      for (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;
        }
        // 3dtilset
        if (isOn3dtiles) {
          this.viewer.scene.pick(px); // pick
          cartesian = 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;
      // Terrain
      if (!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来实现

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

UI设计师个人工作总结范文

UI设计师个人工作总结范文篇一 感受到了领导们“海纳百川”的胸襟&#xff0c;感受到了作为广告人“不经历风雨&#xff0c;怎能见彩虹”的豪气&#xff0c;也体会到了重庆广告从业人员作为拓荒者的艰难和坚定(就目前国内广告业而言&#xff0c;我认为重庆广告业尚在发展阶段并…

实战:工作中对并发问题的处理 | 京东物流技术团队

1. 问题背景 问题发生在快递分拣的流程中&#xff0c;我尽可能将业务背景简化&#xff0c;让大家只关注并发问题本身。 分拣业务针对每个快递包裹都会生成一个任务&#xff0c;我们称它为 task。task 中有两个字段需要关注&#xff0c;一个是分拣中发生的异常&#xff08;exp…

本地跑Mapreduce程序的相关配置

本地跑MapReduce程序需要配置的代码 为了在本地运行MapReduce程序&#xff0c;需要加如下的东西 在项目中创建一个如图所示的包&#xff1a;org.apache.hadoop.io.nativeio&#xff0c;并在该包下面创建一个名为&#xff1a;NativeIO的类&#xff08;注意&#xff1a;名字不能…

RabbitMQ:可靠消息传递的强大消息中间件

消息中间件在现代分布式系统中起着关键作用&#xff0c;它们提供了一种可靠且高效的方法来进行异步通信和解耦。在这篇博客中&#xff0c;我们将重点介绍 RabbitMQ&#xff0c;一个广泛使用的开源消息中间件。我们将深入探讨 RabbitMQ 的特性、工作原理以及如何在应用程序中使用…

第三章 图论 No.11二分图,匈牙利算法与点覆盖

文章目录 二分染色&#xff1a;257. 关押罪犯增广路径372. 棋盘覆盖 最小点覆盖376. 机器任务 最大独立集378. 骑士放置 最小路径点覆盖 二分染色&#xff1a;257. 关押罪犯 257. 关押罪犯 - AcWing题库 最大最小问题&#xff0c;一眼二分 答案的范围在 [ 1 , 1 e 9 ] [1, 1…

ReactDOM模块react-dom/client没有默认导出报错解决办法

import ReactDOM 模块“"E:/Dpandata/Shbank/rt-pro/node_modules/.pnpm/registry.npmmirror.comtypesreact-dom18.2.7/node_modules/types/react-dom/client"”没有默认导出。 解决办法 只需要在tsconfig.json里面添加配置 "esModuleInterop": true 即…

关于跨国文件传输需要了解的5点

我们在为企业客户解决各种IT问题的多年经验中&#xff0c;发现跨国文件传输一直是许多企业IT部门的难题。提升数据传输效率只是跨国文件传输的一个方面&#xff0c;还有更多的因素困扰着一些大型企业、集团。 作为企业文件传输的领先品牌&#xff0c;镭速(私有化部署方案&…

VectorStyler for Mac: 让你的创意无限绽放的全新设计工具

VectorStyler for Mac是一款专为Mac用户打造的矢量设计工具&#xff0c;它结合了功能强大的矢量编辑器和创意无限的样式编辑器&#xff0c;让你的创意无限绽放。 VectorStyler for Mac拥有直观简洁的用户界面&#xff0c;让你能够轻松上手。它提供了丰富的矢量绘图工具&#x…

flutter 常见的状态管理器

flutter 常见的状态管理器 前言一、Provider二、Bloc三、Redux四、GetX总结 前言 当我们构建复杂的移动应用时&#xff0c;有效的状态管理是至关重要的&#xff0c;因为应用的不同部分可能需要共享数据、相应用户交互并保持一致的状态。Flutter 中有多种状态管理解决方案&#…

机器学习深度学习——seq2seq实现机器翻译(数据集处理)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——从编码器-解码器架构到seq2seq&#xff08;机器翻译&#xff09; &#x1f4da;订阅专栏&#xff1a;机…

三菱plc 工程的系统参数fCPu参数与 可编程控制器的系统参数/CPu参数不一致。

三菱plc 工程的系统参数fCPu参数与 可编程控制器的系 统参数/CPu参数不一致。

掌握Python的X篇_30_使用python解析网页HTML

本篇将会介绍beutifulsoup4模块&#xff0c;可以用于网络爬虫、解析HTML和XML&#xff0c;对于没有接触过前端&#xff0c;不了解HTML是如何工作的&#xff0c;需要先解释一下什么事HTML。 1. HTML 网页中的各种布局等的背后都是非常简单的纯文本格式&#xff0c;那种格式称为…

Android的学习系列之Android Studio Setup安装

Android的学习系列之Android Studio Setup安装 [TOC](Android的学习系列之Android Studio Setup安装) 前言Android平台搭建总结 前言 还是项目需要&#xff0c;暂时搭建安卓的运行平台。 Android平台搭建 安装包 双击安装包&#xff0c;进入安装。 下一步 根据自己需求&a…

(7)(7.1) 使用航点和事件规划任务

文章目录 前言 7.1.1 设置Home位置 7.1.2 视频&#xff1a;制作并保存多路点任务 7.1.3 视频&#xff1a;加载已保存的多航点任务 7.1.4 使用说明 7.1.5 提示 7.1.6 自动网格 7.1.7 任务指令 7.1.8 任务结束 7.1.9 任务重置 7.1.10 MIS_OPTIONS 7.1.11 任务再出发 …

客户跟进轻松搞定:推荐一款功能全面的客户跟进软件

阅读本文您可以了解&#xff1a;1、如何选择客户跟进软件&#xff1b;2、简单好用的客户跟进软件推荐 客户跟进是建立并维护良好客户关系的关键步骤。通过定期的跟进&#xff0c;可以及时了解客户的需求和反馈&#xff0c;解决问题&#xff0c;提供支持&#xff0c;从而增强客…

ubuntu18.04下配置muduoC++11环境

1.安装muduo依赖的编译工具及库 Cmake sudo apt-get install cmakeBoost sudo apt-get install libboost-dev libboost-test-devcurl、c-ares DNS、google protobuf sudo apt-get install libcurl4-openssl-dev libc-ares-dev sudo apt-get install protobuf-compiler libp…

你知道什么是Curriculum Training模型吗

随着深度学习技术的飞速发展&#xff0c;研究人员在不断探索新的训练方法和策略&#xff0c;以提高模型的性能和泛化能力。其中&#xff0c;Curriculum Training&#xff08;课程学习&#xff09;模型作为一种前沿的训练方法&#xff0c;引起了广泛的关注和研究。本文将深入探讨…

如何实现安全上网

l 场景描述 政府、军工、科研等涉密单位或企业往往要比其他组织更早接触高精尖的技术与产品&#xff0c;相对应的数据保密性要求更高。常规的内外网物理隔离手段&#xff0c;已经满足不了这些涉密单位的保密需求&#xff0c;发展到现在&#xff0c;需求已经演变成既要保证网络…

Python爱心光波

文章目录 前言Turtle入门简单案例入门函数 爱心光波程序设计程序分析 尾声 前言 七夕要来啦&#xff0c;博主在闲暇之余创作了一个爱心光波&#xff0c;感兴趣的小伙伴们快来看看吧&#xff01; Turtle入门 Turtle 是一个简单而直观的绘图工具&#xff0c;它可以帮助你通过简…

【linux】2 软件管理器yum和编辑器vim

目录 1. linux软件包管理器yum 1.1 什么是软件包 1.2 关于rzsz 1.3 注意事项 1.4 查看软件包 1.5 如何安装、卸载软件 1.6 centos 7设置成国内yum源 2. linux开发工具-Linux编辑器-vim使用 2.1 vim的基本概念 2.2 vim的基本操作 2.3 vim正常模式命令集 2.4 vim末行…