Cesium 距离测量和面积测量

一、简介

绘制polyline、polygon，然后计算距离和面积，然后显示标签

双击结束绘制，右键结束绘制。

二、效果

 

 

 

 

 

三、部分代码

/*
 * @Author: 苹果园dog
 * @Date: 2021-01-09 16:17:38
 * @LastEditTime: 2021-01-09 19:55:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \code\bayannaoer.web.vue\src\commonUtil\CesiumMeasure.js
 */
import cesiumMeasureUtil from '../utils/commonUtil/cesiumMeasureUtil';

/**
 * 绘制折线
 * @param {*} viewer
 * @param {*} options
 */

function DrawPolyLine(viewer, options) {
    this.viewer = viewer;
    this.ismeare = options.ismeare || false;
    this.positions = [];
    this.poly = null;
    this.tooltip = document.getElementById(options.toolTip || "toolTip");
    this.cartesian = null;
    this.floatingPoint = null;
    this.mouseHandler = null;
    this.onCompleted = options.onCompleted;
    this._pointLabels = [];
    this._totalLengthPointLabel = undefined;
}



/**
 * 清除绘制
 */
DrawPolyLine.prototype.clear = function () {
    let removeLayerName = ["drawpolyline", "drawpolylinepoint"];
    for (var i = 0; i < window.viewer.entities.values.length; i++) {
        var entity = window.viewer.entities.values[i];
        if (removeLayerName.indexOf(entity.name) > -1) {
            window.viewer.entities.removeById(entity.id);
            i--;
        }
    }

    this.positions = [];
    this.poly = null;
    this.cartesian = null;
    this.floatingPoint = null;
    if (this.tooltip) {
        this.tooltip.style.display = "none";
    }
    if (this.mouseHandler) {
        this.mouseHandler.destroy();
        this.mouseHandler = null;
    }
    if (this.floatingPoint) {
        this.viewer.entities.remove(this.floatingPoint);
    }
    this._pointLabels = [];
    this._totalLengthPointLabel = undefined;
};

/**
 * 开始绘制
 */
DrawPolyLine.prototype.startDraw = function () {
    this.clear();
    let tooltip = this.tooltip;
    this.ismeare = true;
    let ismeare = this.ismeare;
    let viewer = this.viewer;
    let cartesian = this.cartesian;
    let positions = this.positions;
    let floatingPoint = this.floatingPoint;
    this.mouseHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    let handler = this.mouseHandler;
    let poly = this.poly;
    let that = this;
    //鼠标移动事件
    handler.setInputAction(function (movement) {
        if (!ismeare) {
            return;
        }
        tooltip.style.display = "block";
        tooltip.style.left = movement.endPosition.x + 3 + "px";
        tooltip.style.top = movement.endPosition.y - 25 + "px";
        tooltip.innerHTML = "<p>单击开始，双击结束，右键取消</p>";
        let ray = viewer.camera.getPickRay(movement.endPosition);
        cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (positions.length >= 2) {
            if (!Cesium.defined(poly)) {
                poly = new PolyLinePrimitive(positions);
            } else {
                positions.pop();
                positions.push(cartesian);
            }
            that.showLengthLabel();
        }
        viewer.scene.postProcessStages.fxaa.enabled = false; //去锯齿
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    //鼠标左键单击事件
    handler.setInputAction(function (movement) {
        if (!ismeare) {
            return;
        }
        let ray = viewer.camera.getPickRay(movement.position);
        cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (!cartesian) {
            return;
        }
        if (ismeare) {
            tooltip.style.display = "none";
            if (!cartesian) {
                return;
            }
            if (positions.length == 0) {
                positions.push(cartesian.clone());
            }
            positions.push(cartesian);
            floatingPoint = viewer.entities.add({
                name: "drawpolylinepoint",
                position: positions[positions.length - 1],
                point: {
                    pixelSize: 4,
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 2,
                },
            });
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    /**
     * 双击事件
     */
    handler.setInputAction(function (movement) {
        if (!ismeare) {
            return;
        }
        that.ismeare = false;
        that.positions.pop();
        if (floatingPoint) {
            that.viewer.entities.remove(floatingPoint);
        }
        that.tooltip.style.display = "none";
        that.viewer.selectedEntity = null;
        that.viewer.trackedEntity = null;
        if (that.onCompleted) {
            that.onCompleted(that.positions);
        }
        if (that.mouseHandler) {
            that.mouseHandler.destroy();
            that.mouseHandler = null;
        }
    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);



    /**
     * 右键单击事件取消绘制操作
     */
    handler.setInputAction(function (movement) {
        that.clear();
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);