Mapbox 渲染大型数据集
Mapbox render large dataset
我正在使用 mapbox 构建一个网站来渲染大约 24mb 的 geojson 数据。我将这些数据存储在后端服务器中，API 请求大约需要 2300 毫秒，而显示这些数据的前端地图将花费 10 多秒。
GeoJson 是河流数据，其中包含许多 MultiLineString。数据被清理。
步骤如下：
- 用户打开网站
- 站点在服务器端点获取数据
- 站点接收获取的数据（geojson - 其中 9 个）
- React 为每个 geojson 集创建一层，并将这些信息作为状态传递给 Mapbox 组件
- Mapbox 获取这些数据并进行渲染，我相信这是花费最多时间的地方。
数据格式如下：
https://eflow.nyc3.digitaloceanspaces.com/class_geo_data/classGeo.json
我的问题：
- 为什么要花这么长时间来呈现数据？是因为线段太多了吗？我见过在更短的时间内呈现超过 100mb 的数据。
- 在 Mapbox 中渲染此数据集的最佳做法是什么？
我正在使用 react-map-gl，不确定实际使用的是哪个版本的 mapbox gl。
谢谢
狮子座
依赖关系：
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "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",
"immutable": "3.8.2",
"material-ui": "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"
我不确定为什么这么快，但正确的方法是：
- 将我的数据集分成更小的块
- 将每个作为图层加载到 mapbox studio 中，并加载到您创建的地图样式中
- 下载整个 json 文件
- 使用 Mapbox 渲染地图
这与我原来的方法完全不同，我原来的方法是从我自己的 API 获取数据，然后让 Mapbox 渲染它。但是它将加载速度从 10+ 秒
降低到 1-2 秒
我正在使用 mapbox 构建一个网站来渲染大约 24mb 的 geojson 数据。我将这些数据存储在后端服务器中，API 请求大约需要 2300 毫秒，而显示这些数据的前端地图将花费 10 多秒。
GeoJson 是河流数据，其中包含许多 MultiLineString。数据被清理。
步骤如下：
- 用户打开网站
- 站点在服务器端点获取数据
- 站点接收获取的数据（geojson - 其中 9 个）
- React 为每个 geojson 集创建一层，并将这些信息作为状态传递给 Mapbox 组件
- Mapbox 获取这些数据并进行渲染，我相信这是花费最多时间的地方。
数据格式如下： https://eflow.nyc3.digitaloceanspaces.com/class_geo_data/classGeo.json
我的问题：
- 为什么要花这么长时间来呈现数据？是因为线段太多了吗？我见过在更短的时间内呈现超过 100mb 的数据。
- 在 Mapbox 中渲染此数据集的最佳做法是什么？
我正在使用 react-map-gl，不确定实际使用的是哪个版本的 mapbox gl。
谢谢 狮子座
依赖关系：
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "copy-webpack-plugin": "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", "immutable": "3.8.2", "material-ui": "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"
我不确定为什么这么快，但正确的方法是：
- 将我的数据集分成更小的块
- 将每个作为图层加载到 mapbox studio 中，并加载到您创建的地图样式中
- 下载整个 json 文件
- 使用 Mapbox 渲染地图
这与我原来的方法完全不同，我原来的方法是从我自己的 API 获取数据，然后让 Mapbox 渲染它。但是它将加载速度从 10+ 秒
降低到 1-2 秒