Mapbox отображает большой набор данных

Я строю веб-сайт, используя mapbox для отображения около 24 Мб данных Geojson. Я сохранил эти данные на внутреннем сервере, запрос API занимает около 2300 мс, а карта интерфейса, отображающая эти данные, заняла бы более 10 секунд.

GeoJson - это данные о речном потоке, которые содержат много MultiLineString, Данные очищены.

Вот шаги:

  1. Пользователь открывает сайт
  2. Сайт извлекает данные в конечной точке сервера
  3. Сайт получает извлеченные данные (геойсон - 9 из них)
  4. React создает один слой для каждого набора геоджонов и передает эту информацию в виде состояний в компонент Mapbox.
  5. Mapbox берет эти данные и отображает их, я полагаю, что именно это и занимает большую часть времени.

Вот формат данных: https://eflow.nyc3.digitaloceanspaces.com/class_geo_data/classGeo.json

Мои вопросы:

  1. Какова причина того, что это занимает так много времени для визуализации данных? Это потому, что слишком много отрезков? Я видел более 100 МБ данных, отображаемых за более короткое время.
  2. Какова лучшая практика для рендеринга этого набора данных в 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", "реагировать": "16.2.0", "реагировать-дом": "16.2.0", "реагировать-карта-gl": "3.2.0", "реагировать-избыточно": "5.0.5", "реагировать-маршрутизатор-дом": "4.2.2", "реагировать-router-redux": "5.0.0-alpha.6", "redux": "3.6.0", "redux-thunk": "2.1.0", "superagent": "3.8.1", "topojson": "3.0.2"

Источник

1 ответ

Я не уверен, почему это намного быстрее, но правильный способ сделать это:

  1. разделить мой набор данных на меньшие части
  2. загрузить каждый как слой в mapbox studio и в стиль карты, который вы создали
  3. скачать весь этот файл JSON
  4. визуализировать карту с помощью Mapbox

Это совершенно другой подход, чем мой первоначальный, который заключался в получении данных из моего собственного API, а затем в Mapbox их визуализации. Но это снижает скорость загрузки до 1-2 секунд с 10+ секунд

Источник
Другие вопросы по тегам