1.基础使用
// 调用百度地图
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.380637, 22.925178), 8);
map.enableScrollWheelZoom(true);
map.setMapStyleV2({styleId: '7a00e20978f2abd5e4b1cbace7b8d5c1'});
//从json中获取点画图常用方法
$.getJSON("lines/lines03.json", function (rs) {
$.each(rs, (k, v) => {
let linename = k;
lineNames.push(linename);
let pointCollection = [];
let i = 0;
//点集合画线
v["ps"].forEach((item) => {
let point = new BMapGL.Point(item["x"], item["y"]);
pointCollection.push(point);
});
//线存储到Map
emissionAir.forEach((item) => {
let line = new BMapGL.Polyline(pointCollection, {
strokeColor: EmissionNum2Color2(v[item], item),
strokeWeight: 3
});
lineMap.set(linename + item, line);
});
})
});
// 绘制方法
map.addOverlay(line);// 添加单个要素
map.clearOverlays(); // 清除所有要素
2.遇到的问题
本来是想把所有的线都存到一个HashMap对象里面,然后每次再画的时候直接从里面取出polyline对象绘制就可以,不用每次都load一遍json文件。但是出现了问题,百度地图相同的对象在一个地图中只能加载一次,如果要再加载一次的话,就会自动清除之前的对象,然后再加载新的对象,这个逻辑也没啥问题,毕竟都不用手动判断相同对象了,但是当对象的数量多起来的话,问题就暴露了:
百度地图clearOverlays()的方法太慢了,我现在一共五千个对象,都清理完大概要小一分钟的时间,也就是说,重画一遍这些线,要花费小一分钟的时间,但是这里是前端,要实时响应的,所以实在接受不了这样的速度,于是我就想了两个方法。
- 多加几个DOM,每个DOM都初始化地图,然后把不同的线路画到不同的地图里面,每次点击操作只用隐藏和显示DOM即可,但是问题时我这里不只是几个图,每个月要六张图,后面新的月份来了还要加DOM,感觉太繁琐了,而且那么多的DOM资源占用估计也是个问题。
- 直接叠加地图上去,每画一次线路图就叠加一张地图上去。这个的问题和一开始的一样,新地图的话不是直接new一下就是一个新的了,地图好像是直接绑定再DOM上的,new出来的地图在重新画线路的时候,看起来没有去判断之前的重复线路,但是我觉得本质上还是判断了,因为加载速度已经说明了一切,跟一开始一样慢。
最后是怎么解决的呢,回到开始,重新load,每次画图都重新load一遍,但是在初始化polyline的时候,使用一个Math.random()稍微做一下修改:
let line = new BMapGL.Polyline(pointCollection, {
strokeColor: EmissionNum2Color2(v[type], type),
strokeWeight: 3+Math.random()
});
这样就跟之前的线路相比有了细微的差别,就会识别成为两条路了,这样就直接覆盖加载了,实测5000条路时间只要五秒左右,虽然还是没有实施响应,但是这个可比小一分钟快多了。