问题背景
研发需求是提供离线地图，加载本地文件作为地图底图。后端提供了.shp、.dbf和.prj文件。由于 Openlayers 无法直接渲染shp数据，需要将shp数据格式转化为geojson格式，这可以在在线网站https://mapshaper.org/上实现，而.shp文件中提供了经纬和某些文字，文字注解在.dbf文件中。.shp和.dbf都可以转换为geojson格式。
如果直接使用.shp转换后的geojson的文字信息，使用style.text实现标注，在 Openlayers v4.6.5 版本中，标注文字显示会有部分白色部分。所以需要使用 openlayers 的Overlay来实现。
当数据量很大，需要在 openlayers 上渲染所有的.dbf中的数据时，页面会非常卡顿，甚至放大缩小的功能都不能使用。数据量级就是全国所有的区县一级的名称和经纬度，大概 2800+ 条。
解决方法
碰到这种地图渲染大量数据的第一反应就是聚合显示，但是因为需求中的注解是区县名称，非业务信息，因此这种方式并不合适。但是可以借鉴这种层级显示数据的思路。
具体步骤如下：
-
实时监听地图缩放级别
-
获取当前地图的范围
-
循环遍历数据，判断数据的经纬度是否在当前地图视图范围内。如果是，就调用
Overlay类，显示文字
代码实现如下：
map.on("moveend", () => {
var currZoom