cesium学习记录08

您所在的位置：网站首页 › cesium点击事件错位 › cesium学习记录08

cesium学习记录08

2024-07-13 12:44| 来源: 网络整理| 查看: 265

cesium学习记录08-鼠标绘制实体（点，线，矩形，圆，多边形）木卯彳亍 • 2023年08月25日 09:16 • 11月前 • 编程日记 • 阅读(28) • 违法举报

上一篇学习了创建实体的一些基础知识，但有时还需要我们使用鼠标进行手动绘制，这一篇就来进行鼠标绘制实体的实现（点，线，矩形，圆，多边形）。在这里插入图片描述

一、鼠标事件

既然是鼠标绘制，自然离不开鼠标事件，我们需要先简单了解一下cesium的鼠标事件。

1. ScreenSpaceEventHandler:

这是Cesium中用于处理鼠标和触摸事件的主要类。需要创建一个此类的实例来开始事件监听。

let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(event => { 略 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

上述代码示例为Cesium的canvas创建了一个新的事件处理器。

2. 常用的鼠标事件类型 (ScreenSpaceEventType):

LEFT_CLICK: 左键点击 RIGHT_CLICK: 右键点击 LEFT_DOUBLE_CLICK: 左键双击 RIGHT_DOUBLE_CLICK: 右键双击 MIDDLE_CLICK: 中键点击 MOUSE_MOVE: 鼠标移动 WHEEL: 鼠标滚轮滚动

3. 注册事件监听:

使用 setInputAction 方法可以为特定的事件类型设置回调函数。在回调函数中的 event 对象，包含与事件相关的数据。例如，对于鼠标点击事件，可以访问 event.position 来获取鼠标点击的屏幕坐标。

handler.setInputAction(function(event) { console.log('鼠标左键点击位置：:', event.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 4. 关闭或销毁事件监听： handler.destroy(); //永久性销毁事件处理器，之后它不能再被使用。 handler.removeInputAction(eventType); //仅移除特定事件类型的监听(如：handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);) 二、鼠标绘制点

在这里插入图片描述

（1）主要操作及思路：

允许用户点击地球的某个位置，然后在那个位置上添加一个红色的点，用户鼠标右击，结束绘制，并返回点位置。

（2）代码：主方法： /** * 绘制点 */ DrawPoints() { return new Promise((resolve, reject) => { let viewer = this.viewer; let drawnPoints = []; // 创建一个事件处理器 let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); // 注册鼠标左键点击事件，用于绘制点 handler.setInputAction(event => { // 获取鼠标点击的笛卡尔坐标(鼠标点击位置->笛卡尔坐标) var cartesian = this.getCatesian3FromPX(event.position); // 确保坐标有效 if (cartesian) { // 添加点实体 viewer.entities.add({ position: cartesian, point: { color: Cesium.Color.RED, pixelSize: 10 } }); // 获取地理坐标（经纬度） let cartographic = Cesium.Cartographic.fromCartesian(cartesian); let longitude = Cesium.Math.toDegrees(cartographic.longitude); let latitude = Cesium.Math.toDegrees(cartographic.latitude); let height=Cesium.Math.toDegrees(cartographic.height); // 将绘制的点添加到数组中 drawnPoints.push({ lng: longitude, lat: latitude,height:height }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 注册鼠标右键点击事件，用于结束绘制 handler.setInputAction(() => { // 销毁事件处理器 handler.destroy(); // 返回所有绘制的点 resolve(drawnPoints); }, Cesium.ScreenSpaceEventType.RIGHT_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 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 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 }; } }, getCatesian3FromPX方法说明：

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

transformWGS84ToCartesian方法说明：

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

transformCartesianToWGS84方法说明：

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

三、鼠标绘制线

在这里插入图片描述

（1）主要操作及思路：

使用左键点击事件来添加点，创建一个折线实体来表示用户点击确定的所有点之间的线段。同时每当用户移动鼠标时，显示从最后一个点击位置到当前鼠标位置的一个动态线段。

（2）代码： /** * 绘制折线 */ DrawPolyline() { return new Promise((resolve, reject) => { let viewer = this.viewer; let polylinePoints = []; // 临时折线实体 let polylineEntity = viewer.entities.add({ Id:"drawingPolyline", name:"画线", polyline: { //使用CallbackProperty允许我们在用户点击时动态更新线段的位置 positions: new Cesium.CallbackProperty(() => { return polylinePoints; }, false), width: 2, material: Cesium.Color.RED } }); // 临时动态线实体 let dynamicLineEntity = viewer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(() => { if (lastPoint && currentMousePoint) { return [lastPoint, currentMousePoint]; } else { return []; } }, false), width: 2, material: Cesium.Color.RED.withAlpha(0.5) // 使用半透明红色，与主线区分 } }); let lastPoint = null; let currentMousePoint = null; // 创建事件处理器 let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); // 注册鼠标左键点击事件，用于添加点和显示点 handler.setInputAction(event => { let cartesian = this.getCatesian3FromPX(event.position); if (cartesian) { polylinePoints.push(cartesian); lastPoint = cartesian; viewer.entities.add({ position: cartesian, point: { color: Cesium.Color.BLUE, pixelSize: 10 } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 鼠标移动事件，更新当前鼠标位置并重绘临时线 handler.setInputAction(event => { currentMousePoint = this.getCatesian3FromPX(event.endPosition); }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 注册鼠标左键双击点击事件，用于结束绘制 handler.setInputAction(() => { handler.destroy(); viewer.entities.remove(dynamicLineEntity); // 移除临时线 resolve(polylinePoints); }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); }); }, 四、鼠标绘制圆

在这里插入图片描述

（1）主要操作及思路：

用户首先通过单击选择圆的中心，然后通过移动鼠标选择半径。当用户双击时，绘制将完成。

（2）代码： /** * 绘制圆形 */ DrawCircle() { return new Promise((resolve, reject) => { let viewer = this.viewer; let centerPoint = null; let centerPointEntity = null; // 用于存储中点实体的引用 let radius = 10; viewer.scene.globe.depthTestAgainstTerrain = false; let drawingCircle = viewer.entities.add({ id: "drawingCircle", name: "画圆", ellipse: { semiMinorAxis: new Cesium.CallbackProperty(() => { return radius; }, false), semiMajorAxis: new Cesium.CallbackProperty(() => { return radius; }, false), material: Cesium.Color.BLUE.withAlpha(0.2), outline: true, outlineColor: Cesium.Color.RED, outlineWidth:2, fill: true, //为true时只显示轮廓线 } }); let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(event => { var cartesian = this.getCatesian3FromPX(event.position); if (cartesian && centerPoint === null) { centerPoint = cartesian; drawingCircle.position = centerPoint; // 添加中点实体并保存其引用 centerPointEntity = viewer.entities.add({ position: cartesian, point: { color: Cesium.Color.RED, pixelSize: 10 } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(event => { if (centerPoint) { let cartesian = this.getCatesian3FromPX(event.endPosition); if (cartesian) { let distance = Cesium.Cartesian3.distance(centerPoint, cartesian); radius = distance; } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); handler.setInputAction(() => { if (centerPoint !== null && radius > 0) { handler.destroy(); // 关闭鼠标事件监听，结束绘制 let circleCenter = Cesium.Cartographic.fromCartesian(centerPoint); let lng = Cesium.Math.toDegrees(circleCenter.longitude); let lat = Cesium.Math.toDegrees(circleCenter.latitude); resolve({ center: { lng: lng, lat: lat }, radius: radius }); } }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); }); }, 五、鼠标绘制矩形

在这里插入图片描述

（1）主要操作及思路：

首次单击选择左上角，移动鼠标调整矩形的大小，然后双击来结束绘制并保存矩形的点。通过捕获用户在地图上的鼠标操作来确定矩形的两个对角点，然后使用这两个点来定义矩形。

（2）代码： /** * 绘制矩形 */ DrawRectangle() { var allPoints = []; // 设置返回值 return new Promise((resolve, reject) => { let viewer = this.viewer; let topLeftPoint = null; let bottomRightPoint = null; let drawingRectangle = viewer.entities.add({ id: "drawingRectangle", name: "画矩形", rectangle: { coordinates: new Cesium.CallbackProperty(() => { if (topLeftPoint === null || bottomRightPoint === null) { return; } let west = topLeftPoint.longitude; let north = topLeftPoint.latitude; let east = bottomRightPoint.longitude; let south = bottomRightPoint.latitude; return new Cesium.Rectangle(west, south, east, north); }, false), material: Cesium.Color.BLUE.withAlpha(0.2), closeTop: true, closeBottom: false } }); let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(event => { var cartesian = this.getCatesian3FromPX(event.position); if (cartesian) { if (topLeftPoint === null) { topLeftPoint = Cesium.Cartographic.fromCartesian(cartesian); } viewer.entities.add({ position: cartesian, point: { color: Cesium.Color.RED, pixelSize: 10 } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(event => { if (topLeftPoint) { bottomRightPoint = Cesium.Cartographic.fromCartesian(this.getCatesian3FromPX(event.endPosition)); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); handler.setInputAction(() => { if (topLeftPoint !== null && bottomRightPoint !== null) { handler.destroy(); // 关闭鼠标事件监听，结束绘制 let west = Cesium.Math.toDegrees(topLeftPoint.longitude); let north = Cesium.Math.toDegrees(topLeftPoint.latitude); let east = Cesium.Math.toDegrees(bottomRightPoint.longitude); let south = Cesium.Math.toDegrees(bottomRightPoint.latitude); allPoints.push({ lng: west, lat: north }); allPoints.push({ lng: east, lat: north }); allPoints.push({ lng: east, lat: south }); allPoints.push({ lng: west, lat: south }); allPoints.push(allPoints[0]); // 闭合 resolve(allPoints); } }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); }); }, 六、鼠标绘制多边形

贴地：在这里插入图片描述不贴地：

（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); }) }, 调用方法： let option = { ground: true //true:不贴地/false:贴地 }; DrawPolygon(option).then(allPoints => { // 在这里，allPoints是结束绘制后的点坐标数组 var resultPoints=allPoints }) （3）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返回，供其他部分的代码使用。（比如进行填挖方的计算，将上面的点数组传到地形填挖方计算的方法，用来生成三角网）在这里插入图片描述文章来源：https://www.uudwc.com/A/noYey/

（4）拖拽点进行形状修改

绘制完成：在这里插入图片描述拖拽点：思路：在完成绘制后（即在双击事件结束后），初始化一个新的鼠标事件处理器专门用于拖拽操作。在新的事件处理器中，设置监听左键按下、左键抬起和鼠标移动的事件，用于实现拖拽交互。为了在拖动点时停止地图的默认移动事件，需要在开始拖动事件时暂时禁用默认的摄像机控制，并在拖动结束后再次启用它。（保证点数组长度不变，修改拖拽点的位置）代码：文章来源地址https://www.uudwc.com/A/noYey/

原文地址:https://blog.csdn.net/qq_40020291/article/details/132299040

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请联系站长进行投诉反馈，一经查实，立即删除！

UU电玩城

【本文地址】

公司简介

联系我们