美文网首页开源
Cesium简单遮罩

Cesium简单遮罩

作者: YGIS | 来源:发表于2023-04-26 11:37 被阅读0次
    效果

    参考资料

    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);
            });
        },
    

    相关文章

      网友评论

        本文标题:Cesium简单遮罩

        本文链接:https://www.haomeiwen.com/subject/awdvjdtx.html