Как скрыть метки точек на определенных уровнях масштабирования в 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. Если вы не хотите эффекта «embiggening» между увеличением 3 и 4, вы также можете указать дробный масштаб: просто измените 4 на 3.1.