cesium修改绘制面

实现代码

// 编辑面
function handleEditRail(item) {
    // item 编辑面的数据用 dataList 代替
    let moveEntity = null;

    let dataList = [
        {
            "x": 106.8778889989607,
            "y": 39.86064312585522,
            "z": -0.002133821742933705
        },
        {
            "x": 106.87957528980367,
            "y": 39.86062566475506,
            "z": -0.0022789000920552123
        },
        {
            "x": 106.87854493495637,
            "y": 39.85933215744935,
            "z": -0.002270360337355479
        }
    ]
    let preRenderDatas = []
    dataList.forEach(item => {
        preRenderDatas.push([item.x, item.y])
    })

    let polyline = []
    let pointList = []
    preRenderDatas.forEach(res => {
        let cartesian3 = Cesium.Cartesian3.fromDegrees(res[0], res[1])
        polyline.push(cartesian3)
        pointList.push(cartesian3)

    })
    let polygonList = preRenderDatas.flat()

    polyline.push({ x: polyline[0]['x'], y: polyline[0]['y'], z: polyline[0]['z'] })
    nextTick(() => {
        viewer.entities.add({
            name: "面几何对象",
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(polygonList),
                material: Cesium.Color.fromCssColorString('yellow').withAlpha(0.35),
                classificationType: Cesium.ClassificationType.BOTH, 
            },
            polyline: {
                positions: new Cesium.CallbackProperty(function () {
                    return polyline;
                }, false),
                material: Cesium.Color.RED.withAlpha(0.5),
                // 必须给 golyline 设置贴地，否则会造成绘制的面和线在地图放大到一定程度后有误差
                clampToGround: true,
                width: 3,
            },
        });
        // 创建监听的handler
        handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        // 用于保存实体的对象
        let gon = undefined;

        // 判断是否处于编辑状态
        let isEditting = false;

        // 设置当前的编辑点
        let currentPoint = undefined;

        // 清空编辑点ID数组
        let pointsId = [];

        for (let cartesian of pointList) {
            let point = viewer.entities.add({
                name: "点几何对象",
                position: cartesian,
                point: {
                    color: Cesium.Color.BLUE,
                    pixelSize: 10,
                    outlineColor: Cesium.Color.BLUE,
                    outlineWidth: 2,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                },
            });

            // 保存点的ID以便删除
            pointsId.push(point.id);
        }

        // 设置编辑状态为true
        isEditting = true;
        gon = viewer.entities._entities._array[0];
        // 对鼠标按下事件的监听
        handler.setInputAction((event) => {
            // 获取屏幕坐标
            let windowPosition = event.position;

            // 通过屏幕坐标获取当前位置的实体信息
            let pickedObject = viewer.scene.pick(windowPosition);
            // 如果实体信息存在则说明该位置存在实体
            if (Cesium.defined(pickedObject)) {
                // 获取当前点的实体
                let entity = pickedObject.id;
                // 如果实体为面同时没有处于编辑状态，那么保存面的实体
                if (entity && entity.name === "点几何对象") {
                    // 禁止地球旋转和缩放，地球的旋转会对鼠标移动监听有影响，所以需要禁止
                    viewer.scene.screenSpaceCameraController.enableRotate = false;
                    viewer.scene.screenSpaceCameraController.enableZoom = false;
                    // 如果实体为编辑点，那么设置当前编辑点为该点
                    currentPoint = entity;
                } else {
                    viewer.scene.screenSpaceCameraController.enableRotate = true;
                    viewer.scene.screenSpaceCameraController.enableZoom = true;
                    return false
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

        // 对鼠标移动事件的监听
        handler.setInputAction((event) => {
            moveEntity && viewer.entities.remove(moveEntity);

            // 如果处于编辑状态且编辑点已定义，那么开始拖拽编辑
            if (isEditting && currentPoint) {
                // 获取屏幕坐标，移动监听与点击有所不同，所以有起始位置和终点位置
                let windowPosition = event.startPosition;
                // 将屏幕坐标转为笛卡尔坐标
                let ellipsoid = viewer.scene.globe.ellipsoid;
                let cartesian = viewer.camera.pickEllipsoid(windowPosition, ellipsoid);
                // 如果点击到地球外，那么返回
                if (!cartesian) {
                    return;
                }
                // 更新编辑点的位置
                currentPoint.position = cartesian;
                // 创建面标每个点位置信息的数组，并循环赋值
                let points = [];
                for (let id of pointsId) {
                    points.push(viewer.entities.getById(id).position._value);
                }
                // 更新面标的位置数组
                gon.polygon.hierarchy = points;
                polyline = points
                polyline.push({ x: points[0]['x'], y: points[0]['y'], z: points[0]['z'] })

            }

            viewer.entities.add({
                name: '点几何对象',
                position: changeToThree(event.endPosition),
                label: {
                    text: typeName,
                    font: "14px 微软雅黑",
                    color: Cesium.Color.AZURE,
                    outline: true,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 3,
                    showBackground: true,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    pixelOffset: new Cesium.Cartesian2(-10, -10), // 偏移量
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                },

            });
            moveEntity = viewer.entities.values.slice(-1)[0];
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


        // 对鼠标抬起事件的监听
        handler.setInputAction((event) => {
            // 移除当前编辑点
            currentPoint = undefined;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);

        // 清除
        handler.setInputAction((event) => {
            // 恢复地球的旋转和缩放
            viewer.scene.screenSpaceCameraController.enableRotate = true;
            viewer.scene.screenSpaceCameraController.enableZoom = true;
            handler.destroy();
            clearDrawEntities()
            // insertPolygon(positionsLngLat)
            //    currentPoint = undefined;
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    })
}



//清除
function clearDrawEntities() {
    const entitys = viewer.entities._entities._array;
    let length = entitys.length
    for (let f = length - 1; f >= 0; f--) {
        if (entitys[f]._name && (entitys[f]._name === '点几何对象' || entitys[f]._name === '线几何对象' || entitys[f]._name === '面几何对象')) {
            viewer.entities.remove(entitys[f]);
        }
    }
}