openlayers处理大量Overlay渲染问题
# 问题背景
研发需求是提供离线地图,加载本地文件作为地图底图。后端提供了.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();
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
效果如下:
编辑 (opens new window)
上次更新: 2024/11/12, 10:01:20