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; 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,
                         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-长度测量和面积测量自行实现，无需计算贴地距离。细节处还可优化。

 最后实现的效果如下：