mapbox - 如何在mapbox-gl-js中隐藏特定缩放级别的点标签？

Question

我正在使用 mapbox-gl-js 将 geojson 文件中的点渲染到 map 上。

对于每个点，我还在标记图标下方显示一个标签。我目前使用以下代码执行此操作:

map.addSource("mypoints", {
    type: "geojson",
    data: "mypoints.geojson",
});

map.addLayer({
    "id": "layer-mypoints",
    "type": "symbol",
    "source": "mypoints",
    "layout": {
        "icon-image": "marker-15",
        "text-field": "{name}",
        "text-anchor": "top"
    }
});

这将按预期工作，点将添加到 map 中，并且标签将呈现在每个点下。

为了使 map 不那么困惑，我想在 map 缩小到超过某个缩放级别时隐藏标签(反之亦然，本地图放大时显示标签)。无论缩放级别是多少，我总是想显示点图标。

Answer 1

经过更多思考/阅读/测试后，我想我已经找到了问题的解决方案。

我现在添加一层仅显示图标，并添加第二层仅包含标签。在第二层中，我将“minzoom”属性设置为缩放级别，当用户放大 map 时，我希望标 checkout 现在该级别。

map.addSource("mypoints", {
    type: "geojson",
    data: "mypoints.geojson",
});


// Layer with icons that should always be visible
map.addLayer({
    "id": "layer-mypoints",
    "type": "symbol",
    "source": "mypoints",
    "layout": {
        "icon-image": "monument-15",
        "icon-allow-overlap": true
    }
});            

// Layer with just labels that are only visible from a certain zoom level
map.addLayer({
    "id": "layer-mypoints-label",
    "type": "symbol",
    "source": "mypoints",
    "minzoom": 12, // Set zoom level to whatever suits your needs
    "layout": {
        "text-field": "{name}",
        "text-anchor": "top",
        "text-offset": [0,0.5]
    }
});

这似乎非常适合我的需求。