最近公司項目需求需要對設(shè)備在地圖上面進(jìn)行監(jiān)控，并在當(dāng)設(shè)備一定距離時進(jìn)行聚合和分裂，引用地圖使用的是官網(wǎng)提供的map組件，至于組件怎么使用請查閱官網(wǎng)詳細(xì)介紹，其實官網(wǎng)有提供api進(jìn)行標(biāo)記點聚合但是只支持app-nvue和微信小程序，而且官方也有推薦使用map組件盡量使用nvue模式，但是我使用的是vue編譯模式臨時改變編譯模式工作量太大。

jh.png

為了滿足app的需求于是對app端進(jìn)行處理，思路是：
①對每一個標(biāo)記進(jìn)行經(jīng)緯度判斷如果距離較近就在前一個標(biāo)記點對象上添加一個計數(shù)屬性并且加一。

Canvasmap.prototype.init_calculation = function(data,scale){
    var distance=this.regionchange_scale(scale)
    var res 
    this.BufferArray=[]
    //第一次計算坐標(biāo)數(shù)組為空，將第一個元素直接push進(jìn)去
    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++
        }
    } 
};

②羅列在不同縮放級別時合并分裂的距離給出對應(yīng)返回值
③在組件中調(diào)用得到處理后的每個坐標(biāo)合并設(shè)備的數(shù)量在使用canvas進(jìn)行畫圖，得到臨時路徑，將臨時路徑進(jìn)行暫存，然后替換每個標(biāo)記點的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)//深拷貝對象，因為后續(xù)會改變賦值對象的值從而影響到list原數(shù)據(jù)
                            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('標(biāo)記數(shù)量'+this.list.length,"合并分裂用時時共計"+(endTime-beginTime)+"ms");
                         }
                     },
                     fail: (data, code) => {
                           console.log('fail' + JSON.stringify(data));
                     }
               })
            },

④注：在canvasmap.js里面regionchange_scale方法處理距離判斷合并距離和圖片大小有很大關(guān)系，我這里使用的是64x64，如果不是這個尺寸可能要自己在處理一下合并的合適距離。

暫時模擬數(shù)據(jù)測試合并效率數(shù)據(jù)量少的情況下100ms以內(nèi)，10000個數(shù)據(jù)量在200-300ms，主要消耗在圖片臨時存儲這里，如果有更好的處理方法提高效率希望大佬能給出建議，讓萌新的我學(xué)習(xí)學(xué)習(xí)。

git倉庫源碼（非公司代碼，為線下獨立完成的組件）：https://gitee.com/black_slp/agg_split