问题背景

研发需求是提供离线地图，加载本地文件作为地图底图。后端提供了.shp、.dbf和.prj文件。由于 Openlayers 无法直接渲染shp数据，需要将shp数据格式转化为geojson格式，这可以在在线网站https://mapshaper.org/ (opens new window)上实现，而.shp文件中提供了经纬和某些文字，文字注解在.dbf文件中。.shp和.dbf都可以转换为geojson格式。

如果直接使用.shp转换后的geojson的文字信息，使用style.text实现标注，在 Openlayers v4.6.5 版本中，标注文字显示会有部分白色部分。所以需要使用 openlayers 的Overlay来实现。

当数据量很大，需要在 openlayers 上渲染所有的.dbf中的数据时，页面会非常卡顿，甚至放大缩小的功能都不能使用。数据量级就是全国所有的区县一级的名称和经纬度，大概 2800+ 条。

解决方法

碰到这种地图渲染大量数据的第一反应就是聚合显示，但是因为需求中的注解是区县名称，非业务信息，因此这种方式并不合适。但是可以借鉴这种层级显示数据的思路。

具体步骤如下：

• 实时监听地图缩放级别

• 获取当前地图的范围

• 循环遍历数据，判断数据的经纬度是否在当前地图视图范围内。如果是，就调用Overlay类，显示文字

代码实现如下：

map.on("moveend", () => {
  var currZoom = map.getView().getZoom();

  if (currZoom >= 9) {
    const len = mk_all_county_json.features.length;
    const countyNames = mk_all_county_json.features;

    const extent = map.getView().calculateExtent(map.getSize());
    countyNames.forEach((featureData) => {
      if (!i.includes(featureData.properties.AD_CODE)) {
        i.push(featureData.properties.AD_CODE);
      }
      const coords = [
        featureData.properties.X_COORD,
        featureData.properties.Y_COORD,
      ];
      if (ol.extent.containsCoordinate(extent, coords)) {
        addOverlay(coords, featureData.properties.NAME, "popMarker_countyName");
      } else {
        $(`#marker_${featureData.properties.NAME}`).remove();
      }
    });
  } else {
    $(".popMarker_countyName").remove();
  }
});

效果如下：