百度地图坐标只加载可视范围内的坐标

　　因为客户需求加载的坐标点比较多，然而一次性加载太多点就会整个浏览器都会变卡，所以采用了分区加载的方法。

　　首先，思路其实很简单

　　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