Opnelayers:海量图形渲染之聚合

最近由于在工作中涉及到了海量图形渲染的问题,因此我开始研究相关的解决方案。在这个过程中聚合也是一个经常会被人提到的解决方案,我一直对聚合是怀有疑虑的,我认为其无法有效的解决我所面临的问题。

一、基本使用方式

聚合的基本使用方式,可以参考我之前写的这篇文章:Openlayers:实现聚合-CSDN博客

二、尝试使用聚合来优化河流三角网

这篇文章我主要还是想要探讨一下是否能使用聚合来解决我在开发过程中遇到的实际。

我需要渲染一个像这样的河流三角网,由于三角网中的图形数量过多导致无法直接进行渲染。

最简单的方式当然还是用点作为三角网的聚合图形,这种效果实现起来很简单,并且性能上也有保障。

JavaScript 复制代码
  const polygonSource = new VectorSource({
    url: "src/data/河流三角网/BJ.json",
    format: new GeoJSON({
      dataProjection: "EPSG:4547",
      featureProjection: "EPSG:4326",
    }),
  });

  const clusterSource = new Cluster({
    distance: 40,
    source: polygonSource,
    geometryFunction: function (feature) {
      return feature.getGeometry().getPolygon(0).getInteriorPoint();
    }
  });

  const polygonLayer = new VectorLayer({
    properties: {
      name: "多边形图层",
      id: "polygonLayer",
    },
    source: clusterSource,
  });

  window.map.addLayer(polygonLayer);

但是上面的这种效果是没有办法满足我的需求的,我是希望在聚合后渲染的图形依旧可以保持河流的轮廓。

为了实现这样的效果,我筹划了一个方案。就是借助turf.js中的union方法将参与聚合的三角网格进行合并,将合并后的大多边形作为渲染图形。

JavaScript 复制代码
  const polygonSource = new VectorSource({
    url: "src/data/河流三角网/BJ.json",
    format: new GeoJSON({
      dataProjection: "EPSG:4547",
      featureProjection: "EPSG:4326",
    }),
  });

  const clusterSource = new Cluster({
    distance: 40,
    source: polygonSource,
    geometryFunction: function (feature) {
      // 我这里使用的多边形几何类型是MultiPolygon
      return feature.getGeometry().getPolygon(0).getInteriorPoint();
    },
    createCluster: function (point, features) {
      if (features.length > 1) {
        const polygons = turf.featureCollection(
          features.map(f =>
            turf.polygon(f.getGeometry().getPolygon(0).getCoordinates())
          )
        );
        const unionPolygon = turf.union(polygons);
        return new Feature({
          geometry: new Polygon(unionPolygon.geometry.coordinates),
          features: features,
        });
      } else {
        return features[0];
      }
    },
  });

  const polygonLayer = new VectorLayer({
    properties: {
      name: "多边形图层",
      id: "polygonLayer",
    },
    source: clusterSource,
  });

  window.map.addLayer(polygonLayer);

很可惜,最终呈现出来的结果非常的糟糕,主要有以下的几个问题:

  1. 当初始渲染和切换缩放级别时,聚合计算量很大,导致加载速度慢。
  2. 合并后的多边形多是不规则的,其实也不甚美观。

3.合并之后出现了很多空隙,上不知晓是什么原因导致的。

三、总结

最后在我想对聚合方法做一个总结,首先必须承认的是聚合确实一种有效的解决海量图形渲染问题的方案。

但是聚合也是存在着明显的局限性,它主要适用于两种情况:

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

因此如果要求较为简单,那么我还是比较建议使用聚合去渲染海量图形的,反之则应该去寻求其它的解决办法。

参考资料

  1. OpenLayers v10.5.0 API - Class: Cluster
  2. Turf.js中文网 | Turf.js中文网
相关推荐
小杨同学yx1 小时前
前端三剑客之Css---day3
前端·css
星月心城2 小时前
Promise之什么是promise?(01)
javascript
二川bro2 小时前
第二篇:Three.js核心三要素:场景、相机、渲染器
开发语言·javascript·数码相机
Mintopia3 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九3 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬3 小时前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia4 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1894 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴4 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee5 小时前
JavaScript 语句和函数
开发语言·前端·javascript