效果

参考资料

1. cesium只展示某个区域市省地图
2. 百度api-掩模-只展示地图指定区域

特点

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

实现过程

按示例实现

出现黑线问题

• 问题：地图上出现黑线
• 原因：和addRect添加了覆盖全球的几何有关
• 解决：由于遮罩视图下不需要全球范围视图，限制了相机高度，不再用几何覆盖全球

优化

• 对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: "./assets/wall.png",
          }),
        }),
      });
      return wallPrimitive;
    },

• 根据GPT重构了部分代码

loadMaskPrimitive(layer) {
      fetch("./data/taizhou.geojson")
        .then((response) => {
          if (response.ok) {
            return response.json();
          } else {
            throw new Error("请求失败！");
          }
        })
        .then((data) => {
          console.log(data);
          const list = this.processGeoJSONData(data);
          const polygonPrimitive = this.getPolygonPrimitive(list);
          const wallPrimitive = this.getWallPrimitive(list);
          layer._delegate.add(polygonPrimitive);
          layer._delegate.add(wallPrimitive);
        })
        .catch((error) => {
          console.log(error);
        });
    },