MapBox鼠标移入地图要素上，形状变更为手指

原创已于 2024-01-15 17:25:34 修改 · 905 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #mapbox

于 2023-03-12 12:13:02 首次发布

mapbox+leaflet 专栏收录该内容

64 篇文章

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家。

源码

每一个图层添加的时候，都可以调用一下这个函数，id为图层添加时的图层id,监听地图的鼠标移入移出事件。preventDefault用来阻止其他默认事件，获取features ，如果有要素，就变为手指，移出时变回拖拽的手掌。

    // 添加鼠标交互
    addMouseReact (id) {
      const self = this
      this.map.on('mousemove', id, (e) => {
        e.preventDefault()
        const features = self.map.queryRenderedFeatures(e.point, {
          layers: [id]
        })
        if (features.length > 0) {
          self.map.getCanvas().style.cursor = 'pointer'
        }
      })
      this.map.on('mouseleave', id, (e) => {
        self.map.getCanvas().style.cursor = 'grab'
      })
    },