MapboxGL JS - 以较低的缩放级别显示 3d 建筑物

Question

我使用 MapboxGL JS v2 和 mapbox://styles/mapbox/streets-v11 风格。
我使用此代码在我的地图上显示 3D 建筑：

map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
        'fill-extrusion-color': '#666',
        'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'height']],
        'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 15, 0, 15.05, ['get', 'min_height']],
        'fill-extrusion-opacity': 0.9,
    }
});

它按预期工作，如 this example 中所示。

现在，我想要以较低的缩放级别加载这些建筑物，例如 10 而不是 15.
因此，我将 minzoom 从 15 更改为 10，并且我还更改了 interpolate 的内容以使用线性插值，从 10 更改为 15.05。

这是最终代码：

map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 10,
    'paint': {
        'fill-extrusion-color': '#666',
        'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 10, 0, 15.05, ['get', 'height']],
        'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 10, 0, 15.05, ['get', 'min_height']],
        'fill-extrusion-opacity': 0.9,
    }
});

不幸的是，它不起作用，它似乎仍在等待缩放级别 15 加载，而且我在互联网上找不到任何让它起作用的东西。

Answer 1

似乎是在缩放级别 13 之后生成用于构建的图块集。

READ HERE

因此，当我们在低于 13 的缩放级别上查询 map queryRenderedFeatures({ layers: ["3d-buildings"] }); 时，不会在地图上添加任何要素。但是一旦缩放级别大于 13，就会添加一些建筑特征。

截图缩放级别<13

截图缩放级别>13

更新

为了使其在缩放级别 10 到 15 之间工作，您必须使用 Tilesets CLI 创建自己的图块集，您必须在其中制作配方 json 并且必须提供缩放级别，例如:

{
   "version": 1,
   "layers": {
   "building_footprints": {
   "source": "mapbox://tileset-source/username/building-footprints",
   "minzoom": 10, //<---
   "maxzoom": 15
   }
 }
}

截图：

Step by Step Creation

谢谢！

MapboxGL JS - 以较低的缩放级别显示 3d 建筑物

MapboxGL JS - Display 3d buildings in lower zoom level

javascript

mapbox

mapbox-gl

mapbox-gl-js