特点前端设计，前端实现，比设计-裁切影像-切图发布更便捷，更容易推广。消耗前端性能，遮罩下的瓦片仍然在占用资源。效果实现过程获取数据，并对MuiltiPolygon做判断 processGeoJSONData(data) { const list = []; data.features.forEach((feature) => { const { coordinates, type } = feature.geometry; if (type === "MultiPolygon") { coordinates.forEach((part) => { const coords = []; part[0].forEach((point) => { coords.push(...point); }); list.push(coords); }); } else { const coords = []; coordinates[0].forEach((point) => { coords.push(...point); }); list.push(coords); } }); return list; } 增加渐变图片填充的墙 getWallPrimitive(list, height = 1000) { const wallInstances = list.map((coords) => { const positions = Cesium.Cartesian3.fromDegreesArray(coords); const wall = new Cesium.WallGeometry({ positions: positions, maximumHeights: positions.map(() => { return height; }), }); return new Cesium.GeometryInstance({ geometry: wall, }); }); const wallPrimitive = new Cesium.Primitive({ geometryInstances: wallInstances, appearance: new Cesium.MaterialAppearance({ material: Cesium.Material.fromType("Image", { image: "/image/wall.png", }), }), }); return wallPrimitive; }, 遮罩及不遮罩部分实现 function getPolygonPrimitive(list) { // Initialize an empty array for geometry instances const instances = []; // Define outer positions for the polygon const positionsOuter = Cesium.Cartesian3.fromDegreesArray([ 73.0, 53.0, 73.0, 0.0, 135.0, 0.0, 135.0, 53.0, ]); // Define inner positions for the polygon const positionsInner = list.map((coords) => { const arr = Cesium.Cartesian3.fromDegreesArray(coords); const hierarchy = new Cesium.PolygonHierarchy(arr); return hierarchy; }); // Create the polygon hierarchy const hierarchy = new Cesium.PolygonHierarchy( positionsOuter, positionsInner ); // Create a geometry instance with the polygon geometry instances.push( new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: hierarchy, }), }) ); // Create the polygon primitive const polygonPrimitive = new Cesium.GroundPrimitive({ geometryInstances: instances, appearance: new Cesium.MaterialAppearance({ material: Cesium.Material.fromType("Color", { color: Cesium.Color.BLACK.withAlpha(0.9), }), }), }); // Return the polygon primitive return polygonPrimitive; } 开启遮罩 function loadMaskPrimitive() { fetch("/joint/resources/xm/350200.json") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("请求失败！"); } }) .then((data) => { console.log(data); const list = processGeoJSONData(data); const polygonPrimitive = getPolygonPrimitive(list); const wallPrimitive = getWallPrimitive(list, 10); viewer.scene.primitives.add(polygonPrimitive); viewer.scene.primitives.add(wallPrimitive); }) .catch((error) => { console.log(error); }); } 参考资料：简书-Cesium简单遮罩

Cesium开启简单遮罩

vip168

特点

前端设计，前端实现，比设计-裁切影像-切图发布更便捷，更容易推广。
消耗前端性能，遮罩下的瓦片仍然在占用资源。

效果

实现过程

获取数据，并对MuiltiPolygon做判断

processGeoJSONData(data) {
      const list = [];
      data.features.forEach((feature) => {
        const { coordinates, type } = feature.geometry;
        if (type === "MultiPolygon") {
          coordinates.forEach((part) => {
            const coords = [];
            part[0].forEach((point) => {
              coords.push(...point);
            });
            list.push(coords);
          });
        } else {
          const coords = [];
          coordinates[0].forEach((point) => {
            coords.push(...point);
          });
          list.push(coords);
        }
      });
      return list;
    }

增加渐变图片填充的墙

getWallPrimitive(list, height = 1000) {
      const wallInstances = list.map((coords) => {
        const positions = Cesium.Cartesian3
此内容 登录 或 注册 后可见