mapboxgl - 用webgl展示海量数据，是否可行？

最新推荐文章于 2024-07-29 13:14:22 发布

置顶

qingyafan

最新推荐文章于 2024-07-29 13:14:22 发布

阅读量5.1k

点赞数 12

分类专栏： WebGIS 文章标签： WebGL Mapbox 海量数据 Openlayers

本文链接：https://blog.csdn.net/qingyafan/article/details/105593733

版权

本文探讨了使用WebGL和Mapboxgl进行海量数据渲染的可行性。通过实验证明，直接渲染大量数据会导致浏览器崩溃。解决方案包括数据化简、分块加载以及使用矢量瓦片技术。Mapboxgl的矢量瓦片方案在处理大数据量时表现出色，结合LOD策略，能有效应对WebGL的渲染限制。

摘要由CSDN通过智能技术生成

下面的代码可以在我的Github中找到：https://github.com/QingyaFan/data-visualization

先说结论：不可行。具体原因如下。

以后的文章我们将不仅仅局限于Openlayers，适合业务的技术才是好的技术，有的功能其他的库实现的比Openlayers好，我们也会聊，比如这次的mapboxgl。这个也源于Openlayers对于WebGL支持的缓慢进度：Openlayers憋了好久，终于憋出了WebGL的渲染器，然而只支持点要素类型，要是线和面类型的要素，数据量级一上去，就没法用了。我们看看隔壁的Mapboxgl，诞生之日起就是WebGL渲染，而且openlayers新出的WebGLPoint Layer使用的WebGL渲染样式规则也借鉴了Mapboxgl的表达式（Expression）。所以，为什么不用mapboxgl呢？当我想到这个想法的时候，真香定理仿佛在向我招手。于是我掏出压箱底的321万的线要素数据 ⚡️ 来一场硬核的测试。

线要素321万

1、初始化一幅地图

Mapbox的一些理念和Openlayers不太一样，在使用之前，我们要看有哪些异同。

Mapbox中数据源（Source）不从属于图层（Layer），而是直接由Map对象管理
Layer可以选择要渲染的Source，所以我们很自然想到，是否可以多个Layer使用一个Source呢？当然可以！Openlayers中也可以，只不过我们之前没那么做过
Mapbox中样式是Paint表示，Openlayers中是Style
在用321万的数据之前，我们先来一波常规操作，用19万的全球城市点数据熟悉一下mapbox的流程：

let url = 'http://localhost:8000/world-cities.geojson';
this.map.addSource('cities-population', {
    type: 'geojson', data: url });
this.map.addLayer({
   
    'id': 'cities-population',
    'type': 'circle',
    'source': 'cities-population',
    'paint': {
   
        'circle-radius': [
            "interpolate",
            ["linear"],