Mapbox Всплывающие окна со слоем меток?

Question

Можно ли создавать всплывающие окна в Mapbox из слоя с текстовой меткой?

Следующий код генерирует всплывающие окна из полигонов:

        map.on('load', function () {
            map.on('mousemove', 'state-shape', function (e) {
                var features = map.queryRenderedFeatures(e.point, {
                    layers: ['state-shape'] // the name of the layer
                });
                if (!features.length) {
                    return;
                }
                var feature = features[0];
                popup
                    .setLngLat(e.lngLat)
                    // .setHTML(e.features[0].properties.name)
                    .setHTML("<strong>State: </strong>" + feature.properties.STATE_NAME
                    )
                    .addTo(map);
            });
            // Change the cursor to a pointer when the mouse is over the states layer.
            map.on('mouseenter', 'state-shape', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            // Change it back to a pointer when it leaves.
            map.on('mouseleave', 'state-shape', function () {
                map.getCanvas().style.cursor = '';
                popup.remove();
            });

Я пытаюсь сделать то же самое для слой надписей, но ничего не происходит.

        map.on('load', function () {
                map.on('mousemove', 'state-labels', function (e) {
                    var features = map.queryRenderedFeatures(e.point, {
                        layers: ['state-labels'] // name of the layer
                    });
                    if (!features.length) {
                        return;
                    }
                    var feature = features[0];
                    popup
                        .setLngLat(e.lngLat)
                        // .setHTML(e.features[0].properties.name)
                        .setHTML("<strong>State: </strong>" + feature.properties.STATE_NAME
                        )
                        .addTo(map);
                });
            map.on('mouseenter', 'state-labels', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'state-labels', function () {
                map.getCanvas().style.cursor = '';
                popup.remove();
            });
            });

Если кто-нибудь знает, возможно ли это с помощью других средств, пожалуйста, дайте мне знать.

Answer 1

Да. Вы можете запросить векторные данные mapboxgl, включая текстовые слои.

Вот как запросить слой state-label и показать имя состояния во всплывающем окне. У вас было несколько опечаток в коде вроде state-labels.

  map.once("load", () => {
    var popup = new mapboxgl.Popup();
    map.on("mousemove", "state-label", function(e) {
      var features = map.queryRenderedFeatures(e.point, {
        layers: ["state-label"] // name of the layer
      });
      if (!features.length) {
        return;
      }
      var feature = features[0];
      popup.setLngLat(e.lngLat)
        // .setHTML(e.features[0].properties.name)
        .setHTML("<strong>State: </strong>" + feature.properties.name)
        .addTo(map);
    });
    map.on("mouseenter", "state-label", function() {
      map.getCanvas().style.cursor = "pointer";
    });
    map.on("mouseleave", "state-label", function() {
      map.getCanvas().style.cursor = "";
      popup.remove();
    });
  });

Вот кодекс, демонстрирующий то же самое: https://codepen.io/manishraj/pen/PowLPVq