Utiliser le plugin Amazon Location MapLibre Geocoder GL - Amazon Location Service
InstallationUtilisation avec le module - SDK autonome GeoPlaces Utilisation avec un navigateur - SDK autonome GeoPlaces Fonctions

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Utiliser le plugin Amazon Location MapLibre Geocoder GL

Le plugin de MapLibre géocodeur Amazon Location est conçu pour vous permettre d'intégrer plus facilement les fonctionnalités Amazon Location dans vos JavaScript applications lorsque vous travaillez sur le rendu de cartes et le géocodage à l'aide de la maplibre-gl-geocoderbibliothèque.

Installation

Installez le plugin de MapLibre géocodeur Amazon Location de NPM pour une utilisation avec les modules. Tapez cette commande :

npm install @aws/amazon-location-for-maplibre-gl-geocoder

Vous pouvez également importer des fichiers HTML et CSS pour les utiliser directement dans le navigateur à l'aide d'un script :

<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
  rel="stylesheet"
/>

Utilisation avec le module - SDK autonome GeoPlaces

Cet exemple utilise le AWS SDK pour JavaScript V3 pour obtenir un à fournir GeoPlacesClient à la bibliothèque et AuthHelperpour authentifier le. GeoPlacesClient Il active tout APIs pour le géocodeur.

// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { GeoPlacesClient } from "@aws-sdk/client-geo-places";
// Import the utility functions
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationMaplibreGeocoder
import {
  buildAmazonLocationMaplibreGeocoder,
  AmazonLocationMaplibreGeocoder,
} from "@aws/amazon-location-for-maplibre-gl-geocoder";

const apiKey = "<API Key>";
const mapName = "Standard";
const region = "<Region>"; // region containing Amazon Location API Key

// Create an authentication helper instance using an API key and region
const authHelper = await withAPIKey(apiKey, region);

const client = new GeoPlacesClient(authHelper.getClientConfig());

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/maps/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object.
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });

// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());

Utilisation avec un navigateur - SDK autonome GeoPlaces

Cet exemple utilise le client Amazon Location pour effectuer une demande authentifiée à l'aide d'une clé d'API.

Note

Certains de ces exemples utilisent l'emplacement Amazon GeoPlacesClient. Ce client est basé sur le AWS SDK pour JavaScript V3 et permet de passer des appels à Amazon Location via un script référencé dans un fichier HTML.

Incluez les éléments suivants dans un fichier HTML :

<!-- Import the Amazon Location For Maplibre Geocoder -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
  rel="stylesheet"
/>
<!-- Import the Amazon GeoPlacesClient -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script>

Incluez les éléments suivants dans un JavaScript fichier :

const apiKey = "<API Key>";
const mapStyle = "Standard";
const region = "<Region>"; // region containing Amazon Location API key

// Create an authentication helper instance using an API key and region
const authHelper = await amazonLocationClient.withAPIKey(apiKey, region);

const client = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig());

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/maps/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(
  client,
  { enableAll: true },
);

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());

Fonctions

Les fonctions utilisées dans le plug-in de MapLibre géocodeur Amazon Location sont répertoriées ci-dessous :

  • buildAmazonLocationMaplibreGeocoder

    Cette classe crée une instance deAmazonLocationMaplibreGeocder, qui est le point d'entrée de tous les autres appels.

    À l'aide d'appels GeoPlacesClient d'API autonomes (le client est une instance deGeoPlacesClient) :

    const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });

    À l'aide LocationClient d'appels d'API consolidés (le client est une instance deLocationClient) :

    const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, {
  enableAll: true,
  placesIndex: placeIndex,
});

  • getPlacesGeocoder

    Renvoie un ready-to-use IControl objet qui peut être ajouté directement à une carte.

    const geocoder = getPlacesGeocoder();

// Initialize map see: <insert link to initializing a map instance here>
let map = await initializeMap();

// Add the geocoder to the map.
map.addControl(geocoder);