[JS]百度地图大量图层加载时的懒加载

最近在做一个地图的可视化打点，需要加载的图层太多了

全部绘制图层时，性能变的异常缓慢。所以我用了如下方法，来简单实现了一个图层懒加载

供大家参考

首先，设置地图的moveend、zoomend、touchend事件的监听

map.addEventListener("moveend", mapchange)
map.addEventListener("zoomend", mapchange)
map.addEventListener("touchend", mapchange)

然后就是编写监听函数，总体思路就是

获取地图的可视区域矩形

判断需要展示的图层的各个点，是否在显示范围中，若有一个点在显示范围，即说明该图层要进行显示

然后就是对图层进行显示

监听函数如下

function mapchange(t, e) {
    console.log("Start load")
    if (allxq.size != 0) {
        map.clearOverlays() //清除全部图层
        var showarea = map.getBounds() //获取可视区域
        for (var xq of allxq) { //遍历全部需要展示的图层
            var points = xq[1].points
            for (var j = 0; j < points.length; j++) { //遍历图层个点
                if (showarea.containsPoint(points[j])) {  //判断点是否在可视区域范围
                    map.addOverlay(xq[1].rect)  //图层显示
                    break
                }
            }
        }
    }
}

演示截图如下：