Cesium基础功能——底图选择和绘制/测量功能

绘制的线或面被模型遮挡显示虚线，优化展示效果。
综合考虑鼠标交互绘制过程中拾取位置的情形，优化场景支持。

demo地址：ty-map-3dhttp://123.56.67.147:3316/

import DomUtil from "../commonUtil/DomUtil";
import CesiumMeasureUtil from "../commonUtil/CesiumMeasureUtil";
import NoDepthTestPolylineCollection from '../effect/NoDepthTestPolylineCollection'
/**
 * 测量/绘制基类
 * @constructor 
 * 
 * @param {Object} viewer 三维球对象
 * @param {Object} options 参数
 * @param {Object} [options.justDraw=false] 仅仅绘制模式，默认false
 * @param {Object} [options.showToolTip=true] 是否显示tooltip，默认ture
 * @param {Object} [options.pointColor=Cesium.Color.YELLOW] 点的颜色，默认黄色
 * @param {Object} [options.pointSize=8.0] 点的大小，默认8.0;
 * @param {Object} [options.pointShow=true] 默认显示;
 * @param {Object} [options.tempPoint_size=8.0] 浮动点的大小，默认8.0;
 * @param {Object} [options.tempPoint_color=Cesium.Color.YELLOW] 点的大小，默认黄色
 * @param {Object} [options.tempPoint_show=true] 默认显示;
 * @param {Object} [options.lineColor=Cesium.Color.CHARTREUSE] 线颜色
 * @param {Object} [options.lineWidth=3.0] 线宽
 * @param {Object} [onCompleted] 绘制完成回调函数，参数返回坐标数组
 * 
 */
class DrawBase {
    constructor(viewer, options) {
        if (!viewer) {
            throw new Cesium.DeveloperError("viewer参数是必须的！");
        }
        this.pointColor = options.pointColor || new Cesium.Color(1.0, 0.0, 0.0, 0.8);
        this.pointSize = options.pointSize || 8.0;
        this.pointParas = {
            color: this.pointColor,
            size: this.pointSize,
            show: Cesium.defaultValue(options.pointShow, true)
        }
        this.tempPointParas = {
            size: options.tempPoint_size || 8.0,
            color: options.tempPoint_color || Cesium.Color.YELLOW,
            show: Cesium.defaultValue(options.tempPoint_show, true)
        }
        this.lineColor = options.lineColor || Cesium.Color.CHARTREUSE;
        this.lineWidth = options.lineWidth || 3;
        this.justDraw = options.justDraw || false;
        this.showToolTip = Cesium.defaultValue(options.showToolTip, true);//是否显示tooltip，默认ture      

        this.lastLeftClickPoint = undefined;//最后一个点击的点
        this.viewer = viewer;
        this.ismeare = options.ismeare || false;
        this.positions = [];
        this.cartesian = null;
        this.floatingPoint = null;
        this.mouseHandler = null;
        this.onCompleted = options.onCompleted;
        this._pointLabels = [];
        this._totalLengthPointLabel = undefined;
        this._originCursor = undefined;
        this.polygonPoint = null;
        this.poly = null;
        this.showToolTip && this._addToolTip();
    }

    _addToolTip() {
        if (this.tooltip) {
            return;
        }
        if (this.showToolTip == false) {
            this._removeToolTips();
            return;
        }
        this.tooltip = DomUtil.create('div', 'ts-measure', viewer.container);
        this.tooltip.style.position = "absolute";
        this.tooltip.style.color = "#c3cbd3";
        this.tooltip.style.background = "#336666";

        this.tooltip.innerHTML = this.tooltip.innerHTML || "<div>左键单击选点，双击结束绘制，右键取消</div>";
        this.tooltip.style.display = "none";
        window._drawToolTips = window._drawToolTips || [];
        window._drawToolTips.push(this.tooltip);
    }

    _removeToolTips() {
        window._drawToolTips && window._drawToolTips.forEach(v => {
            DomUtil.remove(v);
        })
        this.tooltip = undefined;
        window._drawToolTips = [];
    }

    _notrackPos() {
        viewer.selectedEntity = undefined;
        viewer.trackedEntity = undefined;
    }

