如何在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

在做了一些更多的思考/阅读/测试后,我想我找到了解决问题的方法.

我现在添加一个仅显示图标的图层,并添加仅包含标签的第二个图层.在第二层中,我将'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(即不存在).从缩放3开始,它为文本提供放大直到缩放4的效果(我喜欢效果,但那是个人的).从缩放4开始,text-size它将恒定为10.如果您不想在缩放3和4之间使用"嵌入"效果,您还可以指定小数缩放:只需将4更改为3.1.