在线 Demo

假设开发中，遇到这样一个需求：“接口返回一片地区内所有的小区的电子围栏，将小区绘制到高德地图上”。很容易写出下面这样的代码：

const map = new Amap.Map();

for (const item of data) {
  const polygon = new AMap.Polygon(item);
  map.add(polygon);
}

效果大致可能就是这样，在实际运行中，很有可能会非常卡顿，因为绘制耗了大量时间，如果在地图上还有事件交互，也可能会非常卡顿。实际业务根本无法使用，这时候就要找办法性能优化，翻阅高德地图的文档示例，可能会发现有“集群”、“海量点”渲染优化等示例，但是实际上在项目中可能还是没法使用（比如这个需求是绘制小区）。

从接口层面来看，很有可能是后端吐出大规模地理信息数据，前端拿到数据后根据产品需求进行渲染，本质上都是在消费数据。最直接的方式是“单次消费全部数据进行全部渲染”，基本上会带来卡顿问题。让我们回到地图本身，当我们在地图上进行交互（比如移动地图、滚动缩放）时，地图看起来好像才会绘制当前视口能看到的地方，或者说就是这一片的瓦片。

所以，从地图本身的瓦片式渲染来看，我们对数据的消费也可以是这种形式，展示“当前视口内可以渲染的数据，当前缩放等级可以看到的数据”，进而大幅减少单次需要渲染的数据，性能自然就上去了。总结一下：

通过地图当前的视口、缩放登记，获取当前可以渲染的数据、被聚合的数据。