cesium 测距 测面积 测高
2024-06-21 03:31:58
/*** 测量线段*/function MeasureTools(viewer) {var entityCollection = [];var handler=new Cesium.ScreenSpaceEventHandler(viewer.canvas);this.getCollection = function () {return entityCollection;};/*** 清除*/this.destroy = function () {for (var i = 0; i < entityCollection.length; i++) {viewer.entities.remove(entityCollection[i]);}entityCollection = [];};/*** 测距*/this.measurePolyLine = function () {var positions = [];var labelEntity = null; // 标签实体// 注册鼠标左击事件handler.setInputAction(function (clickEvent) {var cartesian = viewer.scene.pickPosition(clickEvent.position); // 坐标// 存储第一个点if (positions.length == 0) {positions.push(cartesian.clone());addPoint(cartesian);// 注册鼠标移动事件handler.setInputAction(function (moveEvent) {var movePosition = viewer.scene.pickPosition(moveEvent.endPosition); // 鼠标移动的点if (positions.length == 2) {positions.pop();positions.push(movePosition);// 绘制labelif (labelEntity) {viewer.entities.remove(labelEntity);entityCollection.splice(entityCollection.indexOf(labelEntity), 1);}// 计算中点var centerPoint = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());// 计算距离var lengthText = "距离：" + getLengthText(positions[0], positions[1]);console.log(lengthText)labelEntity = addLabel(centerPoint, lengthText);entityCollection.push(labelEntity);} else {positions.push(movePosition);// 绘制线addLine(positions);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);} else {// 存储第二个点positions.pop();positions.push(cartesian);addPoint(cartesian);handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);};/*** 测面积*/this.measurePolygon = function () {var positions = [];var clickStatus = false;var labelEntity = null;handler.setInputAction(function (clickEvent) {clickStatus = true;// var cartesian = viewer.scene.pickPosition(clickEvent.position);var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(clickEvent.position), viewer.scene);console.log(cartesian);if (positions.length == 0) {positions.push(cartesian.clone()); //鼠标左击 添加第1个点addPoint(cartesian);handler.setInputAction(function (moveEvent) {// var movePosition = viewer.scene.pickPosition(moveEvent.endPosition);var movePosition = viewer.scene.globe.pick(viewer.camera.getPickRay(moveEvent.endPosition), viewer.scene);console.log(movePosition);if (positions.length == 1) {positions.push(movePosition);addLine(positions);} else {if (clickStatus) {positions.push(movePosition);} else {positions.pop();positions.push(movePosition);}}if (positions.length >= 3) {// 绘制labelif (labelEntity) {viewer.entities.remove(labelEntity);entityCollection.splice(entityCollection.indexOf(labelEntity), 1);}var text = "面积：" + getArea(positions);var centerPoint = getCenterOfGravityPoint(positions);labelEntity = addLabel(centerPoint, text);entityCollection.push(labelEntity);}clickStatus = false;}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);} else if (positions.length == 2) {positions.pop();positions.push(cartesian.clone()); // 鼠标左击 添加第2个点addPoint(cartesian);addPolyGon(positions);// 右击结束handler.setInputAction(function (clickEvent) {// var clickPosition = viewer.scene.pickPosition(clickEvent.position);var clickPosition = viewer.scene.globe.pick(viewer.camera.getPickRay(clickEvent.position), viewer.scene);console.log(clickPosition);positions.pop();positions.push(clickPosition);positions.push(positions[0]); // 闭合addPoint(clickPosition);handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);} else if (positions.length >= 3) {positions.pop();positions.push(cartesian.clone()); // 鼠标左击 添加第3个点addPoint(cartesian);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);};/*** 测高*/this.measureHeight = function () {var positions = [];var labelEntity_1 = null; // 标签实体var labelEntity_2 = null; // 标签实体var labelEntity_3 = null; // 标签实体// 注册鼠标左击事件handler.setInputAction(function (clickEvent) {var cartesian = viewer.scene.pickPosition(clickEvent.position); // 坐标// 存储第一个点if (positions.length == 0) {positions.push(cartesian.clone());addPoint(cartesian);// 注册鼠标移动事件handler.setInputAction(function (moveEvent) {var movePosition = viewer.scene.pickPosition(moveEvent.endPosition); // 鼠标移动的点if (positions.length >= 2) {positions.pop();positions.pop();positions.pop();var cartographic = Cesium.Cartographic.fromCartesian(movePosition);var height = Cesium.Cartographic.fromCartesian(positions[0]).height;var verticalPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), height);positions.push(verticalPoint);positions.push(movePosition);positions.push(positions[0]);// 绘制labelif (labelEntity_2) {// viewer.entities.remove(labelEntity_1);// entityCollection.splice(entityCollection.indexOf(labelEntity_1), 1);viewer.entities.remove(labelEntity_2);entityCollection.splice(entityCollection.indexOf(labelEntity_2), 1);// viewer.entities.remove(labelEntity_3);// entityCollection.splice(entityCollection.indexOf(labelEntity_3), 1);}// // 计算中点// var centerPoint_1 = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());// // 计算距离// var lengthText_1 = "水平距离：" + getLengthText(positions[0], positions[1]);// labelEntity_1 = addLabel(centerPoint_1, lengthText_1);// entityCollection.push(labelEntity_1);// 计算中点var centerPoint_2 = Cesium.Cartesian3.midpoint(positions[1], positions[2], new Cesium.Cartesian3());// 计算距离var lengthText_2 = "垂直距离：" + getLengthText(positions[1], positions[2]);labelEntity_2 = addLabel(centerPoint_2, lengthText_2);entityCollection.push(labelEntity_2);// // 计算中点// var centerPoint_3 = Cesium.Cartesian3.midpoint(positions[2], positions[3], new Cesium.Cartesian3());// // 计算距离// var lengthText_3 = "直线距离：" + getLengthText(positions[2], positions[3]);// labelEntity_3 = addLabel(centerPoint_3, lengthText_3);// entityCollection.push(labelEntity_3);} else {var verticalPoint = new Cesium.Cartesian3(movePosition.x, movePosition.y, positions[0].z);positions.push(verticalPoint);positions.push(movePosition);positions.push(positions[0]);// 绘制线addLine(positions);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);} else {// 存储第二个点positions.pop();positions.pop();positions.pop();var cartographic = Cesium.Cartographic.fromCartesian(cartesian);var height = Cesium.Cartographic.fromCartesian(positions[0]).height;var verticalPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), height);positions.push(verticalPoint);positions.push(cartesian);positions.push(positions[0]);addPoint(cartesian);handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);};/*** 添加点* @param position*/var addPoint = function (position) {entityCollection.push(viewer.entities.add(new Cesium.Entity({position: position,point: {color: Cesium.Color.GREEN,pixelSize: 10,scaleByDistance: new Cesium.NearFarScalar(500, 1.0, 2000, 0.0),translucencyByDistance: new Cesium.NearFarScalar(500, 1.0, 2000, 0.0)}})));};/*** 添加线* @param positions*/var addLine = function (positions) {var dynamicPositions = new Cesium.CallbackProperty(function () {return positions;}, false);entityCollection.push(viewer.entities.add(new Cesium.Entity({polyline: {positions: dynamicPositions,width: 4,clampToGround:true,material: Cesium.Color.RED}})));};/*** 添加面* @param positions*/var addPolyGon = function (positions) {var dynamicPositions = new Cesium.CallbackProperty(function () {return new Cesium.PolygonHierarchy(positions);}, false);entityCollection.push(viewer.entities.add(new Cesium.Entity({polygon: {hierarchy: dynamicPositions,material: Cesium.Color.RED.withAlpha(0.6),classificationType: Cesium.ClassificationType.BOTH // 贴地表和贴模型,如果设置了，这不能使用挤出高度}})));};/*** 添加标签* @param position* @param text*/var addLabel = function (centerPoint, text) {return viewer.entities.add(new Cesium.Entity({position: centerPoint,label: {text: text,font: '12pt sans-serif',style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL FILL_AND_OUTLINE OUTLINEfillColor: Cesium.Color.YELLOW,showBackground: true,//指定标签后面背景的可见性backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色backgroundPadding: new Cesium.Cartesian2(6, 6),//指定以像素为单位的水平和垂直背景填充paddingpixelOffset: new Cesium.Cartesian2(0, -25)}}));};/*** 计算两点距离* @param firstPoint* @param secondPoint*/var getLengthText = function (firstPoint, secondPoint) {// 计算距离var length = Cesium.Cartesian3.distance(firstPoint, secondPoint);if (length > 1000) {length = (length / 1000).toFixed(2) + " 公里";} else {length = length.toFixed(2) + " 米";}return length;};//计算多边形面积var getArea = function (points) {var radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)var degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度/*角度*/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) {from = Cesium.Cartographic.fromCartesian(from);to = Cesium.Cartographic.fromCartesian(to);var lat1 = from.latitude;var lon1 = from.longitude;var lat2 = to.latitude;var lon2 = to.longitude;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 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;//console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));//返回两点之间的距离s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));return s;}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(points[j], points[0]);var dis_temp2 = distance(points[k], points[0]);res += dis_temp1 * dis_temp2 * Math.sin(totalAngle) / 2;// console.log(res);}if (res < 1000000) {res = Math.abs(res).toFixed(4) + " 平方米";} else {res = Math.abs((res / 1000000.0).toFixed(4)) + " 平方公里";}return res;};/*** 计算多边形的中心（简单的处理）* @param mPoints* @returns {*[]}*/var getCenterOfGravityPoint = function (mPoints) {var centerPoint = mPoints[0];for (var i = 1; i < mPoints.length; i++) {centerPoint = Cesium.Cartesian3.midpoint(centerPoint, mPoints[i], new Cesium.Cartesian3());}return centerPoint;}}cesium 测距 测面积 测高相关推荐
- 【开源】电子围栏-测距离-测面积-拉框放大-实时路况-逆地理编码的实现
最近项目上涉及到地图,考虑到精度等问题,最终选择了51ditu.要实现电子围栏等等功能,经过几天努力,大致有了个雏形,由于是第一次接触HTML和JavaScript编程,三天下来脑袋大了不少,碰到了一 ...
- cesium 实现测距离测面积 （划线画面 跟随鼠标位置 ）
效果图 方法一:使用插件 cesium_measure.js 下载地址:https://github.com/zhangti0708/cesium-measure/blob/master/src/ce ...
- ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
- Angular+arcgisjs之平面地图测距、测面积、搜索
本文代码基于Angular8和arcgis js 4.16. 代码里会涉及到一个地图变量mapView,初始化如下: const map = new Map({basemap: 'osm', }); ...
- android 地图面积测量,Android开发自定义控件，实现Arcgis for Android测距、测面积功能...
采用Arcgis Runtime for Android 100.3.0开发. 控件的功能包括,测距.测面积.撤销.恢复.清除.完成六个功能. 测距:在地图上绘制线段进行长度测量 测面积:在地图上绘制 ...
- openlayers测距和测面积
初次使用openlayers地图进行开发各种地图功能,测距和测面积使用的是官方例子并进行了一些简单的修改,官方示例在测量一次之后不能停止,修改后,每点击测量,只会测量一次. 而且需要注意的是,官方例子 ...
- 用计算机测一测未来的身高,1分钟测一测你的孩子未来能长多高？
原标题:1分钟测一测你的孩子未来能长多高? 据说下面这个公式能测算出你的孩子成年后的身高,想知道你的孩子以后能长多高吗?快来用这个公式算一下吧! 文末有长高福利哦! 孩子身高预测公式 男孩高(cm)= ...
- SuperMap怎样实现测面积的代码（上课笔记）
标题SuperMap怎样实现测面积的代码(上课笔记) (作者:李寿宇,撰写时间:2019年1月16日) 1).地图发布以后,引入SuperMap iserver <SuperMap.Includ ...
- mc有什么红石机器人_我的世界：mc玩家与非mc玩家眼中的世界，测一测你mc中毒有多深...
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,不代表 ...
最新文章
- smartClient 2--可视化组件
- 苹果原壁纸高清_苹果壁纸 | 高清图片全面屏壁纸
- 1093 Count PAT‘s (25 分)【难度: 一般 / 知识点: 前缀和 组合数】
- 数据结构之头结点链表的三种插入方式（头插法，尾插法，在pos处插入）
- Win11设置人离开后电脑自动锁屏教程
- 关于ETF的套利机制
- 要装系统就装WINDOWSXPSP3VL正式版操作系统
- Android设备实现语音视频通话
- 机房教学管理系统/机房管理系统
- Android 逆向笔记 —— 说说 Dalvik 及其指令集
- h510主板怎么样 h510配什么cpu
- caffe 报错 Aborted(core dumped
- windows7下替换记事本
- java keyevent 组合键_JAVA中KeyEvent类键盘各键的代码
- 学习总结-《父与子的编程之旅》chapter 11
- HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
- 关于STM32驱动LCD显示屏，程序下载后白屏、乱码需要上电复位才能恢复正常问题的解决办法
- 爬取新浪微博（搜索含关键词微博及其评论）
- JavaScript高级（面向对象）
- 3.7V锂电池充满电时是多少伏？