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

37471 단어 amazonlocationservice vue leaflet awsamplify

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

Amazon Location Service는 AWS 내에서 위치 기반 애플리케이션을 구축하기 위한 서비스입니다. 현재 지도 표시 기능, 주소 검색 기능, 경로 검색 기능, 지오펜스 기능, 추적 기능의 5가지 기능을 사용할 수 있습니다. 이번에는 지도 표시 기능을 활용하여 지도 어플리케이션을 만들어 봤습니다!

사전 준비

AWS Amplify 및 Vue.js를 로그인 기능으로 설정

Amazon 위치 맵 구성

먼저 AWS 콘솔에서 Amazon Location Maps를 구성합니다.

"지도"를 클릭합니다.

"지도 만들기"를 클릭합니다.

지도 이름을 입력하고 지도를 선택합니다. 이번에는 "샘플"을 선택합니다.

생성된 지도를 클릭합니다.

향후 설정에서 사용하려면 여기에 표시된 "이름"및 "ARN"을 복사하십시오.

이것으로 Amazon Location Maps 설정이 완료됩니다 👍

프런트엔드

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

Amplify 및 Vue.js가 구성되면 새 "MapPane.vue"를 추가하고 일부 코드를 변경하기만 하면 됩니다.

실행 환경

노드 v16.3.0

npm v7.15.1

전단지 패키지를 미리 설치하십시오. 또한 Mapbox GL Leaflet 패키지와 Mapbox GL JS 패키지의 OSS 버전을 설치하여 벡터 타일을 표시합니다.

npm install leaflet
npm install mapbox-gl-leaflet
npm install [email protected]

전체 구성

패키지.json

