Mapbox添加多个不同的点图标

// 添加多个点图
function addMorePoint(data){
  if(mapboxMap.map.getSource('iconImageCircle')){
    mapboxMap.map.removeLayer('iconCircle')
    // mapboxMap.map.removeLayer('lineSources')
    mapboxMap.map.removeSource('iconImageCircle')
    mapboxMap.map.removeImage('first')
    mapboxMap.map.removeImage('second')
    mapboxMap.map.removeImage('third')
  }
  let features = []
  for (let index = 0; index < data.length; index++){
    let arrData =JSON.parse(data[index].points).features
    arrData.forEach(item=>{
      features.push(item)
    })
    // features.push({
    //   "type": "Feature",
    //   geometry:JSON.parse(data[index].points),
    //   properties: {
    //     ...data[index],
    //     channelTypeA: data[index].channelType,
    //     title:data[index].names
    //   }
    // })
  }
  for (const marker of features) {
    var el1 = document.createElement('div');
    new mapboxgl.Marker(el1)
    .setLngLat(marker.geometry.coordinates)
  }

  //加载img
  mapboxMap.map.loadImage(require(`../assets/img/circle0.png`), function (error, image) {
    if (error) throw error
    mapboxMap.map.addImage('first', image, { sdf: false })
  })
  mapboxMap.map.loadImage(require(`../assets/img/circle1.png`), function (error, image) {
    if (error) throw error
    mapboxMap.map.addImage('second', image, { sdf: false })
  })
  mapboxMap.map.loadImage(require(`../assets/img/circle2.png`), function (error, image) {
    if (error) throw error
    mapboxMap.map.addImage('third', image, { sdf: false })
  })
  mapboxMap.map.loadImage(require(`../assets/img/point1.png`), function (error, image) {
    if (error) throw error
    mapboxMap.map.addImage('fourth', image, { sdf: false })
  })
  mapboxMap.map.loadImage(require(`../assets/img/point2.png`), function (error, image) {
    if (error) throw error
    mapboxMap.map.addImage('fifth', image, { sdf: false })
  })
  mapboxMap.map.addSource('iconImageCircle', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features:features
    }
  });
  mapboxMap.map.addLayer({
    id: "iconCircle",
    type: "symbol",
    source: 'iconImageCircle', // 对应addSource第一个参数名字
    layout: {
      "icon-image": [
        "case",
        ['==', ['get', 'channelTypeA'], '51'],
        'first',
        ['==', ['get', 'channelTypeA'], '52'],
        'second',
        ['==', ['get', 'channelTypeA'], '53'],
        'third',
        ['==', ['get', 'channelTypeA'], '54'],
        'fourth',
        ['==', ['get', 'channelTypeA'], '55'],
        'fifth',
        "buming",
      ], // 对应addImage()第一个参数名字
      'text-field': ['get', 'title'],
      "icon-allow-overlap": true,//如果设置为true，图标依旧显示，即使和已绘制的其他要素有碰撞
      "icon-ignore-placement": true,//如果设置成true，即使其他要素有碰撞的情况下，依然可以显示
      "text-allow-overlap": true,//是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
      "icon-size": 0.8,//图标的大小
      "text-size": 12,
    },
  })
}