Mapbox渲染大型数据集

我正在使用mapbox构建一个网站,以呈现大约24mb的geojson数据。我将这些数据存储在后端服务器中,API请求大约需要2300ms,显示这些数据的前端地图需要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。

谢谢 狮子座

依赖项:

“babel plugin transform decorators legacy”:“^1.3.4”, “babel插件转换运行时”:“^6.23.0”, “babel-preset-es2015”:“^6.24.1”, “babel-preset-stage-0”:“^6.24.1”, “复制网页包插件”:“4.3.1”, “webpack dotenv plugin”:“^2.0.2”, “animate.css”:“3.6.1”, “axios”:“0.18.0”, “d3”:“4.13.0”, “flexboxgrid”:“6.3.1”, “get json”:“1.0.0”, “不可变”:“3.8.2”, “物料界面”:“0.19.4”, “object assign”:“4.1.0”, “react”:“16.2.0”, “react dom”:“16.2.0”, “react map gl”:“3.2.0”, “react redux”:“5.0.5”, “react router dom”:“4.2.2”, “react router redux”:“5.0.0-alpha.6”, “redux”:“3.6.0”, “redux thunk”:“2.1.0”, “superagent”:“3.8.1”, “topojson”:“3.0.2”