Amazon 로케이션에서 MapLibre 도구 및 라이브러리 사용

Amazon Location을 사용하여 대화형 애플리케이션을 만드는 데 필요한 중요한 도구 중 하나는 다음과 같습니다 MapLibre. MapLibre주로 웹 또는 모바일 애플리케이션에서 지도를 표시하기 위한 렌더링 엔진입니다. 하지만 플러그인에 대한 지원도 포함하며 Amazon Location의 다른 측면과 함께 작업할 수 있는 기능도 제공합니다. 다음은 작업하려는 위치 지역을 기반으로 사용할 수 있는 도구를 설명합니다.

참고

Amazon Location의 모든 측면을 사용하려면 사용하려는 언어의AWS SDK를 설치하세요.

• 맵

  애플리케이션에 지도를 표시하려면 Amazon Location에서 제공하는 데이터를 사용하고 화면에 그릴 맵 렌더링 엔진이 필요합니다. 맵 렌더링 엔진은 맵을 이동 및 확대하거나 마커, 푸시핀 및 기타 주석을 맵에 추가하는 기능도 제공합니다.

  Amazon Location Service에서는 MapLibre렌더링 엔진을 사용하여 맵을 렌더링할 것을 권장합니다. MapLibre GL JS는 지도를 표시하는 엔진이며 JavaScript, MapLibre 네이티브는 iOS 또는 안드로이드용 지도를 제공합니다.

  MapLibre 또한 핵심 기능을 확장할 수 있는 플러그인 에코시스템을 갖추고 있습니다. 자세한 내용은 https://maplibre.org/ maplibre-gl-js-docs /plugins/를 참조하십시오.

• 장소 검색

  검색 사용자 인터페이스를 더 간단하게 만들려면 웹용 MapLibre 지오코더를 사용할 수 있습니다 (Android 애플리케이션은 Android Places 플러그인을 사용할 수 있음).

  Maplibre용 Amazon 로케이션 지오코더 라이브러리를 사용하면 애플리케이션에서 Amazon Location을 사용하는 프로세스를 간소화할 수 있습니다. amazon-location-for-maplibre-gl-geocoder JavaScript

• 경로

  지도에 경로를 표시하려면 길찾기를 사용하십시오. MapLibre

• 지오펜스 및 트래커

  MapLibre 지오펜스 및 추적을 위한 특정 렌더링이나 도구는 없지만 렌더링 기능과 플러그인을 사용하여 지오펜스와 추적된 장치를 지도에 표시할 수 있습니다.

  추적 대상 디바이스는 MQTT를 사용하거나 Amazon Location Service에 업데이트를 수동으로 전송할 수 있습니다. AWS Lambda을 사용하여 지오펜스 이벤트에 응답할 수 있습니다.

Amazon Location Service에 추가 기능을 제공하는 데 사용할 수 있는 많은 오픈 소스 라이브러리(예: 공간 분석 기능을 제공하는 Turf)가 있습니다.

많은 라이브러리는 개방형 표준 GeoJSON 형식의 데이터를 사용합니다. Amazon Location Service는 애플리케이션에서 JavaScript GeoJSON을 사용할 수 있도록 지원하는 라이브러리를 제공합니다. 자세한 정보는 다음 섹션(Amazon Location SDK 및 라이브러리)을 참조하세요.

Amazon 위치 MapLibre 지오코더 플러그인

Amazon Location MapLibre 지오코더 플러그인은 라이브러리를 사용하여 지도 렌더링 및 지오코딩을 수행할 때 Amazon Location 기능을 JavaScript 애플리케이션에 쉽게 통합할 수 있도록 설계되었습니다. maplibre-gl-geocoder

설치

다음 명령을 사용하여 모듈과 함께 사용할 수 있도록 NPM에서 Amazon Location MapLibre 지오코더 플러그인을 설치할 수 있습니다.

npm install @aws/amazon-location-for-maplibre-gl-geocoder

스크립트를 사용하여 브라우저에서 직접 사용할 수 있도록 HTML 파일로 가져올 수 있습니다.

<script src="https://www.unpkg.com/@aws/amazon-location-for-maplibre-gl-geocoder@1">/script<

모듈과 함께 사용

이 코드는 Amazon 위치 지오코딩 기능을 JavaScript 갖춘 Maplibre GL 맵을 설정합니다. Amazon Cognito 자격 증명 풀을 통한 인증을 사용하여 Amazon 위치 리소스에 액세스합니다. 맵은 지정된 스타일과 중앙 좌표로 렌더링되며 맵에서 장소를 검색할 수 있습니다.

// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { LocationClient } from "@aws-sdk/client-location";
// Import the utility functions
import { withIdentityPoolId } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationWithMaplibreGeocoder
import { buildAmazonLocationMaplibreGeocoder, AmazonLocationMaplibreGeocoder } from "@aws/amazon-location-for-maplibre-gl-geocoder"

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing the Amazon Location resource
const placeIndex = "PlaceIndexName" // Name of your places resource in your AWS Account. 

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await withIdentityPoolId("Identity Pool ID");

const client = new LocationClient({
  region: "Region", // Region containing Amazon Location resources
  ...authHelper.getLocationClientConfig(), // Configures the client to use credentials obtained via Amazon Cognito
});

// Render the map
const map = new maplibregl.Map({
    container: "map",
    center: [-123.115898, 49.295868],
    zoom: 10,
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
    ...authHelper.getMapAuthenticationOptions(),
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object. 
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placeIndex, {enableAll: true});
    
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());

브라우저에서의 사용

이 예시에서는 Amazon 로케이션 클라이언트를 사용하여 Amazon Cognito를 사용하여 인증하도록 요청합니다.

참고

이 예시 중 일부는 Amazon 로케이션 클라이언트를 사용합니다. Amazon 로케이션 클라이언트는 JavaScript V3용AWS SDK를 기반으로 하며, HTML 파일에 참조된 스크립트를 통해 Amazon 로케이션을 호출할 수 있습니다.

HTML 파일에 다음을 포함하십시오.

< Import the Amazon Location With Maplibre Geocoder>
<script src="https://www.unpkg.com/@aws/amazon-location-with-maplibre-geocoder@1"></script>
<Import the Amazon Location Client>
<script src="https://www.unpkg.com/@aws/amazon-location-client@1"></script>
<!Import the utility library>
<script src="https://www.unpkg.com/@aws/amazon-location-utilities-auth-helper@1"></script>

JavaScript 파일에 다음을 포함하십시오.

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing Amazon Location resource

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
  ...authHelper.getMapAuthenticationOptions(),
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(client, placesName, {enableAll: true});

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map. 
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());

Amazon Location MapLibre 지오코더 플러그인에서 사용되는 함수와 명령은 다음과 같습니다.

• buildAmazonLocationMaplibreGeocoder

  이 클래스는 다른 모든 AmazonLocationMaplibreGeocder 호출의 진입점이 되는 인스턴스를 생성합니다.

  const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placesIndex, {enableAll: true});

• getPlacesGeocoder

  맵에 직접 추가할 수 있는 바로 사용할 수 있는 iControl 객체를 반환합니다.

  const geocoder = getPlacesGeocoder();
  
  // Initialize map
  let map = await initializeMap();
  
  // Add the geocoder to the map. 
  map.addControl(geocoder);