Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Menggunakan MapLibre alat dan pustaka dengan Lokasi Amazon
Salah satu alat penting untuk membuat aplikasi interaktif dengan Lokasi Amazon adalah MapLibre. MapLibre
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 MapLibre
rendering. 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
Banyak pustaka menggunakan data berformat GeoJSON
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);