在上一篇说到10000个数据用时300ms左右，这里可以举报作者谎报数据了，为什么呢，各位看官你细听分说，因为当时测试的是生成两个标记图片的10000个数据，所以耗时大概300ms就说的过去了，经过检查300ms主要有这几个部分产生消耗，分别是：①删除临时存储图片时会产生大概50-100ms,看图片多少因为我的操作是直接删除所有图片;②canvas画图每张图片会产生55ms左右；③init_calculation方法处理10000个数据时产生消耗。那么我也就是在这三个方面对代码进行了优化。
因为canvas画的图片是一个临时路径所以没办法必须得进行存储，当然图片大小基本是2000字节左右存储的时间大概5ms可以忽略不计，然后有的朋友会说万一很多图片呢，那也会是很大的消耗，确实，但是别急处理之后就不会有那么多图片了。
优化处理一：初次加载的时候是直接精准定位到一个标记点，这个时候我只需要处理这一个标记点和其他标记之间是否存在合并的情况， 没有的话就根本不用进行画图存储的操作，有的话也就只需要处理一张图片。
调用以及渲染标记点的优化
mapdata=this.canvas_map.init_mapdata(JSON.stringify(this.Variable.data),this.on_id,this.scale)
this.equipMentname=mapdata.equipMentdata.markers.name
this.latitude= mapdata.equipMentdata.markers.latitude
this.longitude= mapdata.equipMentdata.markers.longitude
if(mapdata.markers.quantity>1){
buffer_obj={}
buffer_obj.key_id=mapdata.markers.id
buffer_obj.quantity=mapdata.markers.quantity
this.markers_id.push(buffer_obj)
await this.draw(mapdata.markers.quantity,mapdata.markers.id).then(res=>{
if(res){
mapdata.markers.iconPath=res
}
})
}
初始化处理的优化
Canvasmap.prototype.init_calculation = function(data,markers,scale){
this.markers=null
var distance=this.regionchange_scale(scale)
var res
this.markers=markers
this.BufferArray=[]
for(let i=0;i<data.length;i++){
res=this.Calculate_distance(this.markers.longitude,this.markers.latitude,data[i].markers.longitude,data[i].markers.latitude)
if(res<distance){
console.log(data[i])
this.markers.quantity++
}
}
};
优化处理二：前面说到存储图片和画图消耗比较大，于是这边处理是每画一次图片会按标记点的特有id，对应标记数记录quantity和存储路径进行存储到数组里面，那么在下一次遇到这个id时会先去数组里面查找如果已经存在但是quantity有改变那么我们进行画图更新这时我们只删除一张图片而不是之前删除所有存储的图片；不存在这个id那就从头画图和存储并记录到数组；如果各个单位都没有改变那么我们就直接复用，因为这个时候图片还是存在内存里面直接根据id拿路径显示就可以了，就和vue中diff算法处理虚拟dom有点类似。
//对比最新标记和存储的标记数据进行对比是否为重复标记
let diff_id=this.markers_id.findIndex(item=>item.key_id==mapdata.markers[i].id)
if(mapdata.markers[i].quantity>1){
if(diff_id!=-1&&this.markers_id[diff_id].quantity!=mapdata.markers[i].quantity){ this.markers_id[diff_id].quantity=mapdata.markers[i].quantity
await this.rmfile(this.markers_id[diff_id].path)
await this.draw(mapdata.markers[i].quantity,this.markers_id[diff_id].key_id).then(res=>{
if(res){
mapdata.markers[i].iconPath=res
}
})
//如果之前没有存在过这个标记那么直接push新路径
}else if(diff_id==-1){
this.markers_id.push({
'key_id':mapdata.markers[i].id,
'quantity':mapdata.markers[i].quantity
})
await this.draw(mapdata.markers[i].quantity,mapdata.markers[i].id).then(res=>{
if(res){
mapdata.markers[i].iconPath=res
}
})
//否则直接复用
}else{
mapdata.markers[i].iconPath=this.markers_id[diff_id].path
}
}else{
mapdata.markers[i].iconPath="/static/img/onselect.png"
}
优化处理三：因为地图的缩放级别是不断在变化的，我们不可能每次都计算所有的标记点，看不到的就可以假装不存在，所以对标记进行筛选每次只处理视野范围内的标记
//获取地图可视经纬度范围，对不在视野范围内的标记去除（提升效率3）
getRegion(map,list){
let mapsection_data=[]
return new Promise((resolve, reject)=>{
map.getRegion ({
success(res) {
let N_longitude=res.northeast.longitude
let N_latitude=res.northeast.latitude
let S_longitude=res.southwest.longitude
let S_latitude=res.southwest.latitude
for(let i=0;i<list.length;i++){
if(list[i].markers.longitude<N_longitude&&list[i].markers.latitude<N_latitude&&list[i].markers.longitude>S_longitude&&list[i].markers.latitude>S_latitude){
mapsection_data.push(list[i])
}
}
resolve(mapsection_data)
}
})
})
},
优化处理四：前面还说到为什么图片的数量会变的很少，而且是越来越少，因为每次都进行了记录，但是当缩放级别越来越小，这时候视野越广要处理的标记点会越来越多，是有这么个问题，所以考虑之后决定在按地市到省份地理位置进行处理，不过在几万个数据计算所有标记点的合并情况也是很有压力的，我的处理方式是在第一次打开当前标记点时另外异步一个方法开始计算，这样等地图到达级市，省级的时候应该已经处理完，便可以直接拿数据走流程了。
getRegeo(data){
return new Promise((resolve, reject) => {
this.myAmapFun = new amapFile.AMapWX({key:'0ac92fa7d5fe9244fa0139b16a3a2c21'});
this.myAmapFun.getRegeo({
location:''+data.markers.longitude+','+data.markers.latitude,
success: (data)=>{
let province=data[0].regeocodeData.addressComponent
let province_index=this.province.findIndex(item=>item.markers.name==province.province)
if(province_index!=-1){
this.province[province_index].markers.quantity++
let city_index=this.province[province_index].city.findIndex(item=>item.markers.name==province.city)
if(city_index>-1){
this.province[province_index].city[city_index].markers.quantity++
}else{
this.province[province_index].city.push({
"markers":{
"latitude": data[0].latitude,
"longitude": data[0].longitude,
"iconPath": "/static/img/onselect.png",
"width": 32,
"height":32,
"quantity":1,
"id": province.adcode,
"title":province.city+"设备",
"name": province.city,
"address":province.city
}})
}
}
resolve(this.province)
},
fail: function(info){
console.log(info)
}
})
});
},
但是问题就在这个，这个是通过高德api接口去获取定位，等他处理完上万个数据黄花菜都凉了，当前只是模拟数据，最终可以和后台约定好数据结构直接将数据返回给你，可以在进入页面之前就拿到，一顿操作下来我这边算是比较流畅了。
另外页面上的模糊搜索功能如果要使用还需自行进行处理，组件是没有问题，代码里面是通过名字字段name进行搜索。
方法可能不是最优但是也能够将就，如有想法可另行修改，代码已经更新到git仓库，可以去上一篇底部链接获取。
