Узнайте, как нарисовать геозону на карте приложения React, а затем проверить, находится ли пользователь в пределах ее границы.
Когда дело доходит до отслеживания местонахождения людей для обеспечения точного и эффективного обслуживания, ничто не сравнится с геозонами. Короче говоря, геозоны — это виртуальные границы вокруг определенных областей интереса.
Одним из наиболее эффективных способов создания таких геозон является TomTom Maps JavaScript SDK. С его помощью вы можете рисовать периметры на карте, выделяя определенные штаты, достопримечательности, места и даже целые страны. Эти границы помогают определить, когда пользователь карты находится внутри или за пределами области или просто рядом. Картографическая технология TomTom также может предупредить вас, когда устройство пользователя пересекает границу.
Геозоны очень полезны во многих областях. Примеры включают отслеживание посылок, направление пользователей в ближайший магазин, помощь туристам оставаться в пределах границ парка и многое другое.
Сегодня давайте рассмотрим, как настроить геозону на карте TomTom.
Для начала используйте TomTom, чтобы настроить обычную карту на веб-сайте. Затем с помощью свойства map.addLayer собрать координаты области в формате GeoJSON и нарисовать периметр. Это создаст видимую геозону, которая соединяет заданные координаты, образуя замкнутую область. И теперь, когда наша геозона установлена, мы можем определить местоположение пользователя относительно граничащей территории.
Чтобы правильно следовать этому руководству, вам необходимо немного знать JavaScript и HTML.
А если вы не знакомы с GeoJSON, ознакомьтесь с нашей вводной статьей здесь.
Теперь давайте рассмотрим, как использовать TomTom SDK и API.
НАСТРОЙКА
Мы используем React для реализации этого приложения.
Во-первых, убедитесь, что на вашем компьютере установлен Node.js. Если вы еще не создавали приложение React, вы можете проверить, установлен ли у вас Node.js, введя следующую команду в свой терминал:
node -v
Если нет, просто зайдите на сайт Node.js, чтобы скачать последнюю версию.
Убедившись, что Node.js установлен, вы можете начать работу с нашим приложением React, выполнив следующую команду:
npx create-react-app tomtom-geofencing
Затем перейдите в папку проекта на терминале:
cd tomtom-geofencing
И теперь вы можете запустить новое приложение с помощью этой команды:
npm run start
УСТАНОВКА БИБЛИОТЕКИ ТОМТОМ
Затем установите TomTom Maps SDK, чтобы просмотреть карту в объектной модели документа (DOM), выполнив следующую команду:
npm i @tomtom-international/web-sdk-maps
Чтобы использовать сервисы TomTom в своем приложении, вам необходимо зарегистрироваться в качестве разработчика. Когда вы регистрируетесь, вы получаете доступ к тысячам бесплатных запросов ежедневно, вы также можете применять их для коммерческого использования. Затем, когда ваше приложение станет популярным, вы сможете просто платить по мере роста.
Обратите внимание, что вы получите ключ API при регистрации своей учетной записи разработчика TomTom. Обратите внимание на этот ключ, потому что он понадобится вам позже в учебнике.
СОЗДАНИЕ КАРТЫ
Теперь, когда вы настроили приложение React и загрузили все необходимые библиотеки, следующим шагом будет настройка карты TomTom для правильного отображения на странице.
Откройте App.js и убедитесь, что вы импортируете все необходимые библиотеки, например:
import "./styles.css";
import "@tomtom-international/web-sdk-maps/dist/maps.css";
import * as ttmaps from "@tomtom-international/web-sdk-maps";
import { useState, useEffect, useRef } from "react";
В первой строке кода выше импортируйте свои стили из внешнего файла style.css. Этот файл содержит стили CSS, необходимые для этого проекта. Следует отметить одну конкретную вещь: используйте .mapDiv для определения высоты вашей карты.
.App {
font-family: sans-serif;
text-align: center;
}
button {
margin: 2rem 0;
}
.mapDiv {
height: 40rem;
}
Импортируйте стили CSS TomTom по умолчанию для карты. Затем импортируйте саму библиотеку карт и переименуйте ее в ttmaps.
Наконец, импортируйте хуки реагирования: useState, useEffect и useRef. Их можно использовать для последовательной обработки и простого управления переменными проекта.
Теперь войдите в функцию вашего приложения и объявите свои переменные, используя наши хуки React:
const mapElement = useRef();
const [mapZoom, setMapZoom] = useState(7);
const [map, setMap] = useState({});
mapElement действует как контейнер карты. Используйте useRef, чтобы прикрепить его непосредственно к DOM. mapZoom позволяет вам установить значение масштабирования вашей карты по умолчанию равным 7, и вы можете изменить значение масштабирования с помощью setMapZoom.
Используйте карту при запуске и изменении карты TomTom в вашем приложении.
Затем используйте useEffect, чтобы инициировать ваши карты с библиотекой карт, которую вы импортировали ранее (ttmaps.map.)
useEffect(() => {
let map = ttmaps.map({
key: "<Your-API-key>",
container: mapElement.current,
center: [ 12.3, 32.992578 ],
zoom: mapZoom
});
setMap(map);
return () => map.remove();
}, []);
Методы ttmaps.map принимают такие параметры, как ключ API.
container описывает, что будет хранить карту в DOM, и в данном случае это элемент mapElement, который мы определили ранее.
center определяет координаты по умолчанию, которые карта отображает при загрузке.
И zoom определяет масштаб карты по умолчанию, используя уже определенный mapZoom.
РИСУЕМ МНОГОУГОЛЬНИК
Затем наметьте место, которое вы хотите оградить (в нашем примере мы используем континентальную часть Соединенных Штатов), на карте с помощью GeoJSON. Затем добавьте кнопку на свою страницу, чтобы активировать функцию под названием Draw. Используйте ref={mapElement}, чтобы добавить карту в div, и .mapDiv, чтобы добавить стили CSS.
Примечание. Вы можете найти аналогичный геоджсон и координаты стран на Датахабе, а затем загрузить данные геоджзона для реализации в других своих проектах.
return (
<div className="App">
<button
onClick={(e) => {
draw();
}}
>
Draw America
</button>
<div ref={mapElement} className="mapDiv"></div>
</div>
);
В функции рисования используйте метод map.addLayer, чтобы нарисовать область на карте. Затем добавьте такие параметры, как идентификатор, тип и источник, содержащие файл geojson.
Внутри источника определите тип как geojson и нарисуйте геометрию как многоугольник. Наконец, добавьте координаты смежных границ США. Краска описывает цвет и непрозрачность.
const draw = () => {
map.addLayer({
'id': Math.random().toString(),
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
"geometry": {
"type": "Polygon",
"coordinates": [
[
[ -123.123779, 48.227039 ], // contig. u.s.
[ -123.318787, 49.000042 ],
[ -121.742592, 49.000267 ],
[ -95.157394, 49.000493 ],
[ -95.157394, 49.390418 ],
[ -94.795532, 49.357334 ],
[ -94.482422, 48.857487 ],
[ -88.36853, 48.314255 ],
[ -84.126389, 46.531937 ],
[ -81.331787, 45.344424 ],
[ -83.034668, 41.910453 ],
[ -79.013672, 42.867912 ],
[ -79.299316, 43.590338 ],
[ -77.305298, 43.761176 ],
[ -74.849854, 45.058001 ],
[ -71.586914, 45.1123 ],
[ -69.213867, 47.480088 ],
[ -67.758179, 47.271775 ],
[ -67.719727, 45.813486 ],
[ -66.780396, 44.785734],
[ -80.628662, 24.417142 ],
[ -97.058716, 25.730633 ],
[ -99.283447, 26.382028 ],
[ -101.480713, 29.678508 ],
[ -102.612305, 29.716681 ],
[ -103.117676, 28.88316 ],
[ -104.699707, 29.649869 ],
[ -106.44104, 31.737511 ],
[ -108.187866, 31.760867 ],
[ -108.193359, 31.325487 ],
[ -111.08551, 31.325487 ],
[ -114.930725, 32.521342 ],
[ -114.724731, 32.711044 ],
[ -124.892578, 31.952453 ],
[ -129.067383, 49.047486 ],
[ -123.123779, 48.227039 ]
]
]
}
}
},
'layout': {},
'paint': {
'fill-color': '#ff0000',
'fill-opacity': 0.5
}
})
map.setCenter([parseFloat(-123.123779), parseFloat(48.227039 )]);
};
ПОСТРОЕНИЕ ГЕОЗОН
Служба геозоны позволяет провести виртуальную границу. Затем приложения могут использовать эту виртуальную границу для обработки бизнес-логики.
Вы также можете создать динамическое ограждение вокруг географической области, используя координаты, как и ранее. И на этот раз вы также можете динамически проверять отмеченный участок в дополнение к рисованию фигур. Например, используя широту или долготу определенного местоположения, вы можете проверить, находится ли оно в выделенной области.
Для этого сначала получите ключ администратора. Это часть учетных данных для выполнения запросов API. Затем используйте Postman, чтобы отправить запрос POST в API TomTom для регистрации вашего ключа администратора (см. ниже). Этот запрос включает тело с секретной фазой. В этом примере мы используем «my_secret_key».
{
"secret": "my_secret_key"
}
Мы также используем наш ключ API в качестве параметра, поэтому все это привязано к одной учетной записи.
https://api.tomtom.com/geofencing/1/register?key=Ваш_API_Key
Ответ, который мы получаем, содержит наш adminKey.
СОЗДАНИЕ НОВОГО ПРОЕКТА
Теперь, когда у вас есть новый ключ, вы можете создать проект, относящийся к нарисованной вами геозоне.
Для этого отправьте еще один POST-запрос на регистрацию нового проекта:
https://api.tomtom.com/geofencing/1/projects/project?key=${apiKey}&adminKey=${adminKey}
Отправьте его с названием проекта в качестве тела:
{
"name": "United States Map"
}
Ответ содержит название проекта и идентификатор.
СОЗДАНИЕ ГЕОЗОН
Чтобы создать геозону по нужным координатам, сначала нужно отправить POST-запрос на адрес:
https://api.tomtom.com/geofencing/1/projects/${projectId}/fence?key=${apiKey}&adminKey=${adminKey} This request contains this body: { "name": "Our location", "type": "Feature", "geometry": { "radius": 75, "type": "Point", "shapeType": "Circle", "coordinates": [-123.123779, 48.227039] } }
Приведенный выше код содержит точные детали для создания забора вокруг области. Здесь у вас есть широта и долгота вашего местоположения. Затем создайте геозону (круг) вокруг этого места с радиусом 75 (в метрах). Ответ запишет и повторит запрос.
ЗАПРОС ОТЧЕТА
Служба отчетов о геозонах TomTom может определить, находится ли определенная точка (широта и широта) внутри или вне ранее созданной вами геозоны. Он принимает широту и долготу определенной точки и идентификатор вашего проекта. Ответ показывает, находится ли точка внутри или снаружи ограждений. Кроме того, он включает в себя конкретное расстояние между локацией и забором.
Ответ выглядит следующим образом:
{
"summary": {
"project": "c2f56e6d-8395-4aa2-bf64-e36f7b7d229c",
"type": "Point",
"coordinates": [
41.670966,
2.750529,
0.0
],
"range": 0.0
},
"inside": {
"type": "FeatureCollection",
"features": []
},
"outside": {
"type": "FeatureCollection",
"features": [
{
"id": "0c803717-b862-4548-ab47-20bf544b2d84",
"name": "New location",
"distance": 3298398.0,
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
12.138017,
6.137388
]
},
"properties": {
"maxSpeedKmh": 70
}
}
]
}
}
Запрос принимает точку (41.670966, 2.750529) в качестве параметра с идентификатором продукта (c2f56e6d-8395–4aa2-bf64-e36f7b7d229c). В данном случае это показывает нам, что точка находится за забором на расстоянии 3 298 398,0 метров.
Эти сервисы позволяют добавлять в приложения определенную бизнес-логику и варианты использования. Например, вы можете определить, доставляет ли конкретный ресторан в текущее местоположение пользователя или пользователь идет рядом с определенным магазином и должен получить маркетинговое предложение.
Вы можете получить доступ к демонстрации этого руководства в CodeSandbox.
СЛЕДУЮЩИЕ ШАГИ
В этой статье мы обсудили, как настроить наше приложение React и установить карты TomTom. Мы узнали, как инициализировать и отображать карту при загрузке в нашем компоненте React. Затем мы использовали метод addLayer, который идет прямо из коробки с TomTom, чтобы рисовать границы с помощью geojson в форме многоугольника. И, наконец, мы изучили геозоны и то, как использовать сервис TomTom Geofencing Report, а также как динамически обрабатывать виртуальные границы.
Теперь, когда вы знаете, как добавлять геозоны вокруг мест на картах, вы можете использовать их для улучшения своих приложений. Вы можете оповещать своих пользователей, когда они входят в указанную зону или покидают ее, помогать им найти ближайший магазин или ресторан для своих нужд, подбирать пассажиров в разрешенной зоне и многое другое.
Благодаря тысячам бесплатных ежедневных запросов (даже для коммерческого использования) и гибкой системе оплаты, соответствующей вашему росту, TomTom всегда готов поддержать вас. Зарегистрируйтесь, чтобы поэкспериментировать с TomTom JavaScript SDK сегодня.
Эта статья изначально была опубликована на странице developer.tomtom.com/blog.
