百度地圖坐標只加載可視范圍內的坐標

　　因為客戶需求加載的坐標點比較多，然而一次性加載太多點就會整個瀏覽器都會變卡，所以采用了分區加載的方法。

　　首先，思路其實很簡單

　　1.先獲取當前百度地圖可視范圍內的左上左下右下右上的4個頂點，然后塞入一個多邊形對象里：

　　var bounds = map.getBounds();                            //獲取地圖可視區域
　　var sw = bounds.getSouthWest();                         //獲取西南角的經緯度(左下端點)
　　var ne = bounds.getNorthEast();                           //獲取東北角的經緯度(右上端點)
　　var wn = new BMap.Point(sw.lng, ne.lat);             //獲取西北角的經緯度(左上端點)
　　var es = new BMap.Point(ne.lng, sw.lat);               //獲取東南角的經緯度(右下端點)

　　var polygon = new BMap.Polygon([
　　　　new BMap.Point(sw.lng,sw.lat),//左下
　　　　new BMap.Point(wn.lng,wn.lat),//左上
　　　　new BMap.Point(ne.lng,ne.lat),//右上
　　　　new BMap.Point(es.lng,es.lat)//右下
　　], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

　　2.我們需要一個方法判斷你的點是否在該范圍內（需要引用百度地圖的GeoUtils.js）：

　　//判斷點是否在范圍內
　　function IsInPolygon(x,y) {
    　　let point = new BMap.Point(x, y);
    　　if (BMapLib.GeoUtils.isPointInPolygon(point, polygon)) {
      　　  console.log("在區域內");
      　　  return true
   　　 } else {
   　　     console.log("不再區域內");
   　　     return false
  　　  }
　　}

　　3.添加縮放監聽和拖動監聽，然后在監聽里循環判斷你的坐標數據，如果在該范圍就渲染出來，否則就不渲染：

　　map.addEventListener("dragend",listenerFunc);
　　map.addEventListener("zoomend",listenerFunc);
　　function listenerFunc() {
　　    //監聽地圖
　　    for(let i=0;i<pointList.length;i++){
　　        if(IsInPolygon(pointList[i].x,pointList[i].y)){
　　            map.addOverlay(new BMap.Marker(pointList[i]));
　　        }
　　    }
　　}

　　這樣就出效果啦。但是如果縮放等級比較大、顯示的東西非常多的時候還是會卡的，所以還是點聚合比較流暢點，

但是點聚合還是有點難用的，我就是顯示坐標用了點聚合，顯示坐標label文本框就用了這種方式，

監聽如果縮放等級>14時顯示文本框。

 

附上GeoUtils.js的百度網盤鏈接：

鏈接：https://pan.baidu.com/s/1xFbkCE4H1zCfLlxnasFWmw
提取碼：cdt3