mapBox地图的打点聚合，多种图标展示/二、导入json文件，添加镇街图层

本文链接：https://blog.csdn.net/m0_60827885/article/details/127685588

1、获取数据

在另一个组件通过接口获取数据，通过$eventBus.$emit方法将数据传递到地图组件

 //获取点位信息
      getLocation(){
        let params={
          type:this.choseType,
          icoName:this.iconName
        }
        getLocation(params).then(res=>{
          if(res.data.errorNo==200){
            this.currentList=res.data.body
            this.$eventBus.$emit("deliveryCoordinate",res)
          }
        })
      },

数据：

2、查看mineData官网实例，

通过官网实例可以看到。需要固定格式、固定字段：

"type": "FeatureCollection",
"features": []

结合我们后端返回的数据。来套用一下

//添加打点
      this.$eventBus.$on("deliveryCoordinate",res=>{    //bus总线接收传递过来的数据  
//定义jsonData,套用官网的固定字段  
          let jsonData= {
            "type": "FeatureCollection",//必须这么写
            "features": res.data.body,//后端数据
          }
          setTimeout(() => {
//this.deleteAllLayer()  清空打点的方法，下面会写
            this.deleteAllLayer()
this.addTransportation('pointSource',jsonData);我自己定义的打点方法，jsonData是我们传过来的数据，'pointSource'这个字段是形参，在这里随便写的，用来做标记
            this.addTransportation('pointSource',jsonData);
          }, 200);
        })

 addTransportation(type, jsonData){       
        if(jsonData&&window.mapData.mapInstance){
          this.addTransportationSource(type,jsonData);
          this.addTransportationLayer(type);
        }
      },
//source方法。用来获取数据。type是我们自己写的用来标记用，跟下面的source里必须保持一致
  addTransportationSource(type, jsonData){
        window.mapData.mapInstance.addSource(type, {
          "type": 'geojson',
          "data": jsonData,
//下面三行代码是聚合用的
          cluster: true,
          clusterMaxZoom: 15, /* 最大聚合层级 */
          clusterRadius: 50 /* 聚合半径 */
        });
      },
//layer方法。用来