您的当前位置:首页正文

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

2024-01-19 来源:帮我找美食网

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方法。用来用来定义点的样式
      addTransportationLayer(type){
        let _this = this;
        _this.allLayers.push(type);
//非聚合的时候

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top