Amazon Location Service, Leaflet 및 AWS Amplify를 사용하여 지도 애플리케이션 구축

Amazon Location Service, Leaflet 및 AWS Amplify를 사용하여 지도 애플리케이션을 구축했습니다 🎉

사전 준비

AWS Amplify 설치
AWS Amplify #001 - Installation

빌드된 환경을 사용하여 쉽게 Leaflet 시작하기
leaflet-starter

실행 환경

노드 v18.1.0

npm v8.8.0

다음은 자세한 설명입니다.

환경 구축

AWS Amplify 설정

지도 응용 프로그램 구축

환경 구축

첫째, 환경을 구축하겠습니다.

환경은 "leaflet-starter "을 사용하고 "AWS Amplify"패키지 및 "Maplibre GL JS Amplify"패키지를 미리 설치합니다. 또한 "MapLibre GL JS"및 "MapLibre GL Leaflet"패키지를 설치하여 벡터 타일을 표시합니다.

npm install aws-amplify
npm install [email protected]
npm install [email protected]
npm install @maplibre/maplibre-gl-leaflet

패키지.json

{
  "name": "leaflet-starter",
  "version": "1.9.2",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.8.4",
    "vite": "^3.1.8"
  },
  "dependencies": {
    "@maplibre/maplibre-gl-leaflet": "^0.0.17",
    "@types/leaflet": "^1.8.0",
    "aws-amplify": "^4.3.38",
    "leaflet": "^1.9.2",
    "maplibre-gl": "^1.15.3",
    "maplibre-gl-js-amplify": "^1.6.0"
  }
}

이것으로 환경 구축이 완료되었습니다!

AWS Amplify 설정

다음으로 AWS Amplify를 구성합니다.

평소와 같이 인증 기능을 추가하십시오. 지도 기능의 경우 "HERE 탐색"을 선택하고 액세스 대상을 "인증 및 게스트 사용자"로 설정합니다.

amplify init

amplify add auth

amplify add geo

amplify push

AWS Management 콘솔에서 배포 상태를 확인할 수도 있습니다.


이것으로 AWS Amplify 구성이 완료되었습니다!

지도 애플리케이션 구축

마지막으로 실제 지도 애플리케이션을 빌드해 보겠습니다.

전체 구성

vite.config.ts

Vite에서 실행할 수 있도록 AWS Amplify와 Leaflet의 조합을 구성합니다.

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  define: {
    'window.global': {}
  },
  build: {
    target: 'esnext',
    commonjsOptions: {
      ignoreDynamicRequires: true
    }
  }
})

/src

main.ts

Amazon Location Service 지도 스타일을 표시하도록 Leaflet을 구성합니다.

import './style.css';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import '@maplibre/maplibre-gl-leaflet';
import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import { Geo, AmazonLocationServiceMapStyle } from '@aws-amplify/geo';
import awsconfig from './aws-exports';
import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';
L.Icon.Default.imagePath = 'img/icon/';

Amplify.configure(awsconfig);
const credentials = await Auth.currentCredentials();
const defaultMap = Geo.getDefaultMap() as AmazonLocationServiceMapStyle;
const { transformRequest } = new AmplifyMapLibreRequest(
    credentials,
    defaultMap.region
);

const map = L.map('map', {
    center: [35.681, 139.767],
    zoom: 11,
    layers: [
        L.maplibreGL({
            style: Geo.getDefaultMap().mapName,
            transformRequest: transformRequest,
        })
    ],
});
map.attributionControl.addAttribution(
    '© 2022 HERE'
);

이제 Leaflet에 Amazon Location Service 지도 스타일을 표시할 수 있습니다!


관련 기사

Amazon Location Service, OpenLayers 및 AWS Amplify를 사용하여 지도 애플리케이션 구축

Yasunori Kirimoto for AWS Heroes ・ 8월 15일 ・ 3분 읽기

#amazonlocationservice #openlayers #amplify #aws

Amplify Geo 및 Amazon 위치 서비스 구축 방법 요약

Yasunori Kirimoto for AWS Community Builders ・ 2021년 12월 9일 ・ 4분 읽기

#amazonlocationservice #awsamplify #maplibre #leaflet

Amazon Location Service를 위한 새로운 지도 스타일의 간단한 보기

Yasunori Kirimoto for AWS Community Builders ・ 4월 4일 ・ 4분 읽기

#amazonlocationservice #amplifygeo #amplify #maplibre

Amazon Location Service, Leaflet, AWS Amplify 및 Vue.js를 사용하여 지도 애플리케이션 구축

AWS Community Builders용 Yasunori Kirimoto ・ 2021년 10월 30일 ・ 5분 읽기

#amazonlocationservice #leaflet #awsamplify #vue

Amazon Location Service, MapLibre GL JS, AWS Amplify 및 Vue.js를 사용하여 지도 애플리케이션 구축

AWS Community Builders용 Yasunori Kirimoto ・ 2021년 10월 21일 ・ 5분 읽기

#amazonlocationservice #awsamplify #maplibre #vue

참조
Amazon Location Service
AWS Amplify
Leaflet