Cesium绘制面

绘制面

// 绘制面
function setDrawPolygon() {
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

    let movePosition = []; // 记录绘制过程中移动的点位置
    let moveEntity = null; // 记录绘制过程中移动的点实体
    let positions = []; // 记录左键点击的点位置
    let positionsLngLat = []
    let polygonEntity = null; // 记录面实体
    pointEntities = []; // 记录左键点击的点实体
    // 鼠标移动事件
    handler.setInputAction(event => {
        // 除第一次，每次移动都会删除上次的点实体
        moveEntity && viewer.entities.remove(moveEntity);
        // 每次移动，都会删除上次的移动点位置，置为空数组
        movePosition = [];
        // 每次移动都会记录当前点位置
        movePosition.push(transformation(event.endPosition));
        // 创建移动点实体
        viewer.entities.add({
            name: '点几何对象',
            position: movePosition[0],
            point: {
                color: Cesium.Color.YELLOW,
                pixelSize: 5,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
        });
        // 记录点实体
        moveEntity = viewer.entities.values.slice(-1)[0];
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // 点击左键事件
    handler.setInputAction(event => {
        // 记录左键点击的点实体位置
        positions.push(transformation(event.position));

        positionsLngLat.push(Cartesian3_to_WGS84(transformation(event.position)))
        // 如果左键已经点击产生了一个点，加上移动的点，已经能够构成一个线段了;
        if (positions.length === 1) {
            // 添加绘制的面实体
            polygonEntity = viewer.entities.add({
                name: "面几何对象",
                polygon: {
                    // 绘制动态面实体时，面的位置信息必须是使用 Cesium.CallbackProperty() 和 Cesium.PolygonHierarchy() 返回的坐标
                    hierarchy: new Cesium.CallbackProperty(function () {
                        return new Cesium.PolygonHierarchy(positions.concat(movePosition));
                    }, false),
                    material: Cesium.Color.fromCssColorString('yellow').withAlpha(0.2),
                },

                polyline: {
                    positions: new Cesium.CallbackProperty(function () {
                        return positions.concat(movePosition).concat([positions[0]]);
                    }, false),
                    material: Cesium.Color.RED.withAlpha(0.5),
                    // 必须给 golyline 设置贴地，否则会造成绘制的面和线在地图放大到一定程度后有误差
                    clampToGround: true,
                    width: 3,
                },
            });
        }
        // 添加点实体
        viewer.entities.add({
            position: transformation(event.position),
            point: {
                color: Cesium.Color.YELLOW,
                pixelSize: 5,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
        });
        // 记录点实体
        pointEntities.push(viewer.entities.values.slice(-1)[0]);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    // 点击右键事件
    handler.setInputAction(() => {
        // 删除所有的点实体
        pointEntities.forEach(item => {
            viewer.entities.remove(item);
        });
        // 必须大于等于 3 个点才能创建面，否则删除
        if (positions.length >= 3) {
            addPolygon.push(polygonEntity);
            // 删除最后一个移动的点实体
            viewer.entities.remove(moveEntity);
            handler.destroy();
            clearAll()
        } else {
            viewer.entities.remove(polygonEntity);
            // 删除最后一个移动的点实体
            viewer.entities.remove(moveEntity);
            handler.destroy();
        };
        movePosition = []; // 控制最后右键点击的点是否保留
        activeType.value = false
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}


// 经纬度格式转为世界坐标格式的方法
function transformation(position) {
    if (!position) return [];
    return viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);
}


//删除所有点线面实体
function clearAll(){
    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]);
        }
    }
}