MapboxGL JS - 在低缩放级别下显示3D建筑

Question

MapboxGL JS - 在低缩放级别下显示3D建筑

9

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

正如在这个示例中所看到的，它正在按预期工作。

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

下面是最终代码：

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加载，并且我没有在互联网上找到任何可以使它工作的东西。

- Marc

只是一个快速提示，您在创建mapboxgl地图的新实例时是否更新了缩放值

new mapboxgl.Map({         style: 'mapbox://styles/mapbox/light-v10',         center: [-74.0066, 40.7135],         zoom: 10, //<----here         pitch: 45,         bearing: -17.6,         container: 'map',         antialias: true     });

？ - Dolly

@Dolly 是的，但它代表了“初始缩放级别”，使用鼠标滚轮进行缩放也可以。 - Marc

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dolly · Accepted Answer

似乎建筑物的瓦片集在缩放级别13之后生成。

阅读此处

因此，当我们在缩放级别低于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
   }
 }
}

截图：

逐步创建谢谢！