Mapbox gl：鼠标悬停在图层上时更改光标指针样式

Question

我有 10 到 15 个不同的图层，例如汽车、公共汽车、路线等。如果需要，我会在地图上动态添加这些图层，因为地图上始终不存在所有图层。

所以我在单击图层时显示信息，但我希望当我将鼠标悬停在图层上时，将鼠标指针光标样式更改为“十字准线”。

我已经在 mouseenter 事件上写了更改光标样式，但它似乎有时有效，有时即使鼠标悬停在图层上但光标样式没有改变。

第一种方式：

 map.on('mouseenter', (e: any) => {
      self.mapInstance.getCanvas().style.cursor = 'crosshair';
    });

第二种方式：

      map.on('mouseenter',(e: any) => {         
       var features = map.queryRenderedFeatures(e.point,{ layers: ['Car',"Bus"] });
//error let's say any layer still on exist on map
        if(features.length)
         map.getCanvas().style.cursor = 'crosshair';    
            });

我的问题：

1. 光标样式没有改变

2. queryRenderedFeatures 上的错误，如层不存在

3. 鼠标在悬停层上闪烁

如何在鼠标悬停在不同图层上时更改光标样式？

Answer 1

 map.on("mouseenter", layer.id, () => {
          map.getCanvas().style.cursor = "pointer";
        });

 map.on("mouseleave", shape.id, () => {
          map.getCanvas().style.cursor = "default";
        });

您可以向每个层添加自定义事件，例如单击。鼠标事件也是如此。

Answer 2

map.on('mouseenter', 'clusters', () => {
  map.getCanvas().style.cursor = 'pointer'
})
map.on('mouseleave', 'clusters', () => {
  map.getCanvas().style.cursor = ''
})

这是如何让它专门与集群一起工作，但代码可能仍然有帮助。

祝你好运 ！

Answer 3

鼠标移动怎么样？

// 一些填充，因为 SO 至少需要 30 个字符才能发布...