Gerüste Abhängigkeiten Konfiguration Initialisierung der Karte Führen Sie die App aus

Verwenden der Amplify-Bibliothek mit Amazon Location Service

Das folgende Tutorial führt Sie durch die Verwendung AWS Amplify mit Amazon Location. Amplify verwendet MapLibre GL JS, um Karten in Ihrer JavaScript basierten Anwendung zu rendern.

Amplify ist eine Reihe von Open-Source-Clientbibliotheken, die Schnittstellen zu verschiedenen Kategorien von Diensten bieten, darunter Amplify Geo, das von Amazon Location Service betrieben wird. Erfahren Sie mehr über die AWS Amplify JavaScript Geo-Bibliothek.

Anmerkung

In diesem Tutorial wird davon ausgegangen, dass Sie die Schritte unter Verwenden von Karten — Hinzufügen einer Karte zu Ihrer Anwendung bereits befolgt haben.

Erstellung der Anwendung: Gerüste

In diesem Tutorial wird eine Webanwendung erstellt, mit der eine Karte auf einer Seite erstellt wird. JavaScript HTML

Erstellen Sie zunächst eine HTML Seite (index.html), die den Container der Map enthält:

Geben Sie ein div Element mit einem id von ein ein einmap, um die Abmessungen der Karte auf die Kartenansicht anzuwenden. Die Abmessungen werden aus dem Viewport übernommen.


<html>
  <head>
    <style>
      body { margin: 0; }
      #map { height: 100vh; } /* 100% of viewport height */
    </style>
  </head>

  <body>
    <!-- map container -->
    <div id="map" />
  </body>
</html>

Die Anwendung erstellen: Abhängigkeiten hinzufügen

Fügen Sie Ihrer Anwendung die folgenden Abhängigkeiten hinzu:

AWS Amplify Karten- und Geobibliotheken.
AWS Amplify Kernbibliothek.
AWS Amplify Authentifizierungsbibliothek.
AWS Amplify Stylesheet.


<!-- CSS dependencies -->
    <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>

<!-- JavaScript dependencies -->
    <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>
<script>
  // application-specific code
</script>

Dadurch wird eine leere Seite mit dem Container der Map erstellt.

Die Anwendung erstellen: Konfiguration

So konfigurieren Sie Ihre Anwendung mit JavaScript:

Geben Sie die Kennungen des nicht authentifizierten Identitätspools ein, den Sie unter Zuordnungen verwenden — Schritt 2, Authentifizierung einrichten erstellt haben.


// Cognito Identity Pool ID
const identityPoolId = "region:identityPoolID"; // for example: us-east-1:123example-1234-5678
// extract the Region from the Identity Pool ID
const region = identityPoolId.split(":")[0];

Konfigurieren AWS Amplify Sie so, dass die von Ihnen erstellten Ressourcen verwendet werden, einschließlich des Identitätspools und der Kartenressource (hier mit dem Standardnamen). explore.map


// Configure Amplify
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;

Amplify.configure({
  Auth: {
    identityPoolId,
    region,
  },
  geo: {
    AmazonLocationService: {
      maps: {
        items: {
          "explore.map": {
            style: "Default style"
          },
        },
        default: "explore.map",
      },
      region,
    },
  }
});

Die Anwendung erstellen: Map-Initialisierung

Damit die Map nach dem Laden der Seite angezeigt wird, müssen Sie die Map initialisieren. Sie können die ursprüngliche Kartenposition anpassen, zusätzliche Steuerelemente hinzufügen und Daten überlagern.


async function initializeMap() {
  const map = await createMap(
    {
      container: "map",
      center: [-123.1187, 49.2819],
      zoom: 10,
      hash: true,
    }
  );

  map.addControl(new maplibregl.NavigationControl(), "top-left");
}

initializeMap();

Anmerkung

Sie müssen für jeden Datenanbieter, den Sie verwenden, entweder in Ihrer Anwendung oder in Ihrer Dokumentation eine Wortmarke oder eine Textzuweisung angeben. Zuordnungszeichenfolgen sind in der Antwort auf den Stildeskriptor unter den Tasten sources.esri.attributionsources.here.attribution, und enthalten. sources.grabmaptiles.attribution Amplify stellt automatisch eine Zuordnung bereit. Wenn Sie Amazon-Standortressourcen mit Datenanbietern verwenden, lesen Sie unbedingt die Servicebedingungen.

Die Anwendung wird ausgeführt

Sie können diese Beispielanwendung ausführen, indem Sie sie auf einem lokalen Webserver verwenden oder sie in einem Browser öffnen.

Um einen lokalen Webserver zu verwenden, können Sie npx, das als Teil von Node.js installiert ist, oder einen beliebigen anderen Webserver Ihrer Wahl verwenden. Um npx zu verwenden, geben Sie npx serve aus demselben Verzeichnis wie ein. index.html Dadurch wird die Anwendung aktiviert. localhost:5000

Anmerkung

Wenn die Richtlinie, die Sie für Ihre nicht authentifizierte Amazon Cognito Cognito-Rolle erstellt haben, eine referer Bedingung enthält, werden Sie möglicherweise daran gehindert, mit zu testen. localhost: URLs In diesem Fall können Sie mit einem Webserver testen, der eine URL bereitstellt, die in Ihrer Richtlinie enthalten ist.

Nach Abschluss des Tutorials sieht die endgültige Anwendung wie im folgenden Beispiel aus.


<html>
  <head>
    <!-- CSS dependencies -->
    <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>

    <!-- JavaScript dependencies -->
    <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; }
      #map { height: 100vh; }
    </style>
  </head>

  <body>
    <div id="map" />
    <script type="module">
      // Cognito Identity Pool ID
      const identityPoolId = "region:identityPoolId"; // for example: us-east-1:123example-1234-5678
      // extract the Region from the Identity Pool ID
      const region = identityPoolId.split(":")[0];

      // Configure Amplify
      const { Amplify } = aws_amplify_core;
      const { createMap } = AmplifyMapLibre;

      Amplify.configure({
        Auth: {
          identityPoolId,
          region,
        },
        geo: {
          AmazonLocationService: {
            maps: {
              items: {
                "explore.map": {
                  style: "Default style"
                },
              },
              default: "explore.map",
            },
            region,
          },
        }
      });

      async function initializeMap() {
        const map = await createMap(
          {
            container: "map",
            center: [-123.1187, 49.2819],
            zoom: 10,
            hash: true,
          }
        );

        map.addControl(new maplibregl.NavigationControl(), "top-left");
      }

      initializeMap();
    </script>
  </body>
</html>

Wenn Sie diese Anwendung ausführen, wird eine Karte im Vollbildmodus mit dem von Ihnen ausgewählten Kartenstil angezeigt. Dieses Beispiel wird auch auf der Registerkarte Karte einbetten einer beliebigen Kartenressourcenseite in der Amazon Location Service Service-Konsole beschrieben.

Nachdem Sie dieses Tutorial abgeschlossen haben, finden Sie in der AWS Amplify Dokumentation zum Thema Karte anzeigen weitere Informationen, z. B. zur Anzeige von Markierungen auf der Karte.

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

MapLibre Nativ SDK für iOS

Anleitung: Tangram