{
  "name": "amazon-location-app",
  "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-vue": "^1.0.12",
    "aws-amplify": "^4.1.1",
    "core-js": "^3.6.5",
    "leaflet": "^1.7.1",
    "mapbox-gl": "^1.13.0",
    "mapbox-gl-leaflet": "^0.0.15",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.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",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

/src

메인.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'leaflet/dist/leaflet.css'
import 'mapbox-gl/dist/mapbox-gl.css'
import '@aws-amplify/ui-vue'
import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Mapbox GL JS의 리플릿과 OSS 버전을 로드합니다.

import 'leaflet/dist/leaflet.css'
import 'mapbox-gl/dist/mapbox-gl.css'

/src/뷰

홈뷰

<template>
    <div class="home">
        <v-container>
            <v-row>
                <v-col>
                    <h1>Amazon Location Service</h1>
                </v-col>
            </v-row>
            <v-row>
                <v-col>
                    <MapPane></MapPane>
                </v-col>
            </v-row>
            <v-row>
                <v-col>
                    <amplify-sign-out></amplify-sign-out>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<script>
    import MapPane from '@/components/MapPane.vue'

    export default {
        name: 'home',
        components: {
            MapPane
        }
    }
</script>

<style>
    .home {
        padding-top: 100px;
    }
</style>

지도 구성요소를 설정합니다.

<v-row>
    <v-col>
        <MapPane></MapPane>
    </v-col>
</v-row>

지도 구성요소를 로드합니다.

import MapPane from '@/components/MapPane.vue'

export default {
    name: 'home',
    components: {
        MapPane
    }
}

/src/구성 요소

MapPane.vue

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

<script>
    import L from 'leaflet'
    import 'mapbox-gl-leaflet'
    import { Auth, Signer } from 'aws-amplify'
    import awsconfig from '../aws-exports'

    export default {
        name: 'MapPane',
        data() {
            return {
                credentials: null,
            }
        },
        mounted: async function () {
            this.credentials = await Auth.currentCredentials()
            this.mapCreate();
        },
        methods: {
            mapCreate: function() {
                const sample = L.mapboxGL({
                    style: 'sample',
                    attribution: '© 2021 HERE',
                    transformRequest: this.transformRequest,
                });
                const map = L.map('map', {
                    center: [35.681, 139.767],
                    zoom: 14,
                    zoomControl: true,
                    layers: [sample]
                });

                const Map_BaseLayer = {
                    'sample': sample
                };

                L.control.layers(
                    Map_BaseLayer,
                    null
                ).addTo(map);
            },
            transformRequest: function (url, resourceType) {
                if (resourceType === 'Style' && !url.includes('://')) {
                    url = `https://maps.geo.${awsconfig.aws_project_region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`
                }
                if (url.includes('amazonaws.com')) {
                    return {
                        url: Signer.signUrl(url, {
                            access_key: this.credentials.accessKeyId,
                            secret_key: this.credentials.secretAccessKey,
                            session_token: this.credentials.sessionToken,
                        }),
                    }
                }
                return { url }
            },
        }
    }
</script>

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

Leaflet, Mapbox GL Leaflet 및 Amplify를 로드합니다.

import L from 'leaflet'
import 'mapbox-gl-leaflet'
import { Auth, Signer } from 'aws-amplify'
import awsconfig from '../aws-exports'

인증 정보를 얻습니다.

this.credentials = await Auth.currentCredentials()

style에서 생성된 지도의 "이름"을 지정합니다.

const sample = L.mapboxGL({
    style: 'sample',
    attribution: '© 2021 HERE',
    transformRequest: this.transformRequest,
});
const map = L.map('map', {
    center: [35.681, 139.767],
    zoom: 14,
    zoomControl: true,
    layers: [sample]
});

const Map_BaseLayer = {
    'sample': sample
};
L.control.layers(
    Map_BaseLayer,
    null
).addTo(map);

Amazon 위치 맵을 로드하도록 설정을 구성합니다.

transformRequest: function (url, resourceType) {
    if (resourceType === 'Style' && !url.includes('://')) {
        url = `https://maps.geo.${awsconfig.aws_project_region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`
    }
    if (url.includes('amazonaws.com')) {
        return {
            url: Signer.signUrl(url, {
                access_key: this.credentials.accessKeyId,
                secret_key: this.credentials.secretAccessKey,
                session_token: this.credentials.sessionToken,
            }),
        }
    }
    return { url }
},

Amplify 역할 구성

마지막 단계는 Amplify 역할에 Amazon Location Maps 정책을 추가하는 것입니다.

로그인 기능에 사용되는 역할을 검색합니다. "amplify-xxxxx-authRole"을 선택합니다.

"인라인 정책 추가"를 클릭합니다.

정책을 설정하려면 "JSON"을 선택하십시오. 생성된 맵의 "ARN"을 "Resource"로 설정합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "MapsReadOnly",
            "Effect": "Allow",
            "Action": [
                "geo:GetMapStyleDescriptor",
                "geo:GetMapGlyphs",
                "geo:GetMapSprites",
                "geo:GetMapTile"
            ],
            "Resource": "arn:aws:geo:us-west-2:xxxxx:map/sample"
        }
    ]
}

필요에 따라 이름을 설정합니다. 이번에는 "amazon-location-maps"로 설정합니다.

정책이 생성되었는지 확인합니다.

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

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

npm run serve

로컬 서버를 시작하고 로그인을 시도하십시오. 이제 Amazon Location Maps 💡를 볼 수 있습니다.

Amazon Location Service, Leaflet, AWS Amplify 및 Vue.js의 조합을 사용하여 지도 애플리케이션을 구축할 수 있었습니다 👍

사전에 Amplify를 설치하면 Amazon Location Service를 빠르게 구축할 수 있었습니다. 그러나 별도의 역할 설정이 필요하고 선택할 수 있는 제한된 스타일과 같은 일부 영역은 여전히 개선될 수 있습니다. 다른 기능도 계속 탐색하겠습니다 👍

Reference

이 문제에 관하여(Amazon Location Service, Leaflet, AWS Amplify 및 Vue.js를 사용하여 지도 애플리케이션 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aws-builders/building-a-map-application-with-amazon-location-service-leaflet-aws-amplify-and-vuejs-2l6e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[패스트캠퍼스 네카라쿠배 2기] - 31일차 공부

Microsoft Teams 어플리케이션 만들기 ②: 어플리케이션 추가 시 설정화면 사용자 정의

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다