uniapp使用map组件app端实现不同缩放级别时标记点聚合分裂

最近公司项目需求需要对设备在地图上面进行监控，并在当设备一定距离时进行聚合和分裂，引用地图使用的是官网提供的map组件，至于组件怎么使用请查阅官网详细介绍，其实官网有提供api进行标记点聚合但是只支持app-nvue和微信小程序，而且官方也有推荐使用map组件尽量使用nvue模式，但是我使用的是vue编译模式临时改变编译模式工作量太大。

jh.png

为了满足app的需求于是对app端进行处理，思路是：
①对每一个标记进行经纬度判断如果距离较近就在前一个标记点对象上添加一个计数属性并且加一。

Canvasmap.prototype.init_calculation = function(data,scale){
    var distance=this.regionchange_scale(scale)
    var res 
    this.BufferArray=[]
    //第一次计算坐标数组为空，将第一个元素直接push进去
    if(this.markers.length==0){ 
        this.markers.push(data) 
    }else{
        for(let i=0;i<this.markers.length;i++){
            res=this.Calculate_distance(this.markers[i].longitude,this.markers[i].latitude,data.longitude,data.latitude)
            this.BufferArray.push(res)
        }  
        let index= this.BufferArray.findIndex(item=>item<distance)
        if(index==-1){  
            this.markers.push(data)
        }else{ 
            this.markers[index].longitude=(this.markers[index].longitude+data.longitude)/2
            this.markers[index].latitude=(this.markers[index].latitude+data.latitude)/2
            this.markers[index].quantity++
        }
    } 
};

②罗列在不同缩放级别时合并分裂的距离给出对应返回值
③在组件中调用得到处理后的每个坐标合并设备的数量在使用canvas进行画图，得到临时路径，将临时路径进行暂存，然后替换每个标记点的iconPath

            async regionchange(){
                await this.rmfile()
                var mapdata=null
                let map = uni.createMapContext('map');
                 map.getScale({
                    success: async res => {
                         var beginTime = +new Date();
                        if(this.map_scale!=res.scale){
                             this.map_scale=res.scale
                            mapdata=this.canvas_map.regionchange_distance(JSON.stringify(this.list),res.scale)//深拷贝对象，因为后续会改变赋值对象的值从而影响到list原数据
                            for(let i=0;i<mapdata.markers.length;i++){
                              if(mapdata.markers[i].quantity>1){
                                  await this.draw(mapdata.markers[i].quantity).then(res=>{
                                      if(res){
                                            mapdata.markers[i].iconPath=res
                                      }
                                   })
                              }else{
                                  mapdata.markers[i].iconPath="/static/img/onselect.png"
                              }
                            } 
                             var endTime = +new Date();
                              this.markers=mapdata.markers
                              console.log('标记数量'+this.list.length,"合并分裂用时时共计"+(endTime-beginTime)+"ms");
                         }
                     },
                     fail: (data, code) => {
                           console.log('fail' + JSON.stringify(data));
                     }
               })
            },

④注：在canvasmap.js里面regionchange_scale方法处理距离判断合并距离和图片大小有很大关系，我这里使用的是64x64，如果不是这个尺寸可能要自己在处理一下合并的合适距离。

暂时模拟数据测试合并效率数据量少的情况下100ms以内，10000个数据量在200-300ms，主要消耗在图片临时存储这里，如果有更好的处理方法提高效率希望大佬能给出建议，让萌新的我学习学习。

git仓库源码（非公司代码，为线下独立完成的组件）：https://gitee.com/black_slp/agg_split