cesium入门示例-测量工具

作为cesium入门示例级别的最后一篇，参考cesium-长度测量和面积测量实现测量工具封装，修改了其中的距离测量函数，计算贴地距离，并对事件内部处理做了调整。包括贴地距离测量、面积测量、结果清除。

实现思路（以距离测量为例）：

1、点击按钮开始测量，侦听鼠标LEFT_CLICK事件，记录坐标，绘制节点和折线；

2、侦听鼠标移动事件，鼠标点击后即复制一个浮动点，在MOUSE_MOVE事件中不断更新最后一个浮动点，动态更新折线绘制；

3、侦听鼠标右击事件，RIGHT_CLICK触发时销毁测量相关事件句柄（ScreenSpaceEventHandler），删除多余的浮动点；

4、折线的动态绘制通过CallbackProperty属性绑定positions属性实现。

封装代码如下：

 /*

  * params:

  *     viewer:required,三维视图

  *     target:required,测量工具放置的div的id

  * */

 var MeasureTool = (function() {

     function _(option) {

         this.viewer = option.viewer;

         this.dom = document.getElementById(option.target);

         this.options = option;

         var me = this;

         var btnDistance = document.createElement('button');

         btnDistance.innerHTML = '测量距离';

         btnDistance.onclick = function() {

             if(me.bMeasuring)

                 return;

             me.bMeasuring = true;

             me._measureLineSpace();

         };

         this.dom.appendChild(btnDistance);

         var btnArea = document.createElement('button');

         btnArea.innerHTML = '测量面积';

         btnArea.onclick = function() {

             if(me.bMeasuring)

                 return;

             me.bMeasuring = true;

             me._measureAreaSpace();

         };

         this.dom.appendChild(btnArea);

         var btnClear = document.createElement('button');

         btnClear.innerHTML = '清除结果';

         btnClear.onclick = function() {

             //删除事先记录的id

             for(var jj = 0; jj < me.measureIds.length; jj++) {

                 me.viewer.entities.removeById(me.measureIds[jj]);

             }

             me.measureIds.length = 0;

         };

         this.dom.appendChild(btnClear);

         this.bMeasuring = false;

         this.measureIds = [];

     }

     _.prototype._finishMeasure = function() {

         this.bMeasuring = false;

     }

     //内部测量距离函数

     _.prototype._measureLineSpace = function() {}

     //内部测量面积函数

     _.prototype._measureAreaSpace = function() {}

     return _;

 })();

调用方法：

 <div style="position:absolute;width: 350px;height: 30px; top: 25px; left: 10px;">

     <div id="measure"> </div>

 </div>

 //创建测量工具

 new MeasureTool({

     viewer: viewer,

     target: 'measure'

 })

计算贴地距离时，对折线按距离或按比例切分成小线段，通过SampleTerrain函数统一获取各点的高度，分段计算空间距离叠加即为贴地距离，因该过程稍费时异步计算后再显示计算结果，测量折线贴地距离的代码如下：

     //内部测量距离函数

     _.prototype._measureLineSpace = function() {

         var me = this;

         var viewer = this.viewer;

         // 取消双击事件-追踪该位置

         viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

         var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);

         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);

             cartesian = 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) {

                 //在三维场景中添加Label

                 floatingPoint = viewer.entities.add({

                     name: '空间距离',

                     position: labelPt,

                     point: {

                         pixelSize: 5,

                         color: Cesium.Color.RED,

                         outlineColor: Cesium.Color.WHITE,

                         outlineWidth: 2,

                     }

                 });

                 me.measureIds.push(floatingPoint.id);

             }

         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

         handler.setInputAction(function(movement) {

             handler.destroy(); //关闭事件句柄

             handler = undefined;

             positions.pop(); //最后一个点无效

             if(positions.length == 1)

                 viewer.entities.remove(floatingPoint);

             //记录测量工具状态

             me._finishMeasure();

         }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

         var PolyLinePrimitive = (function() {

             function _(positions) {

                 this.options = {

                     name: '直线',

                     polyline: {

                         show: true,

                         positions: [],

                         material: Cesium.Color.CHARTREUSE,

                         width: 5,

                         clampToGround: true

                     }

                 };

                 this.positions = positions;

                 this._init();

             }

             _.prototype._init = function() {

                 var _self = this;

                 var _update = function() {

                     return _self.positions;

                 };

                 //实时更新polyline.positions

                 this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);

                 var addedEntity = viewer.entities.add(this.options);

                 me.measureIds.push(addedEntity.id);

             };

             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);

                 //                console.log(cartoPt);

                 cartoPts.push(cartoPt);

             }

             cartoPts.push(point2cartographic);

             //返回两点之间的距离

             var promise = Cesium.sampleTerrain(viewer.terrainProvider, 8, cartoPts);

             Cesium.when(promise, function(updatedPositions) {

                 // positions height have been updated.

                 // updatedPositions is just a reference to positions.

                 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;

                 }

                 //在三维场景中添加Label

                 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: 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),

                     }

                 });

                 me.measureIds.push(floatingPoint.id);

             });

         }

     }

测量面积实现方式与折线类似，可参考cesium-长度测量和面积测量自行实现，无需计算贴地距离。细节处还可优化。

最后实现的效果如下：

巴特西

cesium入门示例-测量工具

最新文章

热门文章