Menggunakan MapLibre alat dan pustaka dengan Lokasi Amazon

Salah satu alat penting untuk membuat aplikasi interaktif dengan Lokasi Amazon adalah MapLibre. MapLibreterutama mesin rendering untuk menampilkan peta di web atau aplikasi seluler. Namun, itu juga mencakup dukungan untuk plug-in, dan menyediakan fungsionalitas untuk bekerja dengan aspek lain dari Lokasi Amazon. Berikut ini menjelaskan alat yang dapat Anda gunakan, berdasarkan area lokasi yang ingin Anda gunakan.

catatan

Untuk menggunakan aspek apa pun dari Lokasi Amazon, instal AWS SDK untuk bahasa yang ingin Anda gunakan.

• Peta

  Untuk menampilkan peta dalam aplikasi Anda, Anda memerlukan mesin rendering peta yang akan menggunakan data yang disediakan oleh Amazon Location, dan menggambar ke layar. Mesin rendering peta juga menyediakan fungsionalitas untuk menggeser dan memperbesar peta, atau untuk menambahkan penanda atau pin tekan dan anotasi lainnya ke peta.

  Amazon Location Service merekomendasikan merender peta menggunakan mesin MapLibrerendering. MapLibre GL JS adalah mesin untuk menampilkan peta JavaScript, sementara MapLibre Native menyediakan peta untuk iOS atau Android.

  MapLibre juga memiliki ekosistem plug-in untuk memperluas fungsionalitas inti. Untuk informasi lebih lanjut, kunjungi https://maplibre.org/ maplibre-gl-js-docs /plugins/.

• Pencarian tempat

  Untuk membuat antarmuka pengguna pencarian lebih sederhana, Anda dapat menggunakan MapLibre geocoder untuk web (aplikasi Android dapat menggunakan plug-in Android Places).

  Gunakan perpustakaan geocoder Lokasi Amazon untuk Maplibre untuk menyederhanakan proses menggunakan Lokasi Amazon dengan di Aplikasi. amazon-location-for-maplibre-gl-geocoder JavaScript

• Rute

  Untuk menampilkan rute di peta, gunakan MapLibrepetunjuk arah.

• Geofences dan Pelacak

  MapLibre tidak memiliki rendering atau alat khusus untuk geofences dan pelacakan, tetapi Anda dapat menggunakan fungsionalitas rendering dan plug-in untuk menampilkan geofences dan perangkat yang dilacak di peta.

  Perangkat yang dilacak dapat menggunakan MQTT atau mengirim pembaruan secara manual ke Amazon Location Service. Peristiwa geofence dapat ditanggapi dengan menggunakan. AWS Lambda

Banyak pustaka open source tersedia untuk menyediakan fungsionalitas tambahan untuk Amazon Location Service, misalnya Turf yang menyediakan fungsionalitas analisis spasial.

Banyak pustaka menggunakan data berformat GeoJSON standar terbuka. Amazon Location Service menyediakan library untuk mendukung penggunaan GeoJSON dalam aplikasi JavaScript . Untuk informasi lebih lanjut, lihat bagian selanjutnya, SDK dan pustaka Lokasi Amazon.

Plugin MapLibre Geocoder Lokasi Amazon

Plugin MapLibre geocoder Lokasi Amazon dirancang untuk memudahkan Anda memasukkan fungsionalitas Lokasi Amazon ke dalam JavaScript aplikasi Anda, saat bekerja dengan rendering peta dan geocoding menggunakan perpustakaan. maplibre-gl-geocoder

Penginstalan

Anda dapat menginstal plugin MapLibre geocoder Lokasi Amazon dari NPM untuk penggunaan dengan modul, dengan perintah ini:

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

Anda dapat mengimpor ke file HTML untuk digunakan langsung di browser, dengan skrip:

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

Penggunaan dengan Modul

Kode ini menyiapkan JavaScript peta Maplibre GL dengan kemampuan geocoding Lokasi Amazon. Ini menggunakan otentikasi melalui Amazon Cognito Identity Pool untuk mengakses sumber daya Lokasi Amazon. Peta dirender dengan gaya dan koordinat pusat yang ditentukan, dan memungkinkan untuk mencari tempat di peta.

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

Penggunaan dengan browser

Contoh ini menggunakan Klien Lokasi Amazon untuk membuat permintaan yang mengautentikasi menggunakan Amazon Cognito.

catatan

Beberapa contoh ini menggunakan Amazon Location Client. Klien Lokasi Amazon didasarkan pada AWS SDK untuk JavaScript V3 dan memungkinkan untuk melakukan panggilan ke Lokasi Amazon melalui skrip yang direferensikan dalam file HTML.

Sertakan yang berikut ini dalam file HTML:

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

Sertakan yang berikut ini dalam 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 bawah ini adalah fungsi, dan perintah yang digunakan dalam plugin MapLibre geocoder Lokasi Amazon:

• buildAmazonLocationMaplibreGeocoder

  Kelas ini menciptakan sebuah instance dari AmazonLocationMaplibreGeocder yang merupakan titik masuk ke yang lain semua panggilan lainnya:

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

• getPlacesGeocoder

  Mengembalikan objek iControl siap pakai yang dapat ditambahkan langsung ke peta.

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