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) {　　//分段采樣計算距離 119                 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-長度測量和面積測量自行實現，無需計算貼地距離。細節處還可優化。

 最后實現的效果如下：