在使用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数据转换成矢量切片，能够减小文件的大小，提高渲染效率。