Cesium简单遮罩

效果

参考资料

  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);
        });
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容