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

---

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

---

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

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