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

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

사전 준비

AWS Amplify 설치
AWS Amplify #001 - Installation

구축된 환경을 사용하여 OpenLayers를 쉽게 시작하십시오.
openlayers-starter

실행 환경

노드 v18.1.0

npm v8.8.0

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

환경 구축

AWS Amplify 설정

지도 응용 프로그램 구축

환경 구축

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

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

npm install aws-amplify
npm install maplibre-gl-js-amplify
npm install @geoblocks/ol-maplibre-layer

패키지.json

{
  "name": "openlayers-starter",
  "version": "6.15.1",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.7.4",
    "vite": "^3.0.4"
  },
  "dependencies": {
    "@geoblocks/ol-maplibre-layer": "^0.0.4",
    "aws-amplify": "^4.3.30",
    "maplibre-gl-js-amplify": "^2.0.3",
    "ol": "^6.15.1"
  }
}

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

AWS Amplify 설정

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

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

amplify init

amplify add auth

amplify add geo

amplify push

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


배포가 완료되면 "/src/aws-exports.js"의 확장자를 "/src/aws-exports.ts"로 변경합니다.

aws-exports.ts

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

지도 애플리케이션 구축

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

전체 구성

vite.config.ts

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

import { defineConfig } from 'vite'

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

/src

@geoblocks/ol-maplibre-layer.d.ts

MapLibre OpenLayers 레이어 유형 정의 파일을 추가합니다.

declare module '@geoblocks/ol-maplibre-layer';

/src

main.ts

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

import './style.css'
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Source from 'ol/source/Source';
import { fromLonLat } from 'ol/proj';
import { ScaleLine } from 'ol/control';
import MapLibreLayer from '@geoblocks/ol-maplibre-layer';
import { Amplify } from 'aws-amplify';
import { Auth } from 'aws-amplify';
import { Geo, AmazonLocationServiceMapStyle } from '@aws-amplify/geo';
import awsconfig from './aws-exports';
import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';

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

const map = new Map({
    target: 'map',
    layers: [
        new MapLibreLayer({
            maplibreOptions: {
                style: Geo.getDefaultMap().mapName,
                transformRequest: transformRequest,
            },
            source: new Source({
                attributions: [
                    '© 2022 HERE',
                ],
                attributionsCollapsible: false,
            }),
        }),
    ],
    view: new View({
        center: fromLonLat([139.767, 35.681]),
        zoom: 11,
    }),
});

map.addControl(new ScaleLine({
    units: 'metric'
}));

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


관련 기사

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
OpenLayers