GCSGUI/src/assets/js/RouteManageViewer.js

import {DataSource} from "cesium";
import * as Cesium from 'cesium'


export default class RouteManageViewer {
    constructor(viewer, isClose, height) {
        this.viewer = viewer
        this.scene = viewer.scene
        this.routeParams = {
            isClose: isClose,
            height: height,
        }
        this.positions = []
        this.temPositions = []      // 鼠标移动时产生的临时点
        this.vertexEntities = []    // 节点元素
        this.lineEntity = undefined // 折线元素
        this.lineEntitys = []       // 折线元素数组，每完成一次航线绘制，将折线元素加入此数组
    }

    // -------------------------------------------//
    //开始绘制
    start() {
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
        this.viewer.scene.globe.depthTestAgainstTerrain = true

        //设置鼠标样式
        this.viewer._element.style.cursor = 'crosshair';
        this.viewer.enableCursorStyle = true;
        this.temPositions = [];
        this.positions = [];
        return new Promise((resolve,reject) => {
            //注册鼠标事件
            //单击鼠标左键画点点击事件
            this.handler.setInputAction(e => {
                let position = this.viewer.scene.pickPosition(e.position);
                if (!position) {
                    const ellipsoid = this.viewer.scene.globe.ellipsoid;
                    position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
                }
                //TODO: 海拔高度转Cartesain3 Z 值
                if (position){
                    this.positions.push(position);
                }
                if (this.positions.length === 1) {  //首次点击
                    this.createLineEntity();
                }
                this.createVertex();
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

            this.handler.setInputAction(e => {
                if (this.positions.length < 3) {
                    this.endDraw();
                    this.clearDisEntity()
                    reject("航线不得少于三个航点！")
                }
                else {
                    this.lineEntity.polyline = {
                        positions: this.routeParams.isClose? this.positions.concat(this.positions[0]) : this.positions,
                        width: 2,
                        material: Cesium.Color.YELLOW,
                        depthFailMaterial: Cesium.Color.YELLOW
                    }
                    this.endDraw();
                    resolve(this._Cartesian_degrees(this.positions))
                }
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

            this.handler.setInputAction(e => {
                let position = this.viewer.scene.pickPosition(e.endPosition);
                if (!position) {
                    position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
                }
                if (this.positions.length >= 1){
                    this.temPositions = this.positions.concat(position);
                }
                this.viewer.scene.requestRender()
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        })
    }

    //结束绘制
    endDraw() {
        this.unRegisterEvents();
        this.viewer._element.style.cursor = 'default';
        this.viewer.enableCursorStyle = true;
        this.lineEntitys.push(this.lineEntity)

    }

    //清空绘制
    clearDisEntity() {
        //清除折线
        this.lineEntitys.forEach(item => {
            this.viewer.entities.remove(item);
        });
        //清除节点
        this.vertexEntities.forEach(item => {
            this.viewer.entities.remove(item);
        });

        this.positions = []
        this.temPositions = []      // 鼠标移动时产生的临时点
        this.vertexEntities = []    // 节点元素
        this.lineEntity = undefined // 折线元素
        this.lineEntitys = []       // 折线元素数组，每完成一次航线绘制，将折线元素加入此数组
    }

    //创建线对象
    createLineEntity() {
        this.lineEntity = this.viewer.entities.add({
            polyline: {
                positions: new Cesium.CallbackProperty(e => {
                    return this.temPositions;
                }, false),
                width: 2,
                material: Cesium.Color.YELLOW,
                clampToGround: true,
                heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
            },
        })
        this.viewer.scene.requestRender()
    }
    //创建线节点
    createVertex() {
        let vertexEntity = new Cesium.Entity({
            id: "Route" + this.positions[this.positions.length - 1],
            position:  this.positions[this.positions.length - 1],
            point: {
                color: Cesium.Color.FUCHSIA,
                pixelSize: 8,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2,
                disableDepthTestDistance:99000000,
                heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
            },
        });
        this.vertexEntities.push(vertexEntity)
        this.viewer.entities.add(vertexEntity)
    }

    //解除鼠标事件（测距）
    unRegisterEvents() {
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }
    
    /**
     * 笛卡尔坐标数组转为经纬度坐标数组
     * @param cartesian3Arr 笛卡尔坐标数组
     * @returns {*[]} 经纬度坐标数组
     * @private
     */
    _Cartesian_degrees(cartesian3Arr){
        let coords = []
        cartesian3Arr.forEach((item) => {
            // 将 Cartesian3 转换为 Cartographic
            let cartographic = Cesium.Cartographic.fromCartesian(item, Cesium.Ellipsoid.WGS84);
            coords.push({
                lon: Cesium.Math.toDegrees(cartographic.longitude),
                lat: Cesium.Math.toDegrees(cartographic.latitude),
                alt: this.routeParams.height
            })
        })
        return coords
    }

}