在 Mapbox-GL-JS 中 minzoom 和 maxzoom 到底做了啥？

Posted 2023-02-16

【中文标题】在 Mapbox-GL-JS 中 minzoom 和 maxzoom 到底做了啥？

【英文标题】：What do minzoom and maxzoom do in Mapbox-GL-JS exactly?在 Mapbox-GL-JS 中 minzoom 和 maxzoom 到底做了什么？

【发布时间】：2018-06-20 04:54:50

【问题描述】：

矢量切片源上的minzoom 和maxzoom 属性以及基于矢量的图层在 Mapbox-GL-JS 样式中的作用到底是什么？ documentation 有点短。

【参考方案1】：

在矢量平铺源中

我们来看这个例子：

"mytiles": 
    "type": "vector",
    "tiles": ["http://localhost/tiles/z/x/y.pbf"],
    "minzoom": 7,
    "maxzoom": 12

这意味着：

如果http://localhost/tiles/tiles.json（我认为）有可用的 TileJSON 文件，请忽略其 minzoom 和 maxzoom 属性。 切勿尝试获取 7-12 范围之外的任何图块。 如果需要缩放 13 的图块，则获取缩放 12 的等效图块，然后将其过度缩放。 如果在缩放 6 时需要磁贴，则根本不显示磁贴。永远不会出现放大不足的情况。

如果 minzoom 和/或 maxzoom 属性未在源上定义，则使用 TileJSON 中的等效属性（如果可用）。否则，假定切片在请求的任何缩放级别都可用，并且不会发生过度缩放。 （如果图块实际上不可用，它们就不会显示。）

在矢量图层中

我们以这个例子为例，参考上面的源码：

    "id": "mylayer",
    "source": "mytiles",
    "source-layer": "mytiles-layer",
    "type": "fill",
    "minzoom": 10,
    "maxzoom": 14

这意味着：

切勿以小于 10 的缩放比例显示此图层，即使有可用的图块。 尝试以 10.0-13.9 的缩放比例显示此图层，并根据需要在 13.0 和 13.9 之间过度缩放图块。 从不以 14+ 倍率显示此图层

如果未定义minzoom/maxzoom 属性，则图层将尝试在源缩放范围内以任何给定缩放显示。

在地图对象上

为了完整性：实例化 Map 对象时：

   const map = new mapboxgl.Map(
     container: 'map,
     style,
     minZoom: 8, // note the camel-case
     maxZoom: 15
   );

这意味着：

不允许用户缩小小于 8 或大于 15。

【讨论】：

听起来差不多，除了最后一位 mylayer 应该显示在 13.9 而不是 14，至少在我的测试中它是这样工作的。 map.setZoom(14) 隐藏图层。