在 MapBox 中挤压土地

Question

我想强调一个事实，即在我的地图中土地比水高，所以想在土地图层中添加一个挤压。我认为使用建筑物的https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/ 并将图层源更改为“土地”会起作用，但它没有。这是特定于构建层的东西还是我做错了什么？这是我的样式 JSON 中的层定义：

    {
        "id": "3d-land",
        "source": "composite",
        "source-layer": "land", # Changed this from building
        "filter": ["==", "extrude", "true"],
        "type": "fill-extrusion",
        "minzoom": 0,
        "paint": {
            "fill-extrusion-color": "#000",
            "fill-extrusion-height":  [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                18.0, 30.0
            ],
            "fill-extrusion-base": [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                18.0, ["get", "min_height"]
            ],
            "fill-extrusion-opacity": 0.8
        }
    }

Answer 1

第一个原因正如控制台所说，"land" does not exist on source "composite"。 "land" 层是background 层，单独存在于样式中。您不能将fill-extrusion 用于background 层。您可能想要使用使用"compose" 源的图层。

另一个原因来自filter。 "filter": ["==", "extrude", "true"] 表示层的属性"extrude" 的值为"true" 时进行过滤。 land 层没有属性 extrude 所以它总是false。

所以，修复的结果是这样的：

map.addLayer(
  {
    id: "3d-landcover",
    source: "composite",
    "source-layer": "landcover",
    "type": "fill-extrusion",
    "minzoom": 0,
    "paint": {
      "fill-extrusion-color": "#000",
      "fill-extrusion-height":  [
        "interpolate", ["linear"], ["zoom"],
        15, 0,
        18.0, 30.0
      ],
      "fill-extrusion-base": [
        "interpolate", ["linear"], ["zoom"],
        15, 0,
        18.0, ["get", "min_height"]
      ],
      "fill-extrusion-opacity": 0.8
    }
  }
);

作为第一个原因，如果要使土地高于水，则应按上述添加除水以外的所有层。这不是很有效。