Руководство о том, как добавить карту с точкой на свой сайт.
Поскольку Google делает это настолько простым, многие веб-сайты содержат карты только с одной точкой. Тем не менее, недостатки включают в себя необходимость ключа API и доступ к платному доступу после того, как было сделано определенное количество вызовов. Отличные новости — поскольку вы уже используете веб-приложение, вы можете выполнить работу самостоятельно без дополнительных затрат.
К счастью, помимо того, что это бесплатно, добавить карту с точкой на ваш веб-сайт довольно просто, независимо от того, хотите ли вы базовую вставку для своего HTML или готовы создать свою собственную в React.
Базовая вставка
Это сравнительно простое решение работает для таких сайтов, как WordPress, одностраничных приложений (например, Angular, Vue.js и React) и базовых HTML-страниц. Начните с вставки этого iframe в исходный код HTML.
<iframe src="https://one-point-map.herokuapp.com/?lat=0&long=0" width="800px" height="800px" />
Изменение значений в URL-адресе src изменяет расположение и внешний вид виджета карты. Чтобы настроить параметры запроса, которые вы включаете в свой URL-адрес, поэкспериментируйте со следующими параметрами:
| Param Name | Description | Default | |---------------|--------------------------|---------| | lat* | Latitude of point | | | long/lon* | Longitude of point | | | zoom | Desired zoom level | 14 | | icon_url | URL of icon | | | icon_scale | Scale factor of icon | 1 | | show_popup | Shows/hides popup | true | | show_controls | Shows/hides controls | true | | show_context | Shows/hides right click | true | | show_basemap | Shows/hides map switcher | true | | title | Text displayed in popup | | * required query params
Пример пользовательского значка, масштаба и масштаба: https://one-point-map.herokuapp.com/?lat=38.477783&long=-99.728264&zoom=7&icon_url=https://openlayers.org/assets/theme/img/logo70.png&icon_scale=5
Пользовательская сборка React
Для пользовательской сборки React ознакомьтесь с ol-kit, библиотекой, объединяющей React и OpenLayers.
Чтобы создать пустой проект React (после установки узла), используйте версию 4.0.3 из react-scripts, поскольку ol-kit не предоставляет собственных полифилов webpack v5. Вставьте это в свой терминал:
npx [email protected] point-map cd point-map npm install --save --save-exact [email protected]
Затем запустите эту команду, чтобы установить ol-kit и его одноранговые зависимости:
npm i @bayer/ol-kit ol react react-dom styled-components @material-ui/core @material-ui/icons @material-ui/styles --save
Замените содержимое App.js указанным ниже файлом. Он включает в себя все необходимое для отображения точки на карте с использованием данных строки запроса.
В этой схеме показаны стили карты по умолчанию с самым базовым кодом. Перед параметризацией необходимо ответить на несколько основных вопросов:
- Когда вызывается
onMapInit?
Как только инициализируется карта OpenLayers. Поскольку экземпляр карты передается вниз, его можно изменить и вызвать для него методы, такие как добавление точки. Это упрощение запуска карты является наиболее ценной функцией ol-kit. - Как выглядит точка на карте?
Среда OpenLayers помещает все объекты (в данном случае точку) в слои карты (отсюда и название OpenLayers). сильный>). Иерархия работает следующим образом:mapвладеет одним или несколькимиlayers, каждыйlayerвладеет только однимsource, который, в свою очередь, может владеть несколькимиfeatures(точками). Ознакомьтесь с подклассами в этих документах OpenLayers, если хотите получить более полную картину. - Что делает
map.getView()?
По умолчанию ol-kit центрирует карту на 48 смежных штатах США. Если вы добавите точку где-либо еще в мире, вы, вероятно, захотите, чтобы карта переориентировалась на то место, где была размещена точка.NullОстров (погодный буй, а не настоящий остров) служит отличным местом для проверки, так как его значенияlat = 0, long = 0делают его очень легким для запоминания.
Редактирование подкомпонентов карты
Этот код включает ReactHooks useState и useEffect для управления видимостью дочерних компонентов React. Вот общие изменения приведенного выше фрагмента:
const [showBasemapContainer, setShowBasemapContainer] = useState(true) const [showContextMenu, setShowContextMenu] = useState(true) const [showControls, setShowControls] = useState(true) const [showPopup, setShowPopup] = useState(true)
...
useEffect(() => {
const queryParams = window.location.search.split(/([?&])/g).filter(e => e.length > 1).reduce((acc, str) => {
const stringSplit = str.split('=')
acc[stringSplit[0]] = stringSplit[1]
return acc
}, {})
if (queryParams.show_basemap && queryParams.show_basemap === 'false') {
setShowBasemapContainer(false)
}
if (queryParams.show_popup && queryParams.show_popup === 'false') {
setShowPopup(false)
}
if (queryParams.show_context && queryParams.show_context === 'false') {
setShowContextMenu(false)
}
if (queryParams.show_controls && queryParams.show_controls === 'false') {
setShowControls(false)
}
}, []) // [] it will run on mount, but at no other time; URL params won't change without a refresh
...
<Map onMapInit={onMapInit} fullScreen>
{showBasemapContainer && <BasemapContainer />}
{showContextMenu && <ContextMenu />}
{showControls && <Controls />}
{showPopup && <Popup />}
</Map>
Добавление поддержки нескольких других параметров запроса приводит к следующему компоненту React. Значок и его размер, уровень масштабирования и заголовок, отображаемый во всплывающем окне, можно настраивать; каждый компонент, закрывающий карту, можно скрыть с помощью параметра запроса.
Некоторые вещи, которые следует отметить:
point.setStyle()изменяет внешний вид точки:
ВызовsetStyleпозволяет применять к точкам бесконечное количество стилей; этот пример только демонстрирует, как изменить стиль точки по умолчанию на значок/изображение. Для получения дополнительной информации о функциях стилей в OpenLayers ознакомьтесь с этой документацией.olFeature({ ... })принимает любые настраиваемые свойства:
Добавить данные во всплывающее окно очень просто — какой-либоgeometry(например, точка или линия) определяет все функции, которые затем могут иметь другие значения. применяемый. Хотя ol-kit поставляется с предварительно настроенным отображением свойстваtitleво всплывающем окне, различные конфигурации изменяют поведение всплывающего окна.
Большинство проектов, которым нужна карта, вероятно, не будут использовать параметры запроса URL для управления видимостью данных или компонентов, но это должно быть хорошей отправной точкой.
Прекратите платить за API Google; размещайте собственное программное обеспечение, будьте гибкими и не стесняйтесь обращаться с любыми вопросами.
Спасибо, что читаете 😃
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
