map-box地图点击图标高亮事件

npm install --save mapbox-gl

<template>
  <div id="map-box"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl' // 引入map-box
const loadId = 'map-box' // 唯一的id
const IMAGES = { // 这些都是地图大点图标，直接引入自己喜欢的图标就行
  [loadId + 'parking']: require('./img/illegal_parking.png'),
  [loadId + 'parking-selected']: require('./img/illegal_parking-selected.png'),
  [loadId + 'personnel']: require('./img/personnel_aggregation_density.png'),
  [loadId + 'personnel-selected']: require('./img/personnel_aggregation_density-selected.png'),
  [loadId + 'pedlar']: require('./img/coord-pedlar.png'),
  [loadId + 'pedlar-selected']: require('./img/coord-pedlar-selected.png'),
  [loadId + 'roadside']: require('./img/roadside_booths.png'),
  [loadId + 'roadside-selected']: require('./img/roadside_booths-selected.png')
}
const data = {  // 模拟的点位假数据
  'type': 'FeatureCollection',
  'features': [
    {
      "id": 167932,
      "type": "Feature",
      'properties': {
        'event_subtype_code': '0405',
        'selected':0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          104.9093974867,
          31.1110811505
        ],
      }
    },
    {
      "id": 167931,
      "type": "Feature",
      'properties': {
        'event_subtype_code': '0406',
        'selected':0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          104.5093984867,
          31.3110841505
        ],
      }
    },
    {
      "id": 167847,
      "type": "Feature",
      'properties': {
        'event_subtype_code': '0407',
        'selected':0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          104.5995422476,
          31.1364776882
        ],
      }
    },

    {
      "id": 167763,
      "type": "Feature",
      'properties': {
        'event_subtype_code': '0408',
        'selected':1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          104.3715422674,
          31.1384774881
        ],
      }
    }
  ]
}
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.mapBox()
  },
  methods: {
    onMapClick(map) { // 点击地图图标事件（打印map看不到features属性） map.features 
      console.log(map.features[0]);
      const projection=map.features[0].properties
      data.features.forEach(item=>{
        item.properties.selected=0
        if (projection.event_subtype_code===item.properties.event_subtype_code) {
          item.properties.selected=1
        }
      })
      this.map&&this.map.getSource(loadId).setData(data) // 重新放回addSource里面
    },
    mapBox() {
      // map-box秘钥token
      mapboxgl.accessToken = 'pk.eyJ1Ijoiemhhb3h1eHUiLCJhIjoiY2w3azVnbGx3MGdlaTNxb2JhdTR4NHpwZiJ9.yM69RYEDfy5o5u0b9Lb_nw';
      const map = new mapboxgl.Map({
        container: loadId, // ID
        style: {
          version: 8,
          sources: {
            'gd-satellite': {
              type: 'raster',
              tiles: [
                // 高德地图 卫星影像
                'http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=A,G,L&og=819&n=z',
              ],
              tileSize: 206, // 文字大小
            },
          },
          layers: [
            {
              id: 'gd-satellite',
              type: 'raster',
              source: 'gd-satellite', // 对应sources里的属性
              layout: {
                visibility: 'visible', // 显示地图  隐藏地图none
              },
              minzoom: 0,
              maxzoom: 20,
            },
          ],
        },
        center: [104.3995192745, 31.1364077264], // 中线点
        zoom: 10,  // 视角远近
        projection: 'globe' 
      });
      this.map = map
      map.on('load', () => {
        map.addSource(loadId, {
          "type": "geojson",
          "data": data  // 初始展示的图标数据
        });
        if (!map.hasImage(loadId)) {
          Object.keys(IMAGES).forEach((key) => {
            map.loadImage(IMAGES[key], function (error, image) { // 放入图片以及每种图片唯一key
              if (error) throw error
              map.addImage(key, image)
            })
          })
        }
        map.addLayer({  // 图标添加到视图上
          id: loadId,
          type: 'symbol',
          source: loadId,  
          layout: { // 图标点击高亮显示
            'icon-anchor': 'bottom',
            'icon-image': [ // 图标对应的data中的属性
              'case',
              ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0405']], loadId + 'parking-selected',
              ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0406']], loadId + 'personnel-selected',
              ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0407']], loadId + 'pedlar-selected',
              ['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0408']], loadId + 'roadside-selected',
              ['==', ['get', 'event_subtype_code'], '0405'], loadId + 'parking',
              ['==', ['get', 'event_subtype_code'], '0406'], loadId + 'personnel',
              ['==', ['get', 'event_subtype_code'], '0407'], loadId + 'pedlar',
              loadId + 'roadside'],
            'icon-offset': [-8, -8],
            visibility: 'visible'
          }
        });
        map.on('click', loadId, this.onMapClick) // 点击事件
        setTimeout(() => {
          //判断存在才移除
          //图层Id
          // if (map.getLayer(loadId)) {
          //   map.removeLayer(loadId);
          // }
          // //图片Id
          // if (map.hasImage(loadId)) {
          //   map.removeImage(loadId);
          // }

          // if (map.getSource(loadId)) {
          //   map.removeSource(loadId);
          // }

        }, 5000)
      })
    }
  }
}
</script>

<style>
#map-box {
  width: 100%;
  height: 100%;
}
</style>

出图效果