Cesium measurement

1. Introduction

Draw a polyline, polygon, then calculate the distance and area, and then display the label

Double click to end drawing, right click to end drawing.

Second, the effect

 

 

 

 

 

Three, part of the code

/*
 * @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); 



    /** 
     * Right-click the event to cancel the drawing operation 
     */ 
    handler.setInputAction(function (movement) { 
        that.clear(); 
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK );