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

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

  首先,思路其实很简单

  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 

原文地址:https://www.cnblogs.com/LinTianwen/p/13070770.html