정확하고 효율적인 서비스를 제공하기 위해 사람들의 위치를 추적하는 것에 관한 한 지오펜스를 능가하는 것은 없다. 간단히 말해 지오펜스는 특정 관심 영역 주변의 가상 경계입니다.
이러한 지오펜스를 만드는 가장 효율적인 방법 중 하나는 TomTom Maps JavaScript SDK를 사용하는 것입니다. 이 도구를 사용하면 지도에 주변 지역을 그려서 특정 주, 랜드마크, 위치, 심지어 국가 전체를 강조 표시할 수 있습니다. 이러한 경계는 지도 사용자가 영역 내부 또는 외부에 있거나 단순히 근처에 있는 경우를 결정하는 데 도움이 됩니다. TomTom의 매핑 기술은 사용자의 장치가 국경을 넘을 때 사용자에게 경고할 수도 있습니다.
지오펜스는 많은 분야에서 큰 도움이 된다. 그 예로는 추적 패키지, 사용자들을 가장 가까운 가게로 안내, 등산객들이 공원 경계 내에 머물 수 있도록 돕는 것 등이 있다.
오늘은 TomTom 지도에서 지오펜스를 설정하는 방법에 대해 알아보겠습니다.
시작하려면 TomTom을 사용하여 웹 사이트에 일반 지도를 설정하십시오. 그런 다음 map.addLayer 특성을 사용하여 GeoJSON 형식으로 영역의 좌표를 수집하고 둘레를 그립니다. 이것은 주어진 좌표를 연결하여 닫힌 영역을 형성하는 가시 지오펜스를 생성할 것이다. 그리고 이제 지오펜스(geofence)를 통해 국경을 기준으로 사용자의 위치를 결정할 수 있습니다.
이 튜토리얼을 제대로 따르려면 일부 JavaScript 및 HTML을 알아야 합니다.
GeoJSON에 대해 잘 모르신다면 여기 소개 기사를 확인해 보세요.
이제 TomTom SDK 및 API를 사용하는 방법을 살펴보겠습니다.
설정
우리는 이 애플리케이션을 구현하기 위해 리액트를 사용합니다.
먼저 컴퓨터에 Node.js가 설치되어 있는지 확인합니다. 이전에 리액트 앱을 구축하지 않은 경우 터미널에 다음 명령을 입력하여 Node.js가 설치되어 있는지 확인할 수 있습니다.
node -v그렇지 않으면 Node.js 웹 사이트로 이동하여 최신 버전을 다운로드하십시오.
Node.js가 설치되었는지 확인한 후 다음 명령을 실행하여 React 앱을 시작할 수 있습니다.
npx create-react-app tomtom-geofencing그런 다음 터미널의 프로젝트 폴더로 이동합니다.
cd tomtom-geofencing이제 다음 명령을 사용하여 새 앱을 시작할 수 있습니다.
npm run startTOMTOM 라이브러리 설치
다음 명령을 실행하여 TomTom Maps SDK를 설치하여 DOM(Document Object Model)에서 지도를 봅니다.
npm i @tomtom-international/web-sdk-maps당신의 앱에서 TomTom 서비스를 이용하려면 개발자로 등록해야 합니다. 당신이 등록할 때, 당신은 매일 수천 개의 무료 요청에 접근할 수 있으며, 당신은 또한 상업적인 사용을 위해 이것들을 적용할 수 있다. 그럼 앱이 인기를 끌게 되면, 성장하면서 간단하게 결제하시면 됩니다.
TomTom 개발자 계정에 가입하시면 API Key를 받으실 수 있습니다. 이 키는 나중에 튜토리얼에서 필요하므로 기록해 두십시오.
지도 만들기
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;
}지도에 대한 TomTom의 기본 CSS 스타일을 가져옵니다. 그런 다음 지도 라이브러리 자체를 가져오고 이름을 ttmaps로 바꿉니다.
마지막으로 useState, useEffect 및 useRef와 같은 반응 후크를 가져옵니다. 프로젝트 변수를 일관되게 처리하고 쉽게 조작하는 데 사용할 수 있습니다.
이제 앱 기능으로 들어가서 NAT의 React Hook을 사용하여 변수를 선언합니다.
const mapElement = useRef();
const [mapZoom, setMapZoom] = useState(7);
const [map, setMap] = useState({});MapElement는 지도의 컨테이너 역할을 합니다. useRef를 사용하여 DOM에 직접 부착할 수 있습니다. mapZoom을 사용하면 지도의 기본 확대/축소 값을 7로 설정하고 setMapZoom을 사용하여 확대/축소 값을 변경할 수 있습니다.
Use map when initiating and changing the TomTom map in your application.
다음으로 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 키와 같은 매개 변수를 허용합니다.
컨테이너는 DOM에서 맵을 보관하는 항목을 설명합니다. 이 경우 앞에서 정의한 것이 mapElement입니다.
center는 로드 시 지도가 표시하는 기본 좌표를 정의합니다.
그리고 확대/축소는 이미 정의된 mapZoom을 사용하여 지도의 기본 확대/축소를 결정합니다.
폴리곤 그리기
다음으로 GeoJSON을 사용하여 지도에서 울타리를 치고 싶은 위치(예: 미국 대륙 사용)를 간략하게 표시합니다. 그런 다음 페이지에 버튼을 추가하여 그리기라는 기능을 트리거합니다. div 내부의 지도를 추가하려면 ref={mapElement}를 사용하고 CSS 스타일을 추가하려면 .mapDiv를 사용합니다.
참고: Datahub에서 유사한 Geojson 및 국가 좌표를 찾은 다음 Geojson 데이터를 다운로드하여 다른 프로젝트에 구현할 수 있습니다.
return (
<div className="App">
<button
onClick={(e) => {
draw();
}
>
Draw America
</button>
<div ref={mapElement} className="mapDiv"></div>
</div>
);그리기 함수 내에서 map.addLayer 방법을 사용하여 지도에 영역을 그립니다. 그런 다음 geojson을 포함하는 id, type 및 source와 같은 매개 변수를 추가합니다.
소스 내에서 유형을 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을 사용하여 TomTom의 API에 POST 요청을 보내 Admin 키를 등록합니다(아래 참조). 이 요청에는 비밀 단계가 있는 본체가 포함됩니다. 이 예에는 "my_secret_key"를 사용합니다.
{
"secret": "my_secret_key"
}또한 API 키를 매개 변수로 사용하고 있어 하나의 계정에 모두 연결되어 있습니다.
https://api.tomtom.com/geofencing/1/register?key=Your_API_Key
반환되는 응답에는 adminKey가 포함되어 있습니다.
새 프로젝트 만들기
이제 새 키가 생겼으므로 그린 지오펜스와 관련된 프로젝트를 작성할 수 있습니다.
이렇게 하려면 다른 POST 요청을 보내 새 프로젝트를 등록하십시오.
https://api.tomtom.com/geofencing/1/projects/project?key=${apiKey}
프로젝트 이름을 본문으로 전송:
{
"name": "United States Map"
}
응답에는 프로젝트 이름과 ID가 포함됩니다.
지오펜스 생성
필요한 좌표를 사용하여 지오펜스를 작성하려면 먼저 다음으로 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 Geofensing Report 서비스는 특정 지점(위도 및 위도)이 이전에 만든 지오펜스 내에 있는지 아니면 외부에 있는지 확인할 수 있습니다. 특정 지점의 위도 및 경도와 프로젝트 ID가 필요합니다. 응답은 점이 울타리 안인지 밖에 있는지를 보여줍니다. 게다가, 그것은 위치와 울타리 사이의 구체적인 거리를 포함합니다.
https://api.tomtom.com/geofencing/1/report/${productId}?key=${apiKey}
응답은 다음과 같습니다.
{
"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
}
}
]
}
}요청에는 제품 ID(c2f56e6d-8395–4a2-bf64-e36f7b7d229c)가 있는 매개 변수(41.670966, 2.750529)가 사용됩니다. 이 경우 거리가 3,298,398.0m인 울타리 밖에 지점이 있다는 것을 알 수 있다.
이러한 서비스를 통해 특정 비즈니스 논리와 사용 사례를 애플리케이션에 추가할 수 있습니다. 예를 들어, 특정 레스토랑이 사용자의 현재 위치로 배달하는지, 사용자가 특정 상점 근처를 걷고 있는지, 마케팅 제안을 받아야 하는지를 결정할 수 있습니다.
이 튜토리얼의 데모는 CodeSandbox에서 볼 수 있습니다.
다음 단계
이 글에서는 Respect 어플리케이션 설정 및 TomTom 맵 설치 방법에 대해 논의했습니다. 우리는 리액트 구성 요소 내에서 로드 시 지도를 초기화하고 표시하는 방법을 배웠습니다. 그런 다음 TomTom과 함께 상자에서 바로 나오는 addLayer 방법을 사용하여 Geojson과의 경계를 폴리곤 모양으로 그렸습니다. 마지막으로 지오펜싱과 TomTom 지오펜싱 보고서 서비스 사용 방법, 가상 경계를 동적으로 처리하는 방법에 대해 알아보았습니다.
이제 지도의 장소 주변에 지오펜스를 추가하는 방법을 알게 되었으므로, 이 지오펜스를 사용하여 프로그램을 향상시킬 수 있습니다. 지정된 구역에 들어가거나 나갈 때 사용자에게 알리고, 필요에 따라 가장 가까운 가게나 식당을 찾도록 도우며, 승인된 구역 내에서 승차공유 승객을 픽업하는 등의 작업을 수행할 수 있습니다.
매일 수천 건의 무료 요청(상업용으로도 사용 가능)과 귀사의 성장에 맞는 유연한 결제를 통해 TomTom이 귀하를 지원합니다. 지금 바로 등록하여 TomTom JavaScript SDK로 실험해 보십시오.
이 기사는 원래 developer.tomtom.com/blog에 게시되었습니다.
'javascript' 카테고리의 다른 글
| [JavaScript 통역]자바스크립트 | 제1부 (0) | 2021.12.29 |
|---|---|
| 「JavaScript」함수 (0) | 2021.12.29 |
| 모든 웹 개발자가 읽어야 할 기사 5개 (0) | 2021.12.28 |
| Lerna 를 javascript에서 mono repo 설정하는 방법 (0) | 2021.12.28 |
| 개발자 취직에 도움되는 행사 (0) | 2021.12.28 |
댓글