Mapbox渲染大型数据集

Question

我正在使用mapbox构建一个网站来渲染大约24mb的geojson数据。我将这些数据存储在后端服务器中，API请求大约需要2300毫秒，显示这些数据的前端映射需要10秒以上。

GeoJson是河流数据，其中包含许多MultiLineString。数据被清理干净。

以下是步骤：

1. 用户打开网站
2. 网站从服务器端点获取数据
3. 网站收到提取的数据（geojson - 其中9个）
4. React为每个geojson集创建一个图层，并将这些信息作为状态传递给Mapbox组件
5. Mapbox获取这些数据并呈现它，我相信这是大部分时间都在这里。

以下是数据格式： https://eflow.nyc3.digitaloceanspaces.com/class_geo_data/classGeo.json

我的问题：

1. 这需要花费很长时间来呈现数据的原因是什么？是因为线段太多了吗？我已经看到在更短的时间内呈现了超过100mb的数据。
2. 在Mapbox中渲染此数据集的最佳做法是什么？

我正在使用react-map-gl，不确定哪个版本的mapbox gl实际上正在使用。

由于 利奥

依赖关系：

＆＃34; babel-plugin-transform-decorators-legacy＆＃34;：＆＃34; ^ 1.3.4＆＃34;，     ＆＃34; babel-plugin-transform-runtime＆＃34;：＆＃34; ^ 6.23.0＆＃34;，     ＆＃34; babel-preset-es2015＆＃34;：＆＃34; ^ 6.24.1＆＃34;，     ＆＃34; babel-preset-stage-0＆＃34;：＆＃34; ^ 6.24.1＆＃34;，     ＆＃34; copy-webpack-plugin＆＃34;：＆＃34; 4.3.1＆＃34;，     ＆＃34; webpack-dotenv-plugin＆＃34;：＆＃34; ^ 2.0.2＆＃34;，     ＆＃34; animate.css＆＃34;：＆＃34; 3.6.1＆＃34;，     ＆＃34; axios＆＃34;：＆＃34; 0.18.0＆＃34;，     ＆＃34; d3＆＃34;：＆＃34; 4.13.0＆＃34;，     ＆＃34; flexboxgrid＆＃34;：＆＃34; 6.3.1＆＃34;，     ＆＃34; get-json＆＃34;：＆＃34; 1.0.0＆＃34;，     ＆＃34;不可变＆＃34;：＆＃34; 3.8.2＆＃34;，     ＆＃34; material-ui＆＃34;：＆＃34; 0.19.4＆＃34;，     ＆＃34;对象分配＆＃34;：＆＃34; 4.1.0＆＃34;，     ＆＃34;反应＆＃34;：＆＃34; 16.2.0＆＃34;，     ＆＃34; react-dom＆＃34;：＆＃34; 16.2.0＆＃34;，     ＆＃34; react-map-gl＆＃34;：＆＃34; 3.2.0＆＃34;，     ＆＃34; react-redux＆＃34;：＆＃34; 5.0.5＆＃34;，     ＆＃34; react-router-dom＆＃34;：＆＃34; 4.2.2＆＃34;，     ＆＃34; react-router-redux＆＃34;：＆＃34; 5.0.0-alpha.6＆＃34;，     ＆＃34; redux＆＃34;：＆＃34; 3.6.0＆＃34;，     ＆＃34; redux-thunk＆＃34;：＆＃34; 2.1.0＆＃34;，     ＆＃34; superagent＆＃34;：＆＃34; 3.8.1＆＃34;，     ＆＃34; topojson＆＃34;：＆＃34; 3.0.2＆＃34;

Answer 1

我不确定为什么这么快，但正确的方法是：

1. 将我的数据集分成较小的夹头
2. 将每个作为图层加载到mapbox studio中，并加载到您创建的地图样式中
3. 下载整个json文件
4. 使用Mapbox
渲染地图

这是一种完全不同于我原始方法的方法，即从我自己的API获取数据然后让Mapbox呈现它。但它将负载速度从10秒以下降低到1-2秒