如何在 mapbox-gl-js 的某些缩放级别隐藏点标签？

Question

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

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

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"
    }
});

这按预期工作，点被添加到地图，标签在每个点下呈现。

为了使地图不那么混乱，我想在地图缩小超过某个缩放级别时隐藏标签（反之亦然，在地图放大时显示标签）。无论缩放级别是多少，我总是想显示点图标。

Answer 1

再做一些之后thinking/reading/testing我想我找到了解决问题的方法。

我现在添加一层只显示图标，还添加第二层只包含标签。在第二层中，我将 'minzoom' 属性设置为当用户放大地图时我希望标签出现的缩放级别。

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]
    }
});

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

Answer 2

如果您不想要多层，我可以使用另一种解决方法。

根据您的原始代码，您可以使用 text-size 属性与缩放相关 stops:

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",
        "text-size": {
            "stops": [
                [0, 0],
                [3, 0],
                [4, 10]
            ]
        }
    }
});

该值在停止点之间插值，因此在缩放 0 和 3 之间，text-size 在 0 和 0 之间插值，导致... 0（即不存在）。从 zoom 3 开始，它为文本提供了放大的效果，直到 zoom 4（我喜欢这种效果，但这是个人的）。从 zoom 4 text-size 开始将保持在 10。如果你不想在 zoom 3 和 4 之间出现 "embiggening" 效果，你也可以指定一个分数缩放：只需将 4 更改为 3.1.

如何在 mapbox-gl-js 的某些缩放级别隐藏点标签？

How to hide point labels at certain zoom levels in mapbox-gl-js?

mapbox

mapbox-gl-js