javascript - 标签层中的 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