애플리케이션에 Amazon Location 대화형 맵 추가 - Amazon Location Service

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

애플리케이션에 Amazon Location 대화형 맵 추가

이제 프레임워크와 div 자리 표시자가 있으니 애플리케이션에 맵 컨트롤을 추가할 수 있습니다. 이 자습서에서는 MapLibre GL JS를 맵 제어로 사용하여 Amazon Location Service에서 데이터를 가져옵니다. 또한 키를 사용하여 Amazon LocationJavaScript 인증 도우미에 대한 호출에 쉽게 서명할 수 APIs 있습니다API.

애플리케이션에 대화형 맵을 추가하려면

  1. 이전 섹션에서 생성한 quickstart.html 파일을 엽니다.

  2. 필요한 라이브러리에 대한 참조와 생성할 스크립트 파일을 추가합니다. 변경해야 하는 내용은 green에 나와 있습니다.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quick start tutorial</title>

    <!-- Styles -->
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <link href="main.css" rel="stylesheet" />
  </head>
  
  <body>
    ...
    <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer>
    
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-client@1.x/dist/amazonLocationClient.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script>
    
    <!-- JavaScript for the app -->
    <script src="main.js"></script>
  </body>
</html>

    이것은 앱에 다음 종속 항목을 추가합니다.

    • MapLibre GL JS . 이 라이브러리와 스타일시트에는 맵 타일을 표시하고 이동 및 확대/축소와 같은 대화형 기능을 포함하는 맵 컨트롤이 포함되어 있습니다. 컨트롤을 사용하면 맵에 직접 특징을 그리는 등 확장 기능도 사용할 수 있습니다.

    • Amazon Location 클라이언트. 맵 데이터를 가져오고 맵에서 장소를 검색하는 데 필요한 Amazon Location 기능을 위한 인터페이스를 제공합니다. Amazon Location 클라이언트는 JavaScript v3 AWS SDK용 를 기반으로 합니다.

    • Amazon Location Authentication Helper. 이렇게 하면 API 키 또는 Amazon Cognito 를 사용하여 Amazon Location Service를 인증하는 데 유용한 함수가 제공됩니다.

    또한 이 단계에서는 다음에 생성할 main.js에 대한 참조도 추가합니다.

  3. quickstart.html 파일을 저장합니다.

  4. HTML 및 파일과 동일한 폴더에 main.js 라는 새 CSS 파일을 생성하고 편집을 위해 엽니다.

  5. 다음ㅍ 스크립트를 파일에 추가합니다. 의 텍스트 red 는 이전에 생성한 API 키 값, 맵 리소스 이름 및 위치 리소스 이름과 리전의 리전 식별자(예: )로 대체되어야 합니다us-east-1.

    // Amazon Location Service resource names:
const mapName = "explore.map";
const placesName = "explore.place";
const region = "your_region";
const apiKey = "v1.public.a1b2c3d4...

// Initialize a map
async function initializeMap() {
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

  // Add navigation control to the top left of the map
  mlglMap.addControl(new maplibregl.NavigationControl(), "top-left");
  
  return mlglMap;
}

async function main() {
  // Initialize map and Amazon Location SDK client:
  const map = await initializeMap();
}

main();

    이 코드는 Amazon Location 리소스를 설정한 다음 MapLibre GL JS 맵 제어를 구성 및 초기화하고 ID 를 사용하여 <div> 요소에 배치합니다map.

    initializeMap() 함수를 이해하는 것이 중요합니다. 애플리케이션에서 MapLibre 맵을 렌더링하는 데 사용되는 새 맵 제어(mlglMap로컬이라고 하지만 코드의 나머지 map 부분에서 호출됨)를 생성합니다.

      // Initialize the map
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

    새 MapLibre 맵 컨트롤을 생성할 때 전달하는 파라미터는 맵 컨트롤의 초기 상태를 나타냅니다. 이제 다음 파라미터를 설정합니다.

    • HTML 컨테이너 - 의 맵 div 요소를 사용합니다HTML.

    • 맵의 초기 중앙부터 워싱턴 DC의 특정 지점까지

    • 16까지의 확대/축소 레벨(주변 지역 또는 블록 수준으로 확대/축소).

    • 맵에 사용할 스타일로, 맵 타일을 가져오는 데 사용할 와 맵을 렌더링 MapLibre URL하는 데 사용할 기타 정보를 제공합니다. 여기에는 인증을 위한 API 키가 URL 포함됩니다.

  6. JavaScript 파일을 저장하고 브라우저로 엽니다. 이제 페이지에 이동 및 확대/축소 동작을 사용할 수 있는 맵이 생겼습니다.

    참고

    이 앱을 사용하여 MapLibre 맵 제어가 어떻게 작동하는지 확인할 수 있습니다. 드래그 작업을 사용하는 동안 Ctrl 또는 Shift를 사용하면 맵과 상호 작용하는 다른 방법을 확인할 수 있습니다. 이 모든 기능을 사용자 정의할 수 있습니다.

    Map of Washington D.C. showing Constitution Gardens and Independence Ave SW in an Amazon Location Service app.

앱이 거의 완성되었습니다. 다음 섹션에서는 맵에서 위치를 선택하고 선택한 위치의 주소를 표시하는 방법에 대해서 살펴봅니다. 또한 JSON 페이지에 결과도 표시하여 전체 결과를 볼 수 있습니다.