Amazon Location Serviceによるアドレス検索機能の構築

アマゾンロケーションサービスでアドレス検索機能を構築しました🎉
Amazon Location Serviceは、AWS内の位置ベースのアプリケーションを構築するためのサービスです.現在,5種類の機能が利用可能である.今回は、アドレス検索機能を追加し、地図アプリケーションを構築!
事前準備

地図表示機能までアマゾン場所サービス設定

これは前回の記事の続きです.

アマゾン場所場所インデックスの構成
まず、AWSコンソールのAmazon Location Placeインデックスを設定します.
「場所インデックス」をクリックします.

をクリックします.

アドレス検索名を入力し、使用するデータを選択します.今回は、「Sampleplace」を選びました

作成したアドレスをクリックします.

将来の設定のためにここに表示される「名前」と「arn」をコピーしてください.

これは、Amazonの場所プレースインデックスの構成を完了します👍

フロントエンド
次に、地図アプリケーションを構築しましょう.
Amazon Location Serviceの地図表示機能を設定したら、“Mappane . vue”を変更する必要があります.
実行環境
24579172のノードV 16.3.0

NPM V 715.1

AJAZ SDKをJavaScriptパッケージにインストールします.

npm install aws-sdk

全体構成


パッケージ.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",
    "aws-sdk": "^2.935.0",
    "core-js": "^3.6.5",
    "maplibre-gl": "^1.14.1-rc.2",
    "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/コンポーネント

マタン.Vue

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

<script>
    import maplibregl from 'maplibre-gl';
    import { Auth, Signer } from 'aws-amplify';
    import awsconfig from '../aws-exports';
    import Location from 'aws-sdk/clients/location'
    let map;

    export default {
        name: 'MapPane',
        data() {
            return {
                credentials: null,
                client: null,
                params: null,
            };
        },
        mounted: async function() {
            this.credentials = await Auth.currentCredentials();
            this.mapCreate();
            this.addPlaceSearch();
        },
        methods: {
            mapCreate: function() {
                map = new maplibregl.Map({
                    container: 'map',
                    style: 'sample',
                    center: [141.35585, 43.03851],
                    zoom: 14,
                    bearing: 0,
                    pitch: 60,
                    hash: true,
                    transformRequest: this.transformRequest,
                });

                map.addControl(new maplibregl.NavigationControl());
            },
            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 };
            },
            addPlaceSearch: function() {
                this.client = new Location({
                    credentials: this.credentials,
                    region: awsconfig.aws_project_region,
                });
                this.params = {
                    IndexName: 'SamplePlace',
                    MaxResults: 1,
                    Text: 'サッポロファクトリー',
                };
                this.client.searchPlaceIndexForText(this.params, (err, data) => {
                    const label = data.Results[0].Place.Label;
                    const lng = data.Results[0].Place.Geometry.Point[0];
                    const lat = data.Results[0].Place.Geometry.Point[1];
                    map.on('load', function() {
                        const popup = new maplibregl.Popup({ 
                            offset: 40 
                        })
                        .setText(label);
                        const marker = new maplibregl.Marker({
                            color: '#005773'
                        })
                        .setLngLat([lng, lat])
                        .setPopup(popup);
                        marker.addTo(map);
                    });
                });
            },
        },
    };
</script>

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

アマゾン場所サービスをロードします.

import Location from 'aws-sdk/clients/location'

IndexNameで作成したアドレス検索の「名前」を指定して、Amazon Location Serviceとアドレスの検索設定を構成します.今回は「札幌市工場」を探しました.

this.client = new Location({
    credentials: this.credentials,
    region: awsconfig.aws_project_region
});
this.params = {
    IndexName: 'SamplePlace',
    MaxResults: 1,
    Text: 'サッポロファクトリー',
};

地図上のアドレス検索結果を描画するためにアマゾンの場所の場所インデックスを使用します.

this.client.searchPlaceIndexForText(this.params, (err, data) => {
    const label = data.Results[0].Place.Label;
    const lng = data.Results[0].Place.Geometry.Point[0];
    const lat = data.Results[0].Place.Geometry.Point[1];
    map.on('load', function() {
        const popup = new maplibregl.Popup({
            offset: 40
        })
        .setText(label);
        const marker = new maplibregl.Marker({
            color: '#005773'
        })
        .setLngLat([lng, lat])
        .setPopup(popup);
        marker.addTo(map);
    });
});

役割を構成する
最後にAmazon Location Place Indexをポリシーに追加します.
ログイン機能に使用されるロールを検索します.を選択します.

「インラインポリシーを追加」をクリックします.

「JSON」を選択してポリシーを設定し、「リソース」に作成したマップの"arn "を設定します

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Routes",
            "Effect": "Allow",
            "Action": "geo:SearchPlaceIndexForText",
            "Resource": "arn:aws:geo:us-west-2:xxxxx:place-index/SamplePlace"
        }
    ]
}

これにより、👍
簡単なローカルサーバーをチェックしましょう.

npm run serve

ローカルサーバーを起動し、ログインを試みる.アマゾンの場所の場所インデックスを見ることができます💡


Amazon Location Serviceでアドレス検索機能を構築できました👍
Amazon Location Serviceを使用することで、アドレス検索を構築するのが簡単であることを確認しました.様々なオプションが利用可能ですので、私はあなたがリファレンスとしてこのサンプルを使用してそれらを試してほしいと思います.私は他の機能も💪