Слои против маркеров

Если вам нужна информация о какой-либо другой реализации React MapBox, я бы просмотрел некоторые из моих других статей, потому что есть приличный шанс, что я рассмотрел ее.

Проблемы:

В одном из моих более ранних приложений и в статье я столкнулся с проблемой производительности одного из моих проектов, которую я хочу исправить в этом сообщении в блоге. В то время я не знал, какое решение было, но с тех пор я немного погрузился в мир слоев и нашел решение моей проблемы с производительностью.

"Проблема"

Если вы протестируете эту ссылку, вы увидите, что я загружаю множество точек данных в виде маркеров и всплывающих окон. Проблема в том, что я загружаю безумное количество локаций, например 700 или что-то в этом роде. Это означает, что каждый раз, когда вы каким-то образом взаимодействуете с картой, вы учитываете перемещение всех этих точек, создавая сверхмедленную карту.

Одна проблема в том, что это просто координаты, а не GeoJSON. А компоненты Urbica работают на GeoJSON со стандартизованным форматированием.

Решение:

Я предполагаю, что решение состоит в том, чтобы переформатировать мои горячие точки в Нью-Йорке в GeoJSON. Возможно, в другой раз. В любом случае, проверьте Урбику.



urbica / react-map-gl
Библиотека компонентов React для Mapbox GL JS. Mapbox GL JS - это библиотека JavaScript, которая отображает интерактивные карты с… github.com



Самое замечательное в Urbica - это то, что вы легко можете работать с разными типами геоданных (GeoJSON, Geotiff’s, WMT). Сейчас мы просто собираемся использовать GeoJSON, а некоторые другие я рассмотрю позже.

Шаги:

Хорошо, так что ты знаешь упражнение.

  1. create-react-app layers
  2. cd layers
  3. npm install --save mapbox-gl @urbica/react-map-gl
  4. Загрузите этот файл GeoJSON по этой ссылке:

И добавьте его в каталог src приложения и импортируйте. Этот набор данных огромен, в нем есть буквально все фонари Бойсе. Я использовал это, чтобы продемонстрировать, насколько лучше функциональность тысяч точек из слоя GeoJSON по сравнению с 700 точками из слоя маркера.

Итак, нам нужно, чтобы наш импорт выглядел так. Мы собираемся использовать компоненты Source / Layer:

Теперь настройте файл App.js следующим образом:

Что мы собираемся делать:

По сути, я зашел в Интернет и нашел один из первых наборов GeoJSON, которые были «точками», то есть набор GeoSON, в котором есть координаты точек (широта и долгота), а не многоугольники, как в прошлый раз.

Я просто хотел подчеркнуть разницу в производительности карты. Это очень важно, если вы хотите, чтобы люди действительно использовали вашу карту.

Итак, когда у вас есть файл App.js, похожий на тот, что указан выше, приступайте npm start для проверки его функциональности.

Это намного лучше, и когда вы увеличиваете и уменьшаете масштаб, точки появляются и исчезают автоматически, поэтому карта не загромождена точками.

Самое приятное то, что с компонентами Layer / Source вы все еще можете получить доступ к объекту, который является точкой, и прикрепить к нему всплывающее окно, как в учебнике Where-Fi, который я сделал.

Я покажу вам, как это сделать в будущем.

Заключение:

Урбика потрясающая. Такой хороший ресурс для слоев и загрузки функций GeoSpatial (подробнее я расскажу позже).

Когда у вас есть огромное количество точек данных, лучше всего использовать слой, чтобы ваша карта не отставала как сумасшедшая.