前言
cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。
不少订阅者向我反馈之前的那篇(https://xiaozhuanlan.com/topic/8210364597 ) 量算工具的cesiumAPI版本太低,不能适用新版本。所以,推出新版本的量算工具效果,对应版本是cesium1.63.1API的。
内容概览
1.cesium1.63.1API版本贴地量算工具效果
2.源代码demo下载
效果图如下:
实现思路:测距以及测面都是利用到cesium鼠标操作监听事件:鼠标左键Cesium.ScreenSpaceEventType.LEFT_CLICK、鼠标移动Cesium.ScreenSpaceEventType.MOUSE_MOVE、鼠标右键Cesium.ScreenSpaceEventType.RIGHT_CLICK。鼠标左键事件,获取点击地图的每个坐标点;鼠标移动事件,动态扑捉鼠标移动状态,下一个坐标点位置;鼠标右键意味着地图量算结束状态。另外,量算面积的计算,结合turf.js来计算。
- 距离量算的监听事件函数,里面涉及到细节函数,自行看对应的源码demo:
this.handler.setInputAction(function (evt) { //单机开始绘制 var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]); if (!cartesian) return; if (that.positions.length == 0) { var label = that.createLabel(cartesian, "起点"); that.labels.push(label); that.floatLable = that.createLabel(cartesian, ""); that.floatLable.show = false; that.positions.push(cartesian); that.positions.push(cartesian.clone()); that.lastCartesian = cartesian; } else { that.floatLable.show = false; that.positions.push(cartesian); if (!that.lastCartesian) return; var distance = that.getLength(cartesian, that.lastCartesian); that.allDistance += distance; var text = that.formatLength(distance); var label = that.createLabel(cartesian, text); that.labels.push(label); } that.lastCartesian = cartesian; }, Cesium.ScreenSpaceEventType.LEFT_CLICK); this.handler.setInputAction(function (evt) { if (that.positions.length < 1) return; that.floatLable.show = true; var cartesian = that.getCatesian3FromPX(evt.endPosition, that.viewer, [that.polyline, that.floatLable]); if (!cartesian) return; if (that.positions.length == 2) { if (!Cesium.defined(that.polyline)) { that.polyline = that.createLine(); } } if (that.polyline) { that.positions.pop(); that.positions.push(cartesian); if (!that.lastCartesian) return; var distance = that.getLength(cartesian, that.lastCartesian); that.floatLable.show = true; that.floatLable.label.text = that.formatLength(distance); that.floatLable.position.setValue(cartesian); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); this.handler.setInputAction(function (evt) { if (!that.polyline) return; that.floatLable.show = false; that.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); that.viewer.trackedEntity = undefined; var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]); var distanceLast = that.getLength(cartesian, that.lastCartesian); that.allDistance += distanceLast; var allDistance = that.formatLength(that.allDistance); var label = that.createLabel(cartesian, ""); if (!cartesian) return; that.labels.push(label); that.labels[that.labels.length - 1].label.text = "总长:" + allDistance; if (that.handler) { that.handler.destroy(); that.handler = null; } if (that.tsLabel) { that.viewer.entities.remove(that.tsLabel); } if (that.ts_handler) { that.ts_handler.destroy(); that.ts_handler = null; } }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
- 面积量算的监听事件函数,里面涉及到细节函数,自行看对应的源码demo:
更多详情见下面链接文章:
文章提供源码,对本专栏感兴趣的话,可以关注一波
原文地址:https://www.cnblogs.com/giserhome/p/12184740.html
时间: 2024-10-23 16:41:50