    _removeFloatPoint(positions) {
        let lastLeftClickPointIndex = positions.findIndex(v => v.equals(this.lastLeftClickPoint));
        lastLeftClickPointIndex > -1 && positions.splice(lastLeftClickPointIndex + 1, positions.length - lastLeftClickPointIndex - 1);
        return positions;
    }

    // 移除冗余重复坐标，假设重复元素都是相邻的。
    _removeSamePoint(positions = []) {
        if (positions.length < 2) {
            return;
        }
        for (let index = 0; index < positions.length - 1; index++) {
            const element = positions[index];
            const nextPos = positions[index + 1];
            if (typeof (element.equals) === 'function' && element.equals(nextPos)) {
                console.log('element', element);
                console.log('element', nextPos);
                positions.splice(index, 1);
                index--;
            }
        }
        return positions;
    }

    /** 
     * 开始绘制
     */
    startDraw() {

    }

    clearAll() {
        this.clear(CesiumMeasureUtil.drawEntityNames());
        this._pointLabels = [];
        this.end();
    }

    /** 
     * 清除绘制
     */
    clear(entityNames) {
        if (!entityNames) {
            return;
        }
        let removeLayerName = Object.values(entityNames);
        for (var i = 0; i < this.viewer.entities.values.length; i++) {
            var entity = this.viewer.entities.values[i];
            if (removeLayerName.indexOf(entity.name) > -1) {
                this.viewer.entities.removeById(entity.id);
                i--;
            }
        }
        this._removeToolTips();
    }

    /** 
     * 结束绘制
     */
    end() {
        this._removeToolTips();
        this.ismeare = false;
        this.positions = [];
        this.poly = null;
        this.cartesian = null;
        this.floatingPoint = null;
        if (this.tooltip) {
            this.tooltip.style.display = "none";
        }
        if (this.mouseHandler) {
            this.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            this.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            this.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            this.mouseHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            this.mouseHandler.destroy();
            this.mouseHandler = null;
        }
        if (this.floatingPoint) {
            this.viewer.entities.remove(this.floatingPoint);
        }
        this._totalLengthPointLabel = undefined;
        viewer.scene.canvas.style.cursor = "";
        this.viewer.selectedEntity = null;
        this.viewer.trackedEntity = null;
        if (typeof this._preUpdateListener === "function") {
            this._preUpdateListener();
            this._preUpdateListener = undefined;
        }
        if (this._tempPoint) {
            this._tempPoint.show = false;
            this._tempPoint.point.show = false;
        }
        this.polygonPoint = null;
    }

    initNoDepthTestPolyline() {
        if (!this._polylineCollection) {
            this._polyline = undefined;
            this._polylineCollection = new NoDepthTestPolylineCollection();
            viewer.scene.primitives.add(this._polylineCollection);
        }
    }

    clearNoDepthTestPolyline() {
        if (this._polylineCollection) {
            // this._polylineCollection.removeAll();
            this._polyline = undefined;
            viewer.scene.primitives.remove(this._polylineCollection);
            this._polylineCollection = this._polylineCollection && !this._polylineCollection.isDestroyed() && this._polylineCollection.destroy();
            this._polylineCollection = undefined;
        }
    }


    _addPolyLinePrimitives() {
        if (!this.polyLinePrimitives) {
            this.polyLinePrimitives = new Cesium.PrimitiveCollection();
            viewer.scene.primitives.add(this.polyLinePrimitives);
        }
    }

    _clearPolyLinePrimitives() {
        if (this.polyLinePrimitives) {
            // this.polyLinePrimitives.removeAll();
            viewer.scene.primitives.remove(this.polyLinePrimitives);
            this.polyLinePrimitives = this.polyLinePrimitives && !this.polyLinePrimitives.isDestroyed() && this.polyLinePrimitives.destroy();
            this.polyLinePrimitives = undefined;
        }

    }

    _getObjectsToExclude() {
        let objectsToExclude = [];
        this.polyLinePrimitives && objectsToExclude.push(this.polyLinePrimitives);
        this._polyline && objectsToExclude.push(this._polyline);
        this._polylineCollection && objectsToExclude.push(this._polylineCollection);
        return objectsToExclude;
    }
}

export default DrawBase;