TomTom의 Maps SDK를 사용하여 여러 위치 표시

TomTom Maps SDK는 web apps, iOS 및 Android에서 위치 기반 어플리케이션을 개발할 수 있습니다.TomTom이 수집한 수백만 개의 데이터 포인트, 인터넷 응용 프로그램의 지도 기능, 위치 검색 등에 편리하게 접근할 수 있고 인터넷 기반의 모바일 응용 프로그램 플랫폼과 로컬 모바일 응용 프로그램 플랫폼과 호환된다.
본고에서 TomTom Maps SDK의 사용 방법을 소개하고 그 SDK API를 이용하여 지도에 있는 여러 실체의 위치를 한 번에 호출하는 방법을 연구하고자 한다.본고는 응용 프로그램 개발 포털에서 제공하는 다른 기능과 API 호출을 이용하여 지도 사용률을 가장 높일 수 있는 방법을 보여 준다.위치 기반 응용 프로그램을 구축할 수 있도록 맞춤형 지도 벡터 스타일과 기능을 설명하는 과정도 설명합니다.

개시하다

개발자로서 TomTom API와 SDK를 등록하면 무료이며 편리하다.TomTom for Developers 사이트를 방문하면 페이지 오른쪽 상단에 있는 링크를 클릭하면 등록할 수 있다.개발자 대시보드는 새 응용 프로그램 및 API 키를 만들 수 있는 권한을 부여하며 한 번에 여러 응용 프로그램을 만들 수 있습니다.
어플리케이션을 추가하고 Maps Display API 제품에 대한 액세스를 요청하면 TomTom이 Map Display API와 함께 사용할 만료되지 않은 API 키를 제공하라는 메시지가 표시됩니다.사용자가 안드로이드Mobile Maps SDK를 사용할 때 매일 2500개의 무료 API 사무를 획득하여 이 프로그램을 지원하고 무료 지도와 교통 스티커에 접근할 수 있다™ 그리고 iOS.(매일 2500개의 API 트랜잭션이 충분하지 않으면 개발자 대시보드의 내 신용 화면에 액세스하여 더 많은 트랜잭션을 구매할 수 있습니다.)

지도 SDK 다운로드

TomTom Maps SDK는 TomTom for Developers portal에서 무료로 다운로드할 수 있습니다.압축을 풀고 프로젝트 폴더에 저장합니다.

지도 보이기

맵 SDK를 이해하기 위해 간단한 것부터 시작하겠습니다. 프로그램에 지도를 표시하면 지도의 초점에 특정한 위치가 없습니다.다음은 이 동작을 실행하는 코드입니다. (우선 개발자 포털에 응용 프로그램을 만들어야 합니다. 왜냐하면 API 키를 만들어야 하기 때문입니다.)

var map = tomtom.L.map('map', {
    key: '<your-api-key>',
    basePath: '<your-tomtom-sdk-base-path>',
});

다음 그림과 같이 스크립트는 다운로드한 SDK의 경로를 가리킵니다.

모든 지도는 특정한 점에 주목하여 지도에 더 많은 상하문을 추가해야 한다.이 예에서는 좌표 HQ가 지도에 배치됩니다.
지리 좌표는 위도와 경도의 수조로 추가할 수 있다.15레벨 배율 옵션도 포함됩니다.다음은 예입니다.

var HQ= [9.0548, 7.4856];
var map = tomtom.L.map('map', {
    key: '<your-api-key>',
    basePath: '<your-tomtom-sdk-base-path>',
    center: HQ
    zoom: 15
});

맵에 태그 추가

표시는 지도상의 특정 좌표의 위치를 표시하는 데 쓰인다.TomTom은 개발자가 지도에 속성을 추가할 수 있도록 간단한 API를 제공합니다.이 태그는 팝업 창에서 점에 대한 자세한 정보를 제공하는 데도 도움이 됩니다.

var Hqmarker = tomtom.L.marker(HQ).addTo(map);
Hqmarker.bindPopup ("COMPANY HQ").openPopup();

