Mapbox大数据量渲染策略

在使用mapbox渲染大数据的情况下可以采用以下策略来提高渲染效率。

GeoJSON source参数设置

• buffer

  如果数据能在一个图斑里面能够显示（点），不需要缓冲区，可以将buffer参数设置为0.较小的缓存区可以减矢量切片周边渲染错误（buffer 0-128）

• tolerance

  当数据源是线或者面时，设置这个参数将会起用Douglas–Peucker algorithm 算法，对数据进行简化。

  default-tolerance 0.375

high-tolerance 3.50

• cluster

  在小缩放级别的时候，可以考虑对密集点数据使用cluster，如下图

  
  large-geojson-clustering

• maxzoom

  将GeoJJON数据源的maxzoom设置为比默认值18小的级别。这样的设置将提高地图平移与缩放的性能。对于大多数点数据来说，zoom值为12时，既能保持精度与速度。

• minzoom

  这个值不是source的参数，是layer的参数。设置这个参数主要是因为如果geoJSON的数据足够多的话，zoom如果过小，屏幕的像素的点都没数据多的话，再缩小级别也没什么效果。

数据清理

• 去除对于可视化不是必须的字段。
• 让经纬度坐标的精度在小数点后6位以下。
• 删除geojson中的空格，减少文件大小

清理前

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "objectid": 1,
        "id": 1,
        "uniqueid": "1695.00",
        "address": "230",
        "suffix": " ",
        "street": "Stratford Ave",
        "onstr": "Friendship Ave",
        "fromstr": "Stratford Ave",
        "tostr": "Fairmount St /S",
        "side": "Side",
        "site": "1",
        "spp": "Acer platanoides",
        "dbh": 5,
        "cond": "Good",
        "trunks": 1,
        "mt": "Training Prune",
        "observe": "None",
        "hardscape": "N",
        "inspect": "N",
        "klir": "Vehicle",
        "utilities": "Y",
        "grow": "Tree Lawn",
        "spacesize": 2,
        "loctype": "Street",
        "pghdbsdeTree_Keeperarea": 8,
        "staff": "Kara Masak",
        "inv_date": "2005-02-14T00:00:00.000Z",
        "inv_time": " ",
        "inspect_dt": "2005-02-14T00:00:00.000Z",
        "inspect_tm": "10:18:32",
        "active": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -79.9334671524,
          40.4611126031
        ]
      }
    }
    // additional features
  ]
}

清理后：

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"dbh":5},"geometry":{"type":"Point","coordinates":[-79.93345,40.46111]}}]}

使用GeoJSON Url

使用geojson url能够减小浏览器的内存开销。使用js对象将geojson塞进source会增加内存开销。

map.addSource('some id', {
  type: 'geojson',
  data: 'https://mydomain.mydata.geojson'
});

设置Symbol--> layers--> icon-allow-overlap

如果icon-allow-overlap为true，即使图标与其他先前绘制的符号发生碰撞，该图标也将可见（所有点可见）。同时能够在平移和缩放密集点的时候，能够提高图层的渲染速度。

false-allow-icon-overlap true-allow-icon-overlap

超大文件处理

如果超大文件（超过500，000）可以使用以下方法来提高渲染速度。

数据源切分

可以将原有的数据切分成2到3部分，能够将加载与渲染能力提高1倍或3倍。 例子

使用矢量切片

将geojson数据转换成矢量切片，能够减小文件的大小，提高渲染效率。