Cesium军事标绘编辑

效果图

关键代码

// 军事标绘编辑类  

import { point3dsToPoint2ds } from "../PlotUtils/utils3d"
import { cartesian3ToPoint3D } from "../../PlotBase/PlotBaseUtils"
import PlotTypes from "../PlotTypes"
import * as turf from "@turf/turf"
export default class MilitaryPlotEditor {
    constructor(viewer, militaryPlotLayer) {
        this.viewer = viewer;
        this.militaryPlotLayer = militaryPlotLayer; //只能从指定的图层中获取编辑对象 如果拾取的对象不在该图层 不进行编辑 这样不用处理绘制和编辑器的关系
        this.initEventHandler();
    }

    //鼠标事件
    initEventHandler() {
        this.eventHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    }

    //激活编辑
    activate() {
        this.deactivate();
        //鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
        this.initLeftClickEventHandler();
    }

    //禁用编辑
    deactivate() {
        this.eventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.clear();
    }

    //清空编辑节点
    clear() {
        this.clearEditVertex();
    }

    //左键点击事件
    initLeftClickEventHandler() {
        this.eventHandler.setInputAction(e => {
            let id = this.viewer.scene.pick(e.position);
            if (!id) {
                this.handleEditMilitaryPlot();
                return; // 没有拾取到对象 直接返回 不做任何操作
            }

            // 拾取到对象 判断拾取到的对象类型
            if (!id.id || id.id.plotType != "MilitaryPlot") {
                this.handleEditMilitaryPlot();
                return;
            }

            //重复点击同一个对象
            if (this.militaryPlot && this.militaryPlot.plotCode == id.id.plotCode) return;
            //拾取到新的GeoPlot对象
            this.handleEditMilitaryPlot(); //处理上一个编辑对象
            this.handlePickMilitaryPlot(id.id);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }

    //处理编辑对象
    handleEditMilitaryPlot() {
        this.clear();
        let militaryPlot = this.militaryPlot;
        this.militaryPlot = undefined;
        if (!this.isEdited) return; //没有任何编辑 直接返回
        console.log("对象被编辑过是否需要保存操作？？");

        //触发编辑事件 militaryPlot

        this.isEdited = false;
        this.isEditing = false;
    }

    //处理拾取到的对象
    handlePickMilitaryPlot(pickId) {
        this.militaryPlot = this.militaryPlotLayer.getByPlotCode(pickId.plotCode);
        if (!this.militaryPlot) return; //图层里面没有该对象 说明是在绘制的时候触发该事件
        this.isEditing = false;
        this.isEdited = false;
        this.militaryPlot.openEditMode(true);
        debugger
        this.editPositions = this.plotPointsToPositions();
        this.EditMoveCenterPositoin = this.getMilitaryPlotCenterPosition();

        this.clear();
        this.createEditVertex();
        this.registerEvents();
    }

    //注册事件监听
    registerEvents() {
        //鼠标左键按下事件 当有对象被选中时 如果拾取到编辑辅助要素 表示开始改变对象的位置
        this.initLeftDownEventHandler();
        //鼠标移动事件 鼠标移动 如果有编辑对象 表示改变编辑对象的位置
        this.initMouseMoveEventHandler();
        //鼠标左键抬起事件 当有编辑对象时  
        this.initLeftUpEventHandler();
    }

    //取消事件监听
    unRegisterEvents() {
        this.eventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
        this.eventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
        this.eventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        // this.eventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    }

    //场景鼠标左键按下事件
    initLeftDownEventHandler() {
        this.eventHandler.setInputAction((e) => {
            let id = this.viewer.scene.pick(e.position);
            if (!id) {
                return;
            }
            // 拾取到对象 判断拾取到的对象类型 
            if (!id.id || !id.id.type) return;
            //拾取到具有type 属性的entity对象  
            if (id.id.type == "MilitaryPlotEditVertex" || id.id.type == "MilitaryPlotEditMoveVertex") {
                this.isEditing = true;
                this.viewer.scene.screenSpaceCameraController.enableRotate = false; //禁用场景的旋转移动功能 保留缩放功能
                //改变鼠标状态
                this.viewer.enableCursorStyle = false;
                this.viewer._element.style.cursor = '';
                document.body.style.cursor = "move";
                this.editVertext = id.id;
                this.editVertext.show = false;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    }

    //场景鼠标左键抬起事件
    initLeftUpEventHandler() {
        this.eventHandler.setInputAction(((e) => {
            if (!this.isEditing) return;
            this.viewer.enableCursorStyle = true;
            document.body.style.cursor = "default";
            this.viewer.scene.screenSpaceCameraController.enableRotate = true;
            this.editVertext.show = true;
            this.isEditing = false;
        }), Cesium.ScreenSpaceEventType.LEFT_UP);
    }

    //场景鼠标移动事件
    initMouseMoveEventHandler() {
        this.eventHandler.setInputAction(((e) => {
            //先拾取位置 如果没有拾取到 直接返回  因为场景拾取位置有时会发生错误 拾取不到位置
            let pickPosition = this.viewer.scene.pickPosition(e.endPosition);
            if (!pickPosition) return;
            //判断是否有正在移动的对象  
            if (!this.isEditing) return;
            // this.militaryPlot.updatePosition(pickPosition); //更新位置  因为传递过来的是数组对象 直接更新 不用在调用更新方法
            // 判断是整体平移还是节点平移
            if (this.editVertext.type == "MilitaryPlotEditMoveVertex") {
                let startPosition = this.EditMoveCenterPositoin;
                if (!startPosition) return;
                this.moveEntityByOffset(startPosition, pickPosition);
            } else {
                this.editPositions[this.editVertext.vertexIndex] = pickPosition;
                this.militaryPlot.setPoints(point3dsToPoint2ds(this.editPositions));
            }
            this.isEdited = true;
            this.EditMoveCenterPositoin = this.getMilitaryPlotCenterPosition();
        }), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }

    //获取编辑对象的中心点
    getMilitaryPlotCenterPosition() {
        //如果是圆 或者点 返回第一个点作为移动点
        switch (this.militaryPlot.baseInfo.plotName) {
            case PlotTypes.CIRCLE:
            case PlotTypes.MARKER:
                return this.editPositions[0];
        }

        //构建turf.js  lineString
        let geo = turf.lineString(this.militaryPlot.getPoints());
        let bbox = turf.bbox(geo);
        let bboxPolygon = turf.bboxPolygon(bbox);
        let pointOnFeature = turf.center(bboxPolygon);
        let lonLat = pointOnFeature.geometry.coordinates;
        return Cesium.Cartesian3.fromDegrees(lonLat[0], lonLat[1], this.militaryPlot.getHeight());
    }

    //根据偏移量移动实体
    moveEntityByOffset(startPosition, endPosition) {
        let startPoint3d = cartesian3ToPoint3D(startPosition);
        let endPoint3d = cartesian3ToPoint3D(endPosition);
        let offsetX = endPoint3d.x - startPoint3d.x;
        let offsetY = endPoint3d.y - startPoint3d.y;

        //设置偏移量
        let element, point3d;
        for (let i = 0; i < this.editPositions.length; i++) {
            element = cartesian3ToPoint3D(this.editPositions[i]);
            element.x += offsetX;
            element.y += offsetY;
            this.editPositions[i] = Cesium.Cartesian3.fromDegrees(element.x, element.y, element.z)
        }
        this.militaryPlot.setPoints(point3dsToPoint2ds(this.editPositions));
    }

    plotPointsToPositions() {
        let points = this.militaryPlot.getPoints();
        let height = this.militaryPlot.getHeight();

        let degreesArrayHeights = [];
        for (let i = 0; i < points.length; i++) {
            const element = points[i];
            degreesArrayHeights.push(element[0]);
            degreesArrayHeights.push(element[1]);
            degreesArrayHeights.push(height);
        }

        return Cesium.Cartesian3.fromDegreesArrayHeights(degreesArrayHeights);
    }

    //创建编辑节点对象
    createEditVertex() {
        this.vertexEntities = [];
        let positions = this.plotPointsToPositions();

        //对圆进行特殊处理
        if (this.militaryPlot.baseInfo.plotName == PlotTypes.CIRCLE) {
            this.createCircleEditVertex();
            this.createEditMoveCenterEntity();
            return;
        }
        positions.forEach((p, index) => {
            const entity = this.viewer.entities.add({
                position: new Cesium.CallbackProperty(e => {
                    return this.editPositions[index];
                }, false),
                type: "MilitaryPlotEditVertex",
                vertexIndex: index, //节点索引 
                point: {
                    color: Cesium.Color.DARKBLUE.withAlpha(0.4),
                    pixelSize: 10,
                    outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
                    outlineWidth: 3,
                    disableDepthTestDistance: 2000,
                },
            })
            this.vertexEntities.push(entity);
        });

        if (this.editPositions.length == 1) { //只有一个节点表示点类型 不需要创建整体移动节点
            return;
        }
        this.createEditMoveCenterEntity();
    }

    //创建编辑圆的节点对象
    createCircleEditVertex() {
        const entity = this.viewer.entities.add({
            position: new Cesium.CallbackProperty(e => {
                return this.editPositions[1];
            }, false),
            type: "MilitaryPlotEditVertex",
            vertexIndex: 1, //节点索引 
            point: {
                color: Cesium.Color.DARKBLUE.withAlpha(0.4),
                pixelSize: 10,
                outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
                outlineWidth: 3,
                disableDepthTestDistance: 2000,
            },
        })
        this.vertexEntities.push(entity);
    }

    //创建整体移动的entity对象
    createEditMoveCenterEntity() {
        this.EditMoveCenterEntity = this.viewer.entities.add({
            position: new Cesium.CallbackProperty(e => {
                return this.EditMoveCenterPositoin;
            }, false),
            type: "MilitaryPlotEditMoveVertex",
            point: {
                color: Cesium.Color.RED.withAlpha(0.4),
                pixelSize: 10,
                outlineColor: Cesium.Color.WHITE.withAlpha(0.3),
                outlineWidth: 3,
                disableDepthTestDistance: 2000,
            },
        })
    }

    //清空编辑节点
    clearEditVertex() {
        if (this.vertexEntities) {
            this.vertexEntities.forEach(item => {
                this.viewer.entities.remove(item);
            })
        }
        this.vertexEntities = [];
        this.viewer.entities.remove(this.EditMoveCenterEntity);
    }
}

详情参见 Cesium实战项目