같은 과정을 반복하여 지도에 여러 위치를 추가할 수 있다. 아래 그림과 같다.

이 과정을 계속하면 너는 더 많은 점수를 증가시킬 수 있다.

중요한 세부 사항 얻기

위치 및 지리 좌표
TomTom은 어떤 위치의 지리 좌표를 가져올 수 있는 API를 제공합니다.이 좌표를 얻는 가장 간단한 방법은 TomTomAPI Explorer을 통과하는 것이다.모호 검색 API 섹션에서는 공통 주소를 사용하여 위치 좌표를 읽어들입니다.
미국 캘리포니아주 파사디나시 북로스 로버스 대로 2311번지를 샘플 주소로 하여 조회 필드에 넣기;이 조회를 실행할 때 다른 미리 채워진 필드를 지웁니다.응답 데이터는 다음 형식으로 좌표를 되돌려줍니다.

<position>
    <lat>37.36729</lat>
    <lon>-121.91595</lon>
</position>

주소에 "$", "?", &, "#"과 같은 특수 HTML 문자를 사용할 수 없습니다.

한 번에 여러 좌표 로드

생산 환경에서 한 줄의 새로운 코드로 모든 새로운 위치를 지도에 추가하는 것은 비현실적이다.좌표는 순환에 추가하고 지도에 추가할 수 있습니다.

var companyAssets = [ [ 52.373627, 4.902642 ], [ 52.3659, 4.927198 ], [ 52.347878, 4.893488 ], [ 52.349447, 4.858433 ] ];
companyAssets.forEach (function (child) {
    tomtom.L.marker (child).addTo(map);
});

진한 피부 맵 표시

기본 맵에는 연한 피부와 진한 피부가 있습니다.지도 초기화에서 '스타일' 을 사용하여 서로 다른 피부 사이를 전환할 수 있습니다. 아래와 같습니다.

 var map = tomtom.L.map ('map', {
    . . .
    center :HQ,
    style: 'night',
    . . .
});

지도의 양식을 설계하다

TomTom 벡터 맵은 JSON 파일에 정의된 채우기 색상, 선 스타일, 두께 등의 속성을 편집합니다.필요한 파일을 다운로드할 수 있습니다here.가용 부동산specifications에 대한 더 많은 상세한 문서는 이곳에서 찾을 수 있다.수동 편집Maputnik editor을 사용하여 양식을 생성하는 것보다 시각화된 지도 디자이너가 더욱 쉽다.
벡터 지도는 블록과 패턴으로 구성된다.도면은 지도상의 데이터를 제공하는 데 사용되며 패턴은 데이터의 구조를 결정한다.클라이언트는 어떻게 스타일(예를 들어 2차원 구역, 도로, 해양 등)을 사용하여 최종 사용자에게 이 데이터를 표시하는지 결정한다.
Maputnik 편집기를 사용하면 개발자가 지도 기능을 사용자 정의하고 볼 수 있다.예를 들어 바다 배경을 전통적인 파란색이 아닌 빨간색으로 바꿀 수 있다.

맵 맞춤 제작 시작

사용자 정의 스타일 작성을 시작하려면 기본 마스터 스타일here을 다운로드합니다.TomTom API 키를 추가해야 합니다.

첫 번째 단계는 스타일 정의가 포함된 파일을 Maputnik에 업로드하는 것입니다.열기 버튼을 클릭합니다.초기 단계에서 API 키를 추가하면 수동 프로세스를 건너뛸 수 있습니다.

위의 그림은 물 배경이 검은색으로 바뀐 맞춤형 지도를 보여 줍니다.
Maputnik 편집기의 왼쪽에는 지도의 요소 레이어와 해당 사용자 정의 설정이 표시됩니다.사용자 정의 속성을 볼 수 있습니다.오른쪽에 변경 사항의 실시간 미리보기가 표시됩니다.

언제든지 새 맞춤형 스타일을 편집기에서 내보내고 테스트할 수 있습니다.
here에서 스타일을 테스트할 수 있습니다.수정된 스타일을 업로드하고 결과를 보십시오. ("파일 선택"단추를 누르십시오.)

