Openlayers：海量图形渲染之聚合

迩来由于在工作中涉及到了海量图形渲染的标题，因此我开始研究相干的解决方案。在这个过程中聚合也是一个常常会被人提到的解决方案，我一直对聚合是怀有疑虑的，我以为其无法有效的解决我所面对的标题。
一、根本使用方式

聚合的根本使用方式，可以参考我之前写的这篇文章：Openlayers：实现聚合-CSDN博客
二、实行使用聚合来优化河流三角网

这篇文章我重要照旧想要探讨一下是否能使用聚合来解决我在开辟过程中遇到的现实。
我须要渲染一个像这样的河流三角网，由于三角网中的图形数量过多导致无法直接举行渲染。

最简单的方式固然照旧用点作为三角网的聚合图形，这种效果实现起来很简单，而且性能上也有保障。

1.   const polygonSource = new VectorSource({
2.     url: "src/data/河流三角网/BJ.json",
3.     format: new GeoJSON({
4.       dataProjection: "EPSG:4547",
5.       featureProjection: "EPSG:4326",
6.     }),
7.   });
9.   const clusterSource = new Cluster({
10.     distance: 40,
11.     source: polygonSource,
12.     geometryFunction: function (feature) {
13.       return feature.getGeometry().getPolygon(0).getInteriorPoint();
14.     }
15.   });
17.   const polygonLayer = new VectorLayer({
18.     properties: {
19.       name: "多边形图层",
20.       id: "polygonLayer",
21.     },
22.     source: clusterSource,
23.   });
25.   window.map.addLayer(polygonLayer);

复制代码

但是上面的这种效果是没有办法满意我的需求的，我是希望在聚合后渲染的图形仍旧可以保持河流的表面。
为了实现这样的效果，我筹划了一个方案。就是借助turf.js中的union方法将到场聚合的三角网格举行归并,将归并后的大多边形作为渲染图形。

1.   const polygonSource = new VectorSource({
2.     url: "src/data/河流三角网/BJ.json",
3.     format: new GeoJSON({
4.       dataProjection: "EPSG:4547",
5.       featureProjection: "EPSG:4326",
6.     }),
7.   });
9.   const clusterSource = new Cluster({
10.     distance: 40,
11.     source: polygonSource,
12.     geometryFunction: function (feature) {
13.       // 我这里使用的多边形几何类型是MultiPolygon
14.       return feature.getGeometry().getPolygon(0).getInteriorPoint();
15.     },
16.     createCluster: function (point, features) {
17.       if (features.length > 1) {
18.         const polygons = turf.featureCollection(
19.           features.map(f =>
20.             turf.polygon(f.getGeometry().getPolygon(0).getCoordinates())
21.           )
22.         );
23.         const unionPolygon = turf.union(polygons);
24.         return new Feature({
25.           geometry: new Polygon(unionPolygon.geometry.coordinates),
26.           features: features,
27.         });
28.       } else {
29.         return features[0];
30.       }
31.     },
32.   });
34.   const polygonLayer = new VectorLayer({
35.     properties: {
36.       name: "多边形图层",
37.       id: "polygonLayer",
38.     },
39.     source: clusterSource,
40.   });
42.   window.map.addLayer(polygonLayer);

复制代码

很惋惜，终极出现出来的效果非常的糟糕，重要有以下的几个标题：

• 当初始渲染和切换缩放级别时，聚合盘算量很大，导致加载速度慢。
  
• 归并后的多边形多是不规则的，着实也不甚雅观。
  

3.归并之后出现了很多空隙，上不知晓是什么缘故原由导致的。

三、总结

末了在我想对聚合方法做一个总结，首先必须承认的是聚合确实一种有效的解决海量图形渲染标题的方案。
但是聚合也是存在着明显的范围性，它重要适用于两种情况：

• 在渲染效果上允许使用一个标识来代表一个地区内的图形。
  
• 在盘算聚合的过程中没有太过复杂的盘算。
  

因此如果要求较为简单，那么我照旧比较发起使用聚合去渲染海量图形的，反之则应该去寻求别的的解决办法。
参考资料

• OpenLayers v10.5.0 API - Class: Cluster
  
• Turf.js中文网 | Turf.js中文网