アマゾンの位置情報サービスのための新しいマップスタイルのシンプルなビュー

17939 ワード

amazonlocationservice maplibre amplifygeo amplify テキストリンク

Amazon Location Serviceの新しい地図スタイル🎉

最近新しいAmazon Location Service マップのスタイルが利用されている:“ここで探索”、洗練されたデザインマップのスタイル、および“ここでトラックを探る”トラックの制限と属性を追加しました.“ここで探る”スタイルは、また、日本のローカライズを適用するAmazon Locationサービスの最初のスタイルです.今回は、“ここで”単に探検を表示!
事前準備

AWSのインストール

AWS Amplify #001 - Installation
実行環境

ノードV 16.10.0

NPM v 724.0

AWSを設定する

まず、AWSの増幅を設定します.
通常の認証機能を追加します.マップ関数については、既定のマップスタイル“ESRIストリートマップ”を選択し、アクセス対象を「認定ユーザーとゲストユーザー」に設定します

amplify init

amplify add auth

amplify add geo

amplify push

これにより、AWS増幅構成が完了する👍

マップアプリケーションの構築

次に、実際の地図アプリケーションを構築しましょう.
今回、私たちは最も簡単な構成、“index . html”を構築しました.
全体構成

インデックス.HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Display a map on a webpage</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
        <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <style>
            body { margin: 0; padding: 0; }
            #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="module">
            import awsconfig from "./aws-exports.js";
            const { Amplify } = aws_amplify_core;
            const { createMap } = AmplifyMapLibre;
            Amplify.configure(awsconfig);
            createMap({
                container: "map",
                center: [139.7648, 35.6794],
                zoom: 15,
                bearing: 64.8,
                pitch: 60,
            });
        </script>
    </body>
</html>

各ライブラリを読み込みます.

<link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
<script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

地図配置設定.

<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>

地図表示設定.

<div id="map"></div>
<script type="module">
    import awsconfig from "./aws-exports.js";
    const { Amplify } = aws_amplify_core;
    const { createMap } = AmplifyMapLibre;
    Amplify.configure(awsconfig);
    createMap({
        container: "map",
        center: [139.7648, 35.6794],
        zoom: 15,
        bearing: 64.8,
        pitch: 60,
    });
</script>

あなたがディスプレイをチェックするならば、あなたはデフォルトの地図スタイルを見ます

新しいマップスタイルを設定する

最後に、新しいマップスタイルを設定します.
2022年4月の時点で、新しい地図のスタイルは、Amazonのロケーションサービスに追加されている機能はまだAWSの増幅に追加されていません.一部が追加されるまで、これは仮のサポートです.
管理コンソール→ アマゾンロケーションサービス→ 作成したスタイルを選択→ コピー名と地図名→ マップを削除する