Топ-5 библиотек карт для React в 2021 году

Рекомендуемые библиотеки карт для вашего приложения React

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

Итак, в этой статье я представлю 5 лучших библиотек карт для React со сравнением функций, чтобы помочь вам выбрать лучшую для вашего следующего проекта.

0. Бонус: бит

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

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

1. React Simple Maps - легкие простые карты для базовых нужд

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

React Simple Maps не полагается на всю библиотеку d3, но включает библиотеки d3-geo и topojson, что делает React Simple Maps очень легким.

Плюсы

• Эта библиотека отображает карту в формате SVG, что упрощает работу с HTML.
• Возможность расширения с помощью других компонентов React.
• Легкая библиотека.

Минусы

• Проблемы с производительностью при работе с обширными картографическими данными.
• Меньшее сообщество разработчиков.

Это хорошо поддерживаемая библиотека, она имеет более 44 тысяч загрузок NPM в неделю и более 2,3 тысяч звезд на GitHub.

Предположим, вы новичок и пытаетесь добавить простой компонент карты React для основных нужд. В таком случае я бы порекомендовал вам React Simple Maps.

Вы можете легко установить его с помощью npm или пряжи:

npm install --save react-simple-maps
yarn add --save react-simple-maps

2. Google Map React - React Maps с Google Map API

Библиотека Google Map React - одна из самых популярных библиотек карт, доступных для React. Эта библиотека полностью изоморфна и может выполнять рендеринг со стороны сервера.

Google Map React имеет более 5 000 звезд на GitHub и около 184 000 загрузок NPM еженедельно.

Плюсы

• Поддерживает пользовательские маркеры карты с эффектами наведения.
• Использует богатый содержанием API карт Google для получения данных карты.
• Изоморфный рендеринг - поддержка рендеринга карт как на стороне клиента, так и на стороне сервера.
• Если API не отвечает, Google Map React может отображать основные компоненты карты локально в браузере.

Минусы

• Требуется настройка учетной записи разработчика Google и ключа API.
• Для производства и широкого использования необходимо приобрести Google Map Service.

Если вы ищете удобный компонент карты для интеграции с вашим приложением React, Google Map React - идеальное решение, и его можно установить с помощью npm или yarn.

npm install --save google-map-react
yarn add google-map-react

3. Deck.gl - мощная библиотека карт с анимацией.

Deck.gl - одна из самых современных высокопроизводительных библиотек карт React, доступных бесплатно. Он основан на WebGL и способен визуализировать крупномасштабные картографические данные.

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

Плюсы

• Широко расширяемая и настраиваемая библиотека.
• Эффективный рендеринг и обновление больших наборов данных.
• Интерактивная обработка событий, такая как выбор, выделение и фильтрация.
• Встроенная поддержка различных типов слоев, таких как значки, многоугольники, тексты; и различные виды, такие как от первого лица, орфографические.
• Поддерживает интеграцию с основными поставщиками базовых карт, включая Mapbox, Google Maps и другие.

Минусы

• Высокие требования к памяти со стороны клиентских компьютеров для визуализации карты.
• Меньшая совместимость с браузером и меньшая кроссплатформенная поддержка.

Deck.gl имеет более 45 тысяч загрузок в неделю и более 8 тысяч звезд на GitHub. Он предоставляет хорошую документацию, включая все подробности о его функциях и установке.

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

Вы можете легко установить Deck.gl с помощью NPM или Yarn:

npm install deck.gl --save
yarn add deck.gl

Примечание. Рекомендуется выполнить тест производительности и тест удобства использования для приложения после интеграции этой библиотеки.

4. React Leaflet - мобильные адаптивные карты для базовых потребностей

React Leaflet - это простая библиотека карт с готовой поддержкой настройки слоев.

Эта библиотека включает в себя существующую библиотеку Leaflet javascript как компонент React, что делает ее простой и удобной для мобильных устройств.

Плюсы

• Простая библиотека с тонко настроенными базовыми функциями.
• Кроссбраузерная и платформенная поддержка.
• Настройки слоя.
• Мобильная отзывчивость.

Минусы

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

React Leaflet имеет более 149 тысяч загрузок NPM в неделю и 3,7 тысячи звезд на GitHub.

Вы можете использовать NPM или Yarn для установки React Leaflet:

npm install react react-dom leaflet
npm install react-leaflet
yarn add react react-dom leaflet
yarn add react-leaflet

5. Карты голубей - карты, ориентированные на производительность

Pigeon Maps - это облегченная библиотека карт, разработанная с основной целью предоставить расширяемый механизм карт, ориентированный на производительность и ориентированный на React.

Pigeon Maps поставляются с Open Street Maps (OSM), MapTiler и еще несколькими поставщиками фрагментов карты. Но он также позволяет интегрироваться с поставщиками настраиваемых листов карты.

Плюсы

• Легкий и быстрый рендеринг карты.
• Поддержка поставщика пользовательских фрагментов карты.
• Оптимизированные для мобильных устройств элементы управления картой.

Минусы

• Меньшая расширяемость с другими компонентами.
• Расширенная настройка карты невозможна.

Piegon Map имеет 3,1 тыс. Звезд на GitHub с более чем 3000 загрузок GitHUb в неделю.

Если вы ищете гибкую, мобильную и оптимизированную для производительности библиотеку карт, Pigeon Map - ваш выбор.

Вы можете легко установить Pigeon Map с помощью NPM или Yarn:

npm install —-save pigeon-map
yarn add pigeon-maps

Последние мысли

Вышеупомянутые библиотеки карт - это лишь подмножество многих доступных для React. Тем не менее, я представил 5 тщательно подобранных библиотек вместе с их плюсами и минусами. Вы можете найти их популярность на GitHub в таблице ниже.

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

Спасибо за чтение!!!

Учить больше