cesium实现3D区域掩膜的效果

发布时间 2023-11-03 17:51:57作者: 菜鸟成长日记lx

先展示效果:

上代码:

 add3DAreA(geojson) {
        let arr = []
        geojson.features[0].geometry.coordinates[0][0].forEach(item => {
            arr.push(item[0])
            arr.push(item[1])
        });
        var maskspoint = Cesium.Cartesian3.fromDegreesArray(arr);
        var polygonWithHole = new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray([73.0, 53.0, 73.0, 0.0, 135.0, 0.0, 135.0, 53.0]),
                [new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(arr))]
            )
        });

        var geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole);
        let instances = [];
        instances.push(new Cesium.GeometryInstance({
            geometry: geometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#1e2426"))
            }
        }));
        function addRect(instances, left, down, right, up) {
            instances.push(new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(left, down, right, up)
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#1e2426"))
                }
            }));
        }
        addRect(instances, -180.0, -90.0, 73.0, 90.0);
        addRect(instances, 135.0, -90.0, 180.0, 90.0);
        addRect(instances, 73.0, 53.0, 135.0, 90.0);
        addRect(instances, 73.0, -90.0, 135.0, 0.0);
        this.viewer.scene.primitives.add(new Cesium.Primitive({
            geometryInstances: instances,
            appearance: new Cesium.PerInstanceColorAppearance({
                flat: true,
                translucent: false
            })
        }));
        const entity3 = new Cesium.Entity({
            name: "动态立体墙",
            wall: {
                positions: maskspoint,
                maximumHeights: maskspoint.map((res) => {
                    // return 600;
                    return 400;
                }),
                minimumHeights: maskspoint.map((res) => {
                    return -600;
                }),
                material: Cesium.Color.fromCssColorString("##2a373c"),
            },
        });
        this.viewer.entities.add(entity3);
    }

在初始化cesium的时候调用这个方法