Question

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

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

def function(a,b):
        for i1,i2 in zip(a[:],b[:]):
            if i1 == i2:
                a.remove(i1)
                b.remove(i2)
            elif i1 < i2:
                b.remove(i2)
            else:
                a.remove(i1)

这可以按预期工作，并将点添加到地图中，并在每个点下呈现标签。

为了减少地图的混乱，我希望在地图缩小超过某个缩放级别时隐藏标签（反之亦然，在地图放大时显示标签）。无论缩放级别如何，我总是想要显示点图标。

我不知道该怎么做。如何实现这一点的任何想法将不胜感激！

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.如果你不想要＆＃34; embiggening＆＃34;缩放3和4之间的效果，您还可以指定小数缩放：只需将4更改为3.1。

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

2 个答案: