Mapbox 绘制区域边界线 鼠标悬停效果 vue

官方文档： 点击查看
翻译参考： 点击查看
获取geoJson地图文件的数据： 点击查看
获取到数据后，在该数据的结构中添加 status 状态属性（假数据）

效果图：
绘制全部区域边框线

hover时当前区域填充颜色

hover时当前区域出现区域边界线，当前区域填充颜色，出现弹窗提示

实现步骤：

注意：
在鼠标悬停事件中使用 map.setFeatureState() 和 map.setFilter() 这两种方法时：
map.setFeatureState() 方法：加载的 geoJson 文件中 feature对象里面必须设定一个 id 属性，用于定位哪个区域需要高亮。如果原文件没有，可以手动在原文件上添加 id 属性并设置对应的 id 数字number 【用 id 来做筛选】
map.setFilter()：在 map.addLayer() 中添加 filter: ['==', 'name', ''], 【用 name 来做筛选】

拿到对应省市的数据后：

<div ref="basicMapbox" :style="mapSize" class="mapClass"></div>

computed: {
    mapSize() {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight,
      }
      return styleObj
    },
},
mounted() {
    this.init()
},
// 初始化
init() {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWVvxxxxxxxxxxCJhIjoiY2tqbWtlemR5MGt4MTJ4bjBxcjNmcng5NCJ9.GRpGEmZhxJ58EkNW6Ta_AQ'
  this.mapInst = new mapboxgl.Map({
    container: this.$refs.basicMapbox,
    style: 'https://xxxxxxxxtor-styles/mapbox/mapbox-light.json',
    // center: [113.34411, 23.141], // 地图初始化时的地理中心点
    // zoom: 6.4,
    center: [113.280637, 23.125178],
    zoom: 7, // starting zoom
    bearing: 0,
    pitch: 45,
  })
  this.drawCityBorder()
  this.loadPoint()
},
// 绘制区域边界线
drawCityBorder() {
  let that = this
  that.mapInst.on('load', function () {
    that.addPolyline(geoJson)
  })
},
addPolyline(geojson) {
  let that = this
  let hoveredStateId = null
  // 加载区域边界geojson数据文件
  that.mapInst.addSource('states', {
    type: 'geojson',
    data: geojson,
  })
  // 给区域绘制边框线
  that.mapInst.addLayer({
    id: 'state-borders',
    type: 'line',
    source: 'states',
    layout: {},
    paint: {
      'line-color': '#627BC1',
      'line-width': 4,
    },
    /* （1）filter：过滤器，名字name为空的数据才显示，也就是默认不使用该layer； 效果：在鼠标悬停的时候才显示该区域的边界线。 （2）反之，如果不设置filter，则显示所有区域的边界线   */
    filter: ['==', 'name', ''],
  })
  // 给区域范围填充背景颜色
  that.mapInst.addLayer({
    id: 'state-fills',
    type: 'fill',
    source: 'states',
    layout: {},
    paint: {
      'fill-color': '#627BC1',
      'fill-outline-color': '#627BC1',
      'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.5, 0],
    },
  })
  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false,
  })
  //鼠标悬停事件
  that.mapInst.on('mousemove', 'state-fills', function (e) {
    that.mapInst.getCanvas().style.cursor = 'pointer' // 设定鼠标移入的样式
    let latLongData = [Number(e.lngLat.lng), Number(e.lngLat.lat)]

    if (e.features.length > 0) {
      if (hoveredStateId) {
        // setFeatureState 和 setFilter 是两种不同的写法(都可以)
        // hover时给该区域填充颜色
        that.mapInst.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false })
        // hover时出现区域边界线
        that.mapInst.setFilter('state-borders', ['==', 'name', e.features[0].properties.name]) /* 通过设置filter更新要显示的数据，即出现鼠标悬停之后的变色效果 */
      }
      hoveredStateId = e.features[0].id // ps:加载的geoJson  feature 里面必须设定一个id 属性,用于定位哪个区域需要高亮。如果原文件没有，可以手动在原文件上添加id 属性并设置对应的id 数字
      that.mapInst.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: true })

      // 鼠标hover 时 弹窗显示区域的介绍信息
      popup
        .setLngLat(latLongData)
        .setHTML(
          ` <div class="hover-popup" >
              <div style="font-size:14px; color:#333">
                <div style="font-weight:bold"> ${e.features[0].properties.name} </div>
                <div style="margin-top:5px"><span style="color:#999; ">某某：</span><span>35个</span></div>
                <div style="margin-top:5px"><span style="color:#999" >某某：</span><span>1个</span></div>	
              </div>
            </div>             
          `
        )
        .addTo(that.mapInst)
    } else {
      popup.remove()
      return
    }
  })
  // 鼠标移出
  that.mapInst.on('mouseleave', 'state-fills', function () {
    that.mapInst.getCanvas().style.cursor = '' //改变鼠标样式
    if (hoveredStateId) {
      that.mapInst.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false })
      that.mapInst.setFilter('state-borders', ['==', 'name', '']) /* 鼠标移开时还原layer的过滤器 */
    }
    hoveredStateId = null
    popup.remove() //鼠标移开去掉弹窗
  })
},