Amplify Geo 및 MapLibre GL Geocoder를 사용하여 주소 검색 기능 구축

Amplify Geo와 MapLibre GL Geocoder를 사용하여 주소 검색 기능을 구축했습니다 🎉

Amplify Geo는 요 전날 공식적으로 출시되었습니다. Amplify Geo는 Amazon Location Service를 보다 쉽게 ​​구축할 수 있게 해주는 AWS Amplify의 기능 중 하나입니다.
이 글에서는 MapLibre GL Geocoder로 주소 검색 기능을 추가하여 지도 어플리케이션을 구축해 보았습니다.

사전 준비

지도 표시 기능까지 Geo 설정 증폭

Amplify Geo 설정

먼저 Amplify Geo를 구성합니다.
Add location feature (geocoding)

위치 기능(지오코딩)만 필요한 경우 이 두 명령어와 지도 기능으로 구현할 수 있습니다!
Amazon Location Service에는 AWS 콘솔 구성 및 역할 구성이 필요하지만 Amplify Geo가 모든 작업을 수행합니다!

amplify add geo

amplify push

이것으로 Amplify Geo의 구성이 완료되었습니다.

프론트엔드

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

Amplify Geo의 지도 표시 기능을 구성한 후에는 "MapPane.vue"및 "main.js"만 변경하면 됩니다.

실행 환경

노드 v16.10.0

npm v7.24.0

미리 MapLibre GL Geocoder를 설치하십시오.

npm install @maplibre/maplibre-gl-geocoder

전체구성

패키지.json

{
  "name": "amplify-geo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/ui-components": "^1.9.2",
    "@maplibre/maplibre-gl-geocoder": "^1.2.0",
    "aws-amplify": "^4.3.4",
    "core-js": "^3.6.5",
    "maplibre-gl": "^1.15.2",
    "maplibre-gl-js-amplify": "^1.1.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

/src

메인.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'maplibre-gl/dist/maplibre-gl.css'
import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css'

import {
  applyPolyfills,
  defineCustomElements
} from '@aws-amplify/ui-components/loader';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

applyPolyfills().then(() => {
  defineCustomElements(window);
});

const app = createApp(App);
app.config.isCustomElement = tag => tag.startsWith('amplify-');
app.use(store).use(router).mount('#app');

MapLibre GL Geocoder 및 래퍼를 로드합니다.

import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css'

/src/구성 요소

MapPane.vue

<template>
    <div class='mapPane'>
        <div id='map'></div>
    </div>
</template>

<script>
    import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify';

    export default {
        name: 'MapPane',
        data() {
            return {
            }
        },
        mounted: async function () {
            this.mapCreate();
        },
        methods: {
            mapCreate: async function() {
                const map = await createMap({
                    container: 'map',
                    center: [139.7648, 35.6794],
                    zoom: 15,
                    bearing: 64.8,
                    pitch: 60,
                    hash: true,
                });
                map.addControl(createAmplifyGeocoder());
            },
        }
    }
</script>

<style scoped>
    #map {
        z-index: 0;
        height: 800px;
    }
</style>

MapLibre GL Geocoder 래퍼를 로드합니다.

import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify';

MapLibre GL Geocoder 래퍼를 로드합니다.

map.addControl(createAmplifyGeocoder());

간단한 로컬 서버로 확인해보자.

npm run serve

로컬 서버를 시작하고 로그인해 보세요 💡

Amplify Geo와 MapLibre GL Geocoder를 사용하여 주소 검색 기능을 구축할 수 있었습니다 👍

Amplify Geo와 MapLibre GL Geocoder의 조합으로 Amplify Geo를 그대로 사용하는 것보다 주소 검색 기능 구축이 용이함을 확인했습니다. 다른 기능도 계속 탐색하겠습니다 👍