mapbox鼠标滑过高亮要素

成果图

实现方法

这里借鉴了官网这个例子

https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

这里是图层的样式配置，通过改变select的true和false，来控制渲染的颜色和宽度

    paint: {
        'line-opacity': 1,
        'line-color': [
            'case',
            ['boolean', ['feature-state', 'select'], false],
            'rgb(0,255,255)',
            ['get','color']
        ],
        // 'line-width':["match",["get","级别"],0,3.5,2],
        'line-width':[
            'case',
            ['boolean', ['feature-state', 'select'], false],
            4,
            2
        ],
    },

选中的颜色select设置为true

        map.on('mousemove','riverDanger',(e) =>{
          if (e.features.length > 0) {
            if (this.heighLight !== null) {
              map.setFeatureState(
                { source: 'riverDanger', id: this.heighLight },
                { select: false }
              );
            }
            this.heighLight = e.features[0].id;
            map.setFeatureState(
              { source: 'riverDanger', id: this.heighLight },
              { select: true }
            );
          }
        })
        map.on('mouseleave', 'riverDanger', () => {
          if (this.heighLight !== null) {
            map.setFeatureState(
              { source: 'riverDanger', id: this.heighLight },
              { select: false }
            );
          }
          this.heighLight = null;
        });

注意这里可能会出现找不到id的情况，那就手动给每一个要素添加ID，比如可以把index给id

      geojsonData.features.forEach((e,index)=>{
        e.id = index
      })