百度地图api的使用记录

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()的方法太慢了，我现在一共五千个对象，都清理完大概要小一分钟的时间，也就是说，重画一遍这些线，要花费小一分钟的时间，但是这里是前端，要实时响应的，所以实在接受不了这样的速度，于是我就想了两个方法。

1. 多加几个DOM，每个DOM都初始化地图，然后把不同的线路画到不同的地图里面，每次点击操作只用隐藏和显示DOM即可，但是问题时我这里不只是几个图，每个月要六张图，后面新的月份来了还要加DOM，感觉太繁琐了，而且那么多的DOM资源占用估计也是个问题。
2. 直接叠加地图上去，每画一次线路图就叠加一张地图上去。这个的问题和一开始的一样，新地图的话不是直接new一下就是一个新的了，地图好像是直接绑定再DOM上的，new出来的地图在重新画线路的时候，看起来没有去判断之前的重复线路，但是我觉得本质上还是判断了，因为加载速度已经说明了一切，跟一开始一样慢。

最后是怎么解决的呢，回到开始，重新load，每次画图都重新load一遍，但是在初始化polyline的时候，使用一个Math.random()稍微做一下修改:

let line = new BMapGL.Polyline(pointCollection, {
                    strokeColor: EmissionNum2Color2(v[type], type),
                    strokeWeight: 3+Math.random()
                });

这样就跟之前的线路相比有了细微的差别，就会识别成为两条路了，这样就直接覆盖加载了，实测5000条路时间只要五秒左右，虽然还是没有实施响应，但是这个可比小一分钟快多了。