Uso de un complemento de GL geocodificador MapLibre de Amazon Location - Amazon Location Service
InstalaciónUso con el módulo: GeoPlaces SDK independienteUso con un navegador: GeoPlaces SDK independienteFunciones

Uso de un complemento de GL geocodificador MapLibre de Amazon Location

El complemento de geocodificador MapLibre para Amazon Location está diseñado para facilitar la incorporación de la funcionalidad Amazon Location en sus aplicaciones de JavaScript cuando trabaja con la representación de mapas y la geocodificación mediante la biblioteca maplibre-gl-geocoder.

Instalación

Instale el complemento de geocodificador MapLibre de Amazon Location desde NPM para el uso con módulos. Escriba este comando:

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

Puede importar también archivos HTML y CSS para usarlos directamente en el navegador con 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"
/>

Uso con el módulo: GeoPlaces SDK independiente

En este ejemplo, se utiliza el AWSSDK para JavaScript V3 para obtener un GeoPlacesClient para proporcionarlo a la biblioteca y un AuthHelper para autenticar el GeoPlacesClient. Habilita todas las API del geocodificador.

// 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/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());

Uso con un navegador: GeoPlaces SDK independiente

En este ejemplo, se utiliza el cliente de Amazon Location para realizar una solicitud que se autentica mediante una clave de API.

nota

Algunos de estos ejemplos utilizan el GeoPlacesClient de Amazon Location. El cliente se basa en el AWS SDK para JavaScript V3 y permite realizar llamadas a Amazon Location mediante un script al que se hace referencia en un archivo HTML.

Incluya lo siguiente en un archivo 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>

Incluya lo siguiente en un archivo JavaScript:

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/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());

Funciones

A continuación, se muestran las funciones usadas en el complemento del geocodificador MapLibre de Amazon Location:

  • buildAmazonLocationMaplibreGeocoder

    Esta clase crea una instancia del AmazonLocationMaplibreGeocder, que es el punto de entrada para las demás llamadas.

    Uso de llamadas a la API de GeoPlacesClient independientes (el cliente es una instancia de GeoPlacesClient):

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

    Uso de llamadas a la API de LocationClient consolidadas (el cliente es una instancia de LocationClient):

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

  • getPlacesGeocoder

    Devuelve un objeto IControl listo para usar que se puede agregar directamente a un mapa.

    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);