요약: 실제 세계 매핑 예

생산 과정에서 회사가 보유하고 지도에 보여주려고 하는 모든 자산의 좌표 목록을 되돌려주는 API 단점을 만들 수 있습니다.

var AbujaZone = [
    {Address:"HQ",Coordinate: [9.0548, 7.4856]},
    {Address:"SUB HQ",Coordinate: [9.0600, 7.4899 ]},
    {Address:"ABUJA A",Coordinate: [9.0509, 7.4931 ]},
    {Address:"ABUJA B",Coordinate: [9.046, 7.4873 ]}
    {Address:"ABUJA C", Coordinate: [9.0530, 7.4793 ]}
    {Address:"NEW CONSTRUCTION",Coordinate:[9.0650, 7.4924 ]},
    {Address:"ABUJA E", Coordinate: [9.0650, 7.4734 ]}
]

되돌아오는 모든 실체는 주소와 좌표의 대상이다.프로젝트 수요에 따라 기계나 자산의 상태, 오픈 시간 등 더 상세한 대상을 되돌릴 수 있다.

AbujaZone.forEach(function (child) {
    tomtom.L.marker(child.Coordinate)
    .addTo(map)
    .bindPopup(child.Address)
});

캡처 중인 항목은 두 개의 다른 지점 사이를 전환합니다: 라커스와 아부자 구역.각 위치에 태그 아이콘을 지정하려면 함수에 아이콘 옵션(아래 강조 표시)을 추가합니다.

LagosZone.forEach (function (child) {
    tomtom.L.marker (child.Coordinate, {
        icon: child.iconPath
    }).addTo(map)
    .bindPopup(child.Address)
});

요약

본고는 지도에 여러 위치와 지도 보기를 사용자 정의하는 방법을 연구하고 표지와 벡터 지도 기능의 사용을 연구했다.TomTom 공식 문서는 사용 가능한 기능과 옵션의 전체 목록을 제공합니다.
TomTom API는 다음과 같은 다양한 기능을 갖춘 위치 기반 어플리케이션을 구축하는 데 사용되는 다양한 기능을 포함하는 전체 위치 기반 도구상자를 제공합니다.

교통 API: 교통 정보는 교통 API를 통해 서로 다른 스타일과 스타일로 표시할 수 있다.교통 흐름이나 교통사고 정보는 TomTom 지도에 겹쳐 정체 정도, 교통 체증, 도로 공사, 도로 막힘, 폐쇄 등을 가시화할 수 있다.

맵 표시 API: 맵 표시 API는 모든 이동 및/또는 웹 응용 프로그램에서 정적 및 대화형 맵을 표시할 수 있습니다.TomTom 실시간 지도 제작 기술은 사용자에게 가장 정확하고 최신 지도를 제공한다.

라우팅 API: 라우팅 API는 a에서 B까지의 라우팅을 계획하고 역사와 실시간 교통 상황을 고려할 수 있습니다.따라서 응용 프로그램은 사용자에게 고도로 정확한 이동 시간, 실시간으로 업데이트된 이동 정보와 다양한 교통 유형(예를 들어 자동차, 트럭, 자전거와 행인)의 노선 지시를 제공할 수 있다.

검색 API: 검색 API는 지리적 인코딩 및 주소 또는 사이트 검색을 지원합니다.모호 일치 알고리즘과 자동 완성을 통해 검색 API는 최종 사용자와 직접 상호작용할 수 있는 뛰어난 검색 인터페이스를 제공한다.

GPS 데이터 기반의 기업급 모바일 앱을 개발하든 우버, 구글맵, Yelp,Four Square나 포켓몬 Go와 같은 새로운 앱을 개발하든 데이트, 날씨, 소셜미디어, 증강현실 또는 헬스와 같은 새로운 앱을 개발하든 유용한 도구다.
본문은 최초로 개발자에 발표되었다.톰.com/blog.원작자는John Odey.