有什么方法可以在悬停时为 mapbox 中同一图层上的每个要素提供不同的光标样式？

Question

我正在寻求更改悬停时的光标样式，这将取决于某些属性值，因为每个要素在相同 layer.What 上呈现的值现在正在发生，因为光标样式是对同一 layer.I 中的所有功能进行更改想要控制它。

Answer 1

是的，这是可行的。为此，您需要查询鼠标指针下的特征，然后决定您将使用什么属性来仅过滤某些特征以区分行为。

我在 how to change color and pointer on mouse over 上为您起草了一份 fiddle，我在其中为纽约市所有建筑物中的一个特征 ID 添加了一个过滤器，它将变为红色并改变其状态（ 'hover ; true') 鼠标指针变为 map.getCanvasContainer().style.cursor = 'pointer'.

这是相关代码：

    let mapConfig = {
      NYC: {
        origin: [-74.044514, 40.689259, 39],
        center: [-74.0137, 40.70346, 0],
        zoom: 16.2,
        pitch: 60,
        bearing: 35
      }
    }

    mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
    let point = mapConfig.NYC;
    var map = new mapboxgl.Map({
      style: 'mapbox://styles/mapbox/streets-v11',
      center: point.center,
      zoom: point.zoom,
      pitch: point.pitch,
      bearing: point.bearing,
      container: 'map',
      antialias: true,
      hash: true
    });

    map.on('style.load', function() {

      if (map.getSource('composite')) {
        map.addLayer({
          'id': '3d-buildings',
          'source': 'composite',
          'source-layer': 'building',
          'type': 'fill-extrusion',
          'minzoom': 14,
          'paint': {
            'fill-extrusion-color': [
              'case',
              ['boolean', ['feature-state', 'hover'], false],
              '#ff0000',
              '#ddd'
            ],
            'fill-extrusion-height': ["number", ["get", "height"], 5],
            'fill-extrusion-base': ["number", ["get", "min_height"], 0],
            'fill-extrusion-opacity': 1
          }
        }, 'road-label');
      }

      let fHover;

      map.on('click', function(e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['3d-buildings']
        });
        console.log(features[0].id);
      })

      map.on('mousemove', function(e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['3d-buildings']
        });
        //we will change pointer and color for 42455719
        if (features[0] && features[0].id == 42455719) {
          mouseover(features[0]);
        } else {
          mouseout();
        }

      });

      map.on('mouseout', function(e) {
        mouseout();
      });

      function mouseout() {
        if (!fHover) return;
        map.getCanvasContainer().style.cursor = 'default';
        map.setFeatureState({
          source: fHover.source,
          sourceLayer: fHover.sourceLayer,
          id: fHover.id
        }, {
          hover: false
        });

      }

      function mouseover(feature) {
        fHover = feature;
        map.getCanvasContainer().style.cursor = 'pointer';

        map.setFeatureState({
          source: fHover.source,
          sourceLayer: fHover.sourceLayer,
          id: fHover.id
        }, {
          hover: true
        });
      }

    });

如果此答案解决了您的问题，请将其标记为已接受答案，这样它也会帮助其他用户知道这是正确的解决方案。

有什么方法可以在悬停时为 mapbox 中同一图层上的每个要素提供不同的光标样式？

Is there any way to give different cursor styles on hover for every feature on same layer in mapbox?

mapbox

mapbox-gl