Utilizzo di MapLibre strumenti e librerie con Amazon Location

Uno degli strumenti più importanti per creare applicazioni interattive con Amazon Location è MapLibre. MapLibreè principalmente un motore di rendering per la visualizzazione di mappe in un'applicazione web o mobile. Tuttavia, include anche il supporto per i plug-in e fornisce funzionalità per lavorare con altri aspetti di Amazon Location. Di seguito vengono descritti gli strumenti che puoi utilizzare, in base all'area di localizzazione con cui desideri lavorare.

Nota

Per utilizzare qualsiasi aspetto di Amazon Location, installa il AWS SDKper la lingua che desideri utilizzare.

• Mappe

  Per visualizzare le mappe nella tua applicazione, è necessario un motore di rendering delle mappe che utilizzi i dati forniti da Amazon Location e disegni sullo schermo. I motori di rendering delle mappe forniscono anche funzionalità per ingrandire e ingrandire la mappa o per aggiungere marcatori, puntine e altre annotazioni alla mappa.

  Amazon Location Service consiglia di eseguire il rendering delle mappe utilizzando il motore di MapLibrerendering. MapLibre GL JS è un motore per la visualizzazione di mappe JavaScript, mentre MapLibre Native fornisce mappe per iOS o Android.

  MapLibre dispone anche di un ecosistema di plug-in per estendere le funzionalità di base. Per maggiori informazioni, visita https://maplibre.org/ maplibre-gl-js-docs /plugins/.

• Ricerca luoghi

  Per semplificare la creazione di un'interfaccia utente di ricerca, puoi utilizzare il MapLibre geocodificatore per il web (le applicazioni Android possono utilizzare il plug-in Android Places).

  Usa la libreria di geocodificatori Amazon Location for Maplibre per semplificare il processo di utilizzo di Amazon Location nelle applicazioni. amazon-location-for-maplibre-gl-geocoder JavaScript

• Percorsi

  Per visualizzare i percorsi sulla mappa, usa MapLibrele indicazioni stradali.

• Geofence e tracker

  MapLibre non dispone di rendering o strumenti specifici per i geofence e il tracciamento, ma puoi utilizzare la funzionalità di rendering e i plug-in per mostrare i geofence e i dispositivi tracciati sulla mappa.

  I dispositivi monitorati possono utilizzare MQTTo inviare manualmente gli aggiornamenti ad Amazon Location Service. È possibile rispondere agli eventi Geofence utilizzando AWS Lambda.

Sono disponibili molte librerie open source per fornire funzionalità aggiuntive per Amazon Location Service, ad esempio Turf che fornisce funzionalità di analisi spaziale.

Molte librerie utilizzano dati in formato Geo JSON standard aperto. Amazon Location Service fornisce una libreria per supportare l'utilizzo di Geo JSON nelle JavaScript applicazioni. Per ulteriori informazioni, consulta la sezione successiva Ubicazione SDK e librerie Amazon.

Plugin Amazon Location MapLibre Geocoder

Il plug-in di MapLibre geocodifica Amazon Location è progettato per semplificare l'integrazione della funzionalità di Amazon Location nelle tue JavaScript applicazioni, quando lavori con il rendering di mappe e la geocodifica utilizzando la libreria. maplibre-gl-geocoder

Installazione

Puoi installare il plug-in di MapLibre geocodifica Amazon Location da NPM utilizzare con i moduli, con questo comando:

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

Puoi importarlo in un HTML file per utilizzarlo direttamente nel browser, con uno script:

<script src="https://www.unpkg.com/@aws/amazon-location-for-maplibre-gl-geocoder@1">/script<

Utilizzo con il modulo

Questo codice configura una mappa Maplibre GL JavaScript con funzionalità di geocodifica di Amazon Location. Utilizza l'autenticazione tramite Amazon Cognito Identity Pool per accedere alle risorse di Amazon Location. La mappa viene renderizzata con uno stile e delle coordinate centrali specificati e consente di cercare luoghi sulla mappa.

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

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing the Amazon Location resource
const placeIndex = "PlaceIndexName" // Name of your places resource in your AWS Account. 

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await withIdentityPoolId("Identity Pool ID");

const client = new LocationClient({
  region: "Region", // Region containing Amazon Location resources
  ...authHelper.getLocationClientConfig(), // Configures the client to use credentials obtained via Amazon Cognito
});

// 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/v0/maps/${mapName}/style-descriptor`,
    ...authHelper.getMapAuthenticationOptions(),
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object. 
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placeIndex, {enableAll: true});
    
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());

Utilizzo con un browser

Questo esempio utilizza Amazon Location Client per effettuare una richiesta di autenticazione tramite Amazon Cognito.

Nota

Alcuni di questi esempi utilizzano Amazon Location Client. L'Amazon Location Client si basa su AWS SDKper JavaScript V3 e consente di effettuare chiamate ad Amazon Location tramite uno script a cui si fa riferimento in un HTML file.

Includi quanto segue in un HTML file:

< Import the Amazon Location With Maplibre Geocoder>
<script src="https://www.unpkg.com/@aws/amazon-location-with-maplibre-geocoder@1"></script>
<Import the Amazon Location Client>
<script src="https://www.unpkg.com/@aws/amazon-location-client@1"></script>
<!Import the utility library>
<script src="https://www.unpkg.com/@aws/amazon-location-utilities-auth-helper@1"></script>

Includi quanto segue in un JavaScript file:

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing Amazon Location resource

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

// 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/v0/maps/${mapName}/style-descriptor`,
  ...authHelper.getMapAuthenticationOptions(),
});

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

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

Di seguito sono elencate le funzioni e i comandi utilizzati nel plug-in MapLibre geocoder Amazon Location:

• buildAmazonLocationMaplibreGeocoder

  Questa classe crea un'istanza di AmazonLocationMaplibreGeocder che è il punto di ingresso per tutte le altre chiamate:

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

• getPlacesGeocoder

  Restituisce un IControl oggetto pronto all'uso che può essere aggiunto direttamente a una mappa.

  const geocoder = getPlacesGeocoder();
  
  // Initialize map
  let map = await initializeMap();
  
  // Add the geocoder to the map. 
  map.addControl(geocoder);