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

Mapbox gl:鼠标悬停在图层上更改光标指针样式,mapbox,mapbox-gl-js,Mapbox,Mapbox Gl Js,我有10到15个不同的图层,例如汽车、公共汽车、路线等。如果需要,我会在地图上添加动态图层,因为地图上始终不存在所有图层 所以我在显示关于图层的单击信息,但我想当我将鼠标悬停在图层上时,将鼠标指针光标样式更改为“十字线” 我已经在mouseenter事件上编写了更改光标样式,但它似乎有时可以工作,有时即使鼠标悬停在图层上,但光标样式并没有更改 第一种方式: map.on('mouseenter', (e: any) => { self.mapInstance.getCanva

我有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';    
            });
第二种方式:

 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';    
            });
我的问题

  • 光标样式没有得到更改

  • queryRenderedFeatures(如图层)上的错误不存在

  • 鼠标在悬停层上闪烁


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

    在mousemove上如何

    //一些填充,因为这样需要30个字符的最低职位

    map.on('mouseenter', 'clusters', () => {
      map.getCanvas().style.cursor = 'pointer'
    })
    map.on('mouseleave', 'clusters', () => {
      map.getCanvas().style.cursor = ''
    })
    
    这是如何让它与Cluser一起工作的,但是代码可能仍然有用

    祝你好运

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

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

    不,不要同时使用mousemove事件……并且在首次加载地图时在控制台上出现此错误。错误:图层“Car”在地图样式中不存在,无法查询要素。在i.queryRenderedFeatures(mapbox gl.js:33)中,可能会将鼠标移动到加载中,层中有什么
    mouseenter
    将在鼠标悬停在某个功能上运行,而不是在图层中的任何位置。使用鼠标悬停代替mouseenter