Verwenden von MapLibre GL JS mit Amazon Location Service - Amazon Location Service
GerüsteAbhängigkeitenKonfigurationInitialisierung der KarteFühren Sie die App aus

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Verwenden von MapLibre GL JS mit Amazon Location Service

Verwenden Sie MapLibre GL JS, um clientseitige Karten in Webanwendungen einzubetten.

MapLibre GL JS ist eine JavaScript Open-Source-Bibliothek, die mit den Stilen und Kacheln kompatibel ist, die von Amazon Location Service Maps API bereitgestellt werden. Sie können MapLibre GL JS in eine Basis HTML - oder JavaScript Anwendung integrieren, um anpassbare und responsive clientseitige Karten einzubetten.

In diesem Tutorial wird beschrieben, wie Sie MapLibre GL JS in Amazon Location in einer HTML JavaScript Basisanwendung integrieren. Dieselben Bibliotheken und Techniken, die in diesem Tutorial vorgestellt werden, gelten auch für Frameworks wie React und Angular.

Die Beispielanwendung für dieses Tutorial ist als Teil des Amazon Location Service Samples Repository unter verfügbar GitHub.

Erstellung der Anwendung: Scaffolding

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: 

<!-- CSS dependencies -->
<link
  href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css"
  rel="stylesheet"
/>
<!-- JavaScript dependencies -->
<script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@aws/amazon-location-authentication-helper.js"></script>
<script>
  // application-specific code
</script>

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

Die Anwendung erstellen: Konfiguration

So konfigurieren Sie Ihre Anwendung mit JavaScript:

  1. Geben Sie die Namen und Kennungen Ihrer Ressourcen ein.

    // Cognito Identity Pool ID
const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd";
// Amazon Location Service Map name
const mapName = "ExampleMap";

  2. Instanziieren Sie einen Anmeldeinformationsanbieter mithilfe des nicht authentifizierten Identitätspools, den Sie unter Karten verwenden — Schritt 2, Authentifizierung einrichten erstellt haben. Wir werden dies in eine Funktion namens einfügeninitializeMap, die auch anderen Map-Initialisierungscode enthält, der im nächsten Schritt hinzugefügt wurde

    // extract the Region from the Identity Pool ID; this will be used for both Amazon Cognito and Amazon Location
AWS.config.region = identityPoolId.split(":")[0];
 
async function initializeMap() {
  // Create an authentication helper instance using credentials from Cognito
  const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

  // ... more here, later
}

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() {
  // Create an authentication helper instance using credentials from Cognito
  const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);
 
  // Initialize the map
  const map = new maplibregl.Map({
    container: "map",
    center: [-123.1187, 49.2819], // initial map centerpoint
    zoom: 10, // initial map zoom
    style: 'https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor',
    ...authHelper.getMapAuthenticationOptions(), // authentication, using cognito
  });
 
  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 MapLibre GL JS stellt automatisch die 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 verwenden, da er als Teil von Node.js installiert ist. Sie können es npx serve aus demselben Verzeichnis wie index.html verwenden. Dies dient der Anwendung amlocalhost: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, damit zu testen. localhost: URLs In diesem Fall können Sie mit einem Webserver testen, der eine solche bereitstellt, die in Ihrer Richtlinie URL enthalten ist.

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

<!-- index.html -->
<html>
  <head>
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
      }
      #map {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- map container -->
    <div id="map" />
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-authentication-helper.js"></script>
    <script>
      // configuration
      const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd"; // Cognito Identity Pool ID
      const mapName = "ExampleMap"; // Amazon Location Service Map Name

      // extract the region from the Identity Pool ID
      const region = identityPoolId.split(":")[0];

      async function initializeMap() {
        // Create an authentication helper instance using credentials from Cognito
        const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

        // Initialize the map
        const map = new maplibregl.Map({
          container: "map",
          center: [-123.115898, 49.295868],
          zoom: 10,
          style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
          ...authHelper.getMapAuthenticationOptions(),
        });
        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 ist im Amazon Location Service Samples Repository unter verfügbar GitHub.