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

首先，思路其实很简单

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))
        {
            // 在范围内
            // 可以继续为所欲为了
        }
    }
}

这样就出效果啦，虽然不是很完美，但基本上也能满足了。

附上GeoUtils.js的相关介绍

类 BMapLib.GeoUtils

GeoUtils类的入口。 该类提供的都是静态方法，勿需实例化即可使用。
源文件: GeoUtils.js.

类

方法

<static> {Number} BMapLib.GeoUtils.degreeToRad(Number)

• 参数:

• {degree} Number

• 度

• 返回值:

• {Number} 弧度

<static> {Number} BMapLib.GeoUtils.getDistance(Point, Point)

• 参数:

• {point1} Point

• 点对象

• {point2} Point

• 点对象

• 返回值:

• {Number} 两点之间距离，单位为米

<static> {Number} BMapLib.GeoUtils.getPolygonArea(polygon)

• 参数:

• {Polygon|Array } polygon

• 多边形面对象或者点数组

• 返回值:

• {Number} 多边形面或点数组构成图形的面积

<static> {Number} BMapLib.GeoUtils.getPolylineDistance(polyline)

• 参数:

• {Polyline|Array } polyline

• 折线对象或者点数组

• 返回值:

• {Number} 折线或点数组对应的长度

<static> {Boolean} BMapLib.GeoUtils.isPointInCircle(point, circle)

• 参数:

• {Point} point

• 点对象

• {Circle} circle

• 圆形对象

• 返回值:

• {Boolean} 点在圆形内返回true,否则返回false

<static> {Boolean} BMapLib.GeoUtils.isPointInPolygon(point, polygon)

• 参数:

• {Point} point

• 点对象

• {Polyline} polygon

• 多边形对象

• 返回值:

• {Boolean} 点在多边形内返回true,否则返回false

<static> {Boolean} BMapLib.GeoUtils.isPointInRect(point, bounds)

• 参数:

• {Point} point

• 点对象

• {Bounds} bounds

• 矩形边界对象

• 返回值:

• {Boolean} 点在矩形内返回true,否则返回false

<static> {Boolean} BMapLib.GeoUtils.isPointOnPolyline(point, polyline)

• 参数:

• {Point} point

• 点对象

• {Polyline} polyline

• 折线对象

• 返回值:

• {Boolean} 点在折线上返回true,否则返回false

• 参数:

• {radian} Number

• 弧度

• 返回值:

• {Number} 度