Cesium测量距离、测量面积工具

一、测量距离

/* eslint-disable */
import * as Cesium from 'cesium';//测量长度
export const measureLine = (viewer) => {//鼠标会偏差// var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);var positions = [];var poly = null;var distance = 0;var cartesian = null;var floatingPoint;var labelPt;handler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.endPosition); //Cartesian3_to_WGS84cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (!Cesium.defined(cartesian))//跳出地球时异常return;if (positions.length >= 2) {if (!Cesium.defined(poly)) {poly = new PolyLinePrimitive(positions);} else {positions.pop();positions.push(cartesian);}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.position);cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (!Cesium.defined(cartesian))//跳出地球时异常return;if (positions.length == 0) {positions.push(cartesian.clone());}positions.push(cartesian);//记录鼠标单击时的节点位置，异步计算贴地距离labelPt = positions[positions.length - 1];if (positions.length > 2) {getSpaceDistance(positions);} else if (positions.length == 2) {//在三维场景中添加LabelfloatingPoint = viewer.entities.add({name: '空间距离',position: labelPt,point: {pixelSize: 5,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,},});}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction(function () {handler.destroy(); //关闭事件句柄handler = undefined;positions.pop(); //最后一个点无效if (positions.length == 1) viewer.entities.remove(floatingPoint);}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);var PolyLinePrimitive = (function () {function _(positions) {this.options = {name: '直线',polyline: {show: true,positions: [],material: Cesium.Color.GREEN.withAlpha(0.8),width: 5,clampToGround: true,},};this.positions = positions;this._init();}_.prototype._init = function () {var _self = this;var _update = function () {return _self.positions;};//实时更新polyline.positionsthis.options.polyline.positions = new Cesium.CallbackProperty(_update, false);viewer.entities.add(this.options);};return _;})();//空间两点距离计算函数function getSpaceDistance(positions) {//只计算最后一截，与前面累加//因move和鼠标左击事件，最后两个点坐标重复var i = positions.length - 3;var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);getTerrainDistance(point1cartographic, point2cartographic);}function getTerrainDistance(point1cartographic, point2cartographic) {var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var s = geodesic.surfaceDistance;var cartoPts = [point1cartographic];for (var jj = 1000; jj < s; jj += 1000) {//分段采样计算距离var cartoPt = geodesic.interpolateUsingSurfaceDistance(jj);cartoPts.push(cartoPt);}cartoPts.push(point2cartographic);//返回两点之间的距离Cesium.sampleTerrain(viewer.terrainProvider, 8, cartoPts).then((updatedPositions) => {for (var jj = 0; jj < updatedPositions.length - 1; jj++) {var geoD = new Cesium.EllipsoidGeodesic();geoD.setEndPoints(updatedPositions[jj], updatedPositions[jj + 1]);var innerS = geoD.surfaceDistance;innerS = Math.sqrt(Math.pow(innerS, 2) + Math.pow(updatedPositions[jj + 1].height - updatedPositions[jj].height, 2),);distance += innerS;}//在三维场景中添加Labelvar lon1 = viewer.scene.globe.ellipsoid.cartesianToCartographic(labelPt).longitude;var lat1 = viewer.scene.globe.ellipsoid.cartesianToCartographic(labelPt).latitude;var lonLat = '(' + Cesium.Math.toDegrees(lon1).toFixed(2) + ',' + Cesium.Math.toDegrees(lat1).toFixed(2) + ')';var textDisance = distance.toFixed(2) + '米';if (distance > 10000) textDisance = (distance / 1000.0).toFixed(2) + '千米';floatingPoint = viewer.entities.add({name: '贴地距离',position: labelPt,point: {pixelSize: 5,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,},label: {text: lonLat + textDisance,font: '18px sans-serif',fillColor: Cesium.Color.GOLD,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(20, -20),},});});}
};

二、测量面积

import * as Cesium from 'cesium';//面积测量
export const measurePolygon = (viewer) => {// 鼠标事件 有偏差// var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);var positions = [];var tempPoints = [];var polygon = null;var cartesian = null;var floatingPoint; //浮动点handler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.endPosition);cartesian = viewer.scene.globe.pick(ray, viewer.scene);positions.pop(); //移除最后一个positions.push(cartesian);if (positions.length >= 2) {var dynamicPositions = new Cesium.CallbackProperty(function () {return new Cesium.PolygonHierarchy(positions);}, false);polygon = PolygonPrimitive(dynamicPositions);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.position);cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (positions.length == 0) {positions.push(cartesian.clone());}positions.push(cartesian);//在三维场景中添加点var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);var heightString = cartographic.height;var labelText = '(' + longitudeString.toFixed(2) + ',' + latitudeString.toFixed(2) + ')';tempPoints.push({ lon: longitudeString, lat: latitudeString, hei: heightString });floatingPoint = viewer.entities.add({name: '多边形面积',position: positions[positions.length - 1],point: {pixelSize: 5,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},label: {text: labelText,font: '18px sans-serif',fillColor: Cesium.Color.GOLD,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(20, -20),},});}, Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction(function () {handler.destroy();positions.pop();var textArea = getArea(tempPoints) + '平方公里';viewer.entities.add({name: '多边形面积',position: positions[positions.length - 1],label: {text: textArea,font: '18px sans-serif',fillColor: Cesium.Color.GOLD,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 12,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(20, -40),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},});}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);var radiansPerDegree = Math.PI / 180.0; //角度转化为弧度(rad)var degreesPerRadian = 180.0 / Math.PI; //弧度转化为角度//计算多边形面积function getArea(points) {var res = 0;//拆分三角曲面for (var i = 0; i < points.length - 2; i++) {var j = (i + 1) % points.length;var k = (i + 2) % points.length;var totalAngle = Angle(points[i], points[j], points[k]);var dis_temp1 = distance(positions[i], positions[j]);var dis_temp2 = distance(positions[j], positions[k]);res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));}return (res / 1000000.0).toFixed(4);}/*角度*/function Angle(p1, p2, p3) {var bearing21 = Bearing(p2, p1);var bearing23 = Bearing(p2, p3);var angle = bearing21 - bearing23;if (angle < 0) {angle += 360;}return angle;}/*方向*/function Bearing(from, to) {var lat1 = from.lat * radiansPerDegree;var lon1 = from.lon * radiansPerDegree;var lat2 = to.lat * radiansPerDegree;var lon2 = to.lon * radiansPerDegree;var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2),Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2),);if (angle < 0) {angle += Math.PI * 2.0;}angle = angle * degreesPerRadian; //角度return angle;}function PolygonPrimitive(positions) {polygon = viewer.entities.add({polygon: {hierarchy: positions,material: Cesium.Color.GREEN.withAlpha(0.02),},});}function distance(point1, point2) {var point1cartographic = Cesium.Cartographic.fromCartesian(point1);var point2cartographic = Cesium.Cartographic.fromCartesian(point2);/**根据经纬度计算出距离**/var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var s = geodesic.surfaceDistance;//返回两点之间的距离s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));return s;}
};

Cesium测量距离、测量面积工具相关推荐

【ArcGIS微课1000例】0017：ArcGIS测量距离和面积工具的巧妙使用
文章目录 1 交互式测量 2 测量要素 ArcGIS提供了快速测量距离和面积的工具,通过测量工具可对地图中的线和面进行测量. 工具条: 测量工具位于[工具]工具条上,如下图所示: 测量界面: 功能按钮 ...
CAD图在线Web测量工具代码实现(测量距离、面积、角度等)
CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能能Web在 ...
（转）Arcgis for Js之GeometryService实现测量距离和面积
http://blog.csdn.net/gisshixisheng/article/details/40540601 距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryServ ...
Openlayers测量距离与面积
测量功能距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离,面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小. 本博客参考:https://blog.csdn ...
Cadence Allegro 17.4学习记录开始19-PCB Editor 17.4软件测量距离和查询操作
目录 Cadence Allegro 17.4学习记录开始19-PCB Editor 17.4软件测量距离和查询操作一:测量距离测量距离双单位显示:mm和mil一起显示二:查询操作 Cadenc ...
cesium面积计算_GitHub - BulletYuan/bulletCesium: GIS可视化——基于Cesiumjs的一些工具类，测量距离、测量面积。持续更新......
bulletCesium created at 2018.8.13 基于Cesiumjs的一些工具类,持续更新. lastest - 2018.8.24 - bulletCesium-1.1.1 增加 ...
【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)
目录一.量距二.量面三.清除测量四.页面结构注意参考一.量距 // 距离测量measureLineSpace() {this.removeMeasure();let _this = th ...
地图测量面积工具app_全站仪的使用面积测量
测量与地图制作见习全站仪使用 11 / 20 #2020 # 全站仪是全站型电子速测仪的简称,是电子经纬仪.光学测距仪及微处理器相结合的光电仪器.其可直接测量距离.角度.坐标,根据三角函数原理,已 ...
ArcGis api配合vue开发入门系列（二）距离以及面积的测量
正文首先自定义个工具栏,包括测量距离与测量面积的工具以及地图漫游. 图标的话是用的iconfont.我是把这个工具单独写在一个组件里面,这个组件里面里面会用到一些操作地图的方法,我在map这个组件里 ...

Cesium测量距离、测量面积工具

一、测量距离

二、测量面积

Cesium测量距离、测量面积工具相关推荐

最新文章

热门文章