기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
Amazon 로케이션에서 MapLibre 도구 및 라이브러리 사용
Amazon Location을 사용하여 대화형 애플리케이션을 만드는 데 필요한 중요한 도구 중 하나는 다음과 같습니다 MapLibre. MapLibre
참고
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 지오펜스 및 추적을 위한 특정 렌더링이나 도구는 없지만 렌더링 기능과 플러그인을
사용하여 지오펜스와 추적된 장치를 지도에 표시할 수 있습니다. 추적 대상 디바이스는 MQTT를 사용하거나 Amazon Location Service에 업데이트를 수동으로 전송할 수 있습니다. AWS Lambda을 사용하여 지오펜스 이벤트에 응답할 수 있습니다.
Amazon Location Service에 추가 기능을 제공하는 데 사용할 수 있는 많은 오픈 소스 라이브러리(예: 공간 분석 기능을 제공하는 Turf
많은 라이브러리는 개방형 표준 GeoJSON
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);