Пока я искал несколько хороших библиотек карт для React, мое внимание привлекла react-leaflet.
react-leaflet — это библиотека react, которая является полной переработкой leaflet, которая является библиотекой JavaScript с открытым исходным кодом для мобильных интерактивных карт.
Библиотеки карт React
Помимо react-leaflet, у меня было еще несколько вариантов. Почему я не решил использовать эти библиотеки?
-
React Simple Maps
Отличная библиотека в целом. Она очень проста в использовании и имеет достойную документацию с некоторыми примерами. Кроме того, как следует из названия, она очень легкая. Однако она не подходит для моей цели — отображения точного местоположения с помощью маркеров. Да, это можно сделать с помощью React Simple Maps, но мне пришлось бы переделывать весь шаблон карты, что не стоило затраченных усилий и времени, в то время как уже существуют библиотеки, в которых есть карты с отличными шаблонами по умолчанию. -
React Mapbox GL
Достойная библиотека, но не рекомендуется. Оригинальная библиотека Mapbox хорошо сделана и имеет отличные примеры, но переписанная для React не очень хорошо поддерживается. У нее почти нет примеров, и в сети не так много ресурсов. Документация также не является адекватной. Если вы не продвинутый, опытный разработчик, это не лучший вариант. -
React Google Maps
Казалось бы, все отлично. Однако у меня не было возможности по-настоящему испытать его, поскольку активация API-ключа требует подписки. Если вы можете позволить себе подписку, то, безусловно, воспользуйтесь ею!
Почему именно react-leaflet?
Я бы не сказал, что react-leaflet — самая надежная библиотека по сравнению с конкурентами (например, react google maps). Тем не менее, в ней есть немного всего, и этого было достаточно для моих целей.
-
Хороший шаблон карты. Под шаблоном я имею в виду фактический дизайн карты. Мне нужна была карта с точными аннотациями улиц и хорошей цветовой гаммой. Я бы сказал, что он не дотягивает до Google Maps API или Mapbox GL, когда дело доходит до фактического дизайна, но он сделал свою работу.
-
Хорошая документация с хорошими примерами. Честно говоря, документация не самая лучшая, но она была достаточно приличной, чтобы с ней можно было работать. Имеющимся примерам действительно не хватает объяснений, но сам код довольно легко понять даже с первого взгляда. Несмотря на то, что качество документации и примеров не было первостепенным, поскольку мой второй по привлекательности вариант, react mapbox gl, сильно отставал, когда дело доходило до примеров, мне пришлось выбрать react-leaflet.
Установка
К сожалению, даже несмотря на свои плюсы, react-leaflet имеет не самую лучшую документацию для новичков. Даже начиная с установки и настройки карты, есть много того, что не упоминается в документации. Поэтому я решил предоставить руководство по отладке установки для потенциальных проблем/глюков.
Установка
Если у вас есть время, прочитайте страницу установки, но если нет, просто выполните эти команды в терминале. Если у вас даже нет приложения react, сначала запустите приложение react.
npm install leaflet
******install react-leaflet after installing leaflet******
npm install react-leaflet
После установки этих модулей импортируйте основные компоненты.
import { MapContainer, TileLayer, useMap } from 'react-leaflet'
Настройка
Скопируйте и вставьте следующий код в ваше приложение react, чтобы отобразить простую карту с маркером.
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
Если у вас все работает нормально, отлично!
Но если вы столкнулись с какой-либо из этих проблем, прочитайте руководство по отладке ниже.
Руководство по отладке
Ошибка модуля
Если вы получаете ошибку, как показано ниже, не волнуйтесь!
./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| useEffect(function updatePathOptions() {
| if (props.pathOptions !== optionsRef.current) {
> const options = props.pathOptions ?? {};
| element.instance.setStyle(options);
| optionsRef.current = options;
Вот решение.
Откройте ваш package.json
и измените
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
на
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
Карта не отображается должным образом
- Решение 1
Добавьте следующую строку в ваш код.
import 'leaflet/dist/leaflet.css';
Не работает? Решение 2 должно сработать!
- Решение 2
Перейдите к вашему файлу index.html
.
В <header>
добавьте следующий код.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
Добавьте следующий код в App.css
.
.leaflet-container {
width: 100wh;
height: 100vh;
}
Если кто-то столкнется с другими проблемами на этапе установки, я буду готов помочь. Пожалуйста, опишите вашу проблему в разделе комментариев. Счастливой отладки!