realistic-scene-display/public/pluginFiles/plugins/measureDistance.js

var measureDistance = {
    modValue: {
        handler: null,
        tempPoints: [],
        viewer: null,
        tempEntities: {},
        distanceIndex: 0,
        distance: null,
        clampToGround: false,
        tips: $('<div class="measureDistance_tips map3D">左键添加点，右键结束</div>')
    },
    init: function (options) {
        if (options.action == 'add') {
            this.modValue.viewer = options.viewer;
            this.modValue.clampToGround = options.clampToGround;
            this.addMeasureDistance();
            this.modValue.tips.appendTo(this.modValue.viewer._container);
        } else if (options.action == 'remove') {
            this.removeMeasureDistance();
        }
    },
    addMeasureDistance: function () {
        var _this = this;
        if (!this.modValue.handler) {
            this.modValue.distanceIndex++;
            this.modValue.distance = null;
            this.modValue.tempEntities[this.modValue.distanceIndex] = [];
            this.modValue.handler = new SkyScenery.ScreenSpaceEventHandler(this.modValue.viewer.scene.canvas);
            this.modValue.handler.setInputAction(function (event) {
                var wp = event.endPosition;
                if (!SkyScenery.defined(wp)) {
                    return;
                }
                var ray = _this.modValue.viewer.camera.getPickRay(wp);
                if (!SkyScenery.defined(ray)) {
                    return;
                }
                var cartesian = _this.modValue.viewer.scene.globe.pick(ray, _this.modValue.viewer.scene);
                if (!SkyScenery.defined(cartesian)) {
                    return;
                }
                $('#' + _this.modValue.viewer._container.id + ' .measureDistance_tips').css({
                    "left": wp.x + 20,
                    'top': wp.y + 10
                })
            }, SkyScenery.ScreenSpaceEventType.MOUSE_MOVE);
            this.modValue.handler.setInputAction(function (click) {
                var latlng = _this.screenToLatLng(click.position.x, click.position.y)
                if (latlng) {
                    _this.modValue.tempPoints.push({
                        lon: latlng.lng,
                        lat: latlng.lat,
                        h: latlng.alt,
                    });
                    var tempLength = _this.modValue.tempPoints.length;
                    _this.drawPoint(_this.modValue.tempPoints[_this.modValue.tempPoints.length - 1]);
                    if (tempLength > 1) {
                        _this.drawLine(_this.modValue.tempPoints[_this.modValue.tempPoints.length - 2], _this.modValue.tempPoints[_this.modValue.tempPoints.length - 1], true);
                    }
                }
            }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
            this.modValue.handler.setInputAction(function (click) {
                _this.removeMeasureDistance('', true);
            }, SkyScenery.ScreenSpaceEventType.RIGHT_CLICK);
        }
    },
    removeMeasureDistance: function (msg, callback) {
        if (!this.modValue.viewer) {
            return;
        }
        $('#' + this.modValue.viewer._container.id + ' .measureDistance_tips').remove();
        if (this.modValue.handler) {
            this.modValue.tempPoints = [];
            this.modValue.handler.destroy();
            this.modValue.handler = null;
        }
        if (callback) {
            this.init('', {
                action: 'add',
                viewer: this.modValue.viewer
            })
        }
    },
    drawLine: function (point1, point2, showDistance) {
        var entity =
            this.modValue.viewer.entities.add({
                polyline: {
                    clampToGround: true,
                    positions: [
                        SkyScenery.Cartesian3.fromDegrees(point1.lon, point1.lat, point1.h),
                        SkyScenery.Cartesian3.fromDegrees(point2.lon, point2.lat, point2.h)
                    ],
                    width: 10.0,
                    material: new SkyScenery.PolylineGlowMaterialProperty({
                        color: SkyScenery.Color.CHARTREUSE.withAlpha(.5)
                    }),
                }
            });
        this.modValue.tempEntities[this.modValue.distanceIndex].push(entity);
        if (showDistance) {
            var curdistance = this.getFlatternDistance(point1.lat, point1.lon, point2.lat, point2.lon);
            if (this.modValue.distance) {
                this.modValue.distance = this.modValue.distance + curdistance
            } else {
                this.modValue.distance = curdistance;
            }
            if (this.modValue.distance <= 1000) {
                var showDistance = this.modValue.distance.toFixed(1) + 'm';
            } else {
                var showDistance = (this.modValue.distance / 1000).toFixed(3) + 'km';
            }
            entity =
                this.modValue.viewer.entities.add({
                    position: SkyScenery.Cartesian3.fromDegrees(point2.lon, point2.lat),
                    label: {
                        text: showDistance,
                        heightReference: 2,
                        font: '22px Helvetica',
                        fillColor: SkyScenery.Color.WHITE,
                        pixelOffset: new SkyScenery.Cartesian2(0, -22),
                        verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
                    }
                });
            this.modValue.tempEntities[this.modValue.distanceIndex].push(entity);
        }
    },
    drawPoint: function (point) {
        var entity =
            this.modValue.viewer.entities.add({
                position: SkyScenery.Cartesian3.fromDegrees(point.lon, point.lat),
                point: {
                    pixelSize: 10,
                    heightReference: 2,
                    color: SkyScenery.Color.RED,
                }
            });
        this.modValue.tempEntities[this.modValue.distanceIndex].push(entity);
    },
    getFlatternDistance: function (lat1, lng1, lat2, lng2) {
        var EARTH_RADIUS = 6378137.0; //单位M
        var PI = Math.PI;

        function getRad(d) {
            return d * PI / 180.0;
        }
        var f = getRad((lat1 + lat2) / 2);
        var g = getRad((lat1 - lat2) / 2);
        var l = getRad((lng1 - lng2) / 2);

        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);

        var s, c, w, r, d, h1, h2;
        var a = EARTH_RADIUS;
        var fl = 1 / 298.257;

        sg = sg * sg;
        sl = sl * sl;
        sf = sf * sf;

        s = sg * (1 - sl) + (1 - sf) * sl;
        c = (1 - sg) * (1 - sl) + sf * sl;

        w = Math.atan(Math.sqrt(s / c));
        r = Math.sqrt(s * c) / w;
        d = 2 * w * a;
        h1 = (3 * r - 1) / 2 / c;
        h2 = (3 * r + 1) / 2 / s;

        return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    },
    screenToLatLng: function (x, y) {
        var pick1 = new SkyScenery.Cartesian2(x, y);
        var cartesian = this.modValue.viewer.scene.globe.pick(this.modValue.viewer.camera.getPickRay(pick1), this.modValue.viewer.scene);

        if (cartesian) {
            var cartographic = this.modValue.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
            var lat = SkyScenery.Math.toDegrees(cartographic.latitude);
            var lng = SkyScenery.Math.toDegrees(cartographic.longitude);
            var alt = cartographic.height;
            var position = {
                lat: lat,
                lng: lng,
                alt: alt
            }
        } else {
            var position = false
        }
        return position;
    },
    clear: function (msg, options) {
        var _this = this
        $.each(this.modValue.tempEntities, function (i, t) {
            for (var j = 0; j < t.length; j++) {
                _this.modValue.viewer.entities.removeById(t[j]._id);
            }
        })
    }
}