[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
                }
            }
        }
    }
}

演示截圖如下：