Gunakan plugin Amazon Location MapLibre Geocoder GL

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

Instal plugin MapLibre geocoder Lokasi Amazon dari NPM untuk penggunaan dengan modul. Ketik perintah ini:

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

Anda juga dapat mengimpor file HTML dan CSS untuk digunakan langsung di browser dengan skrip:

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

Penggunaan dengan modul - SDK mandiri GeoPlaces

Contoh ini menggunakan AWS SDK untuk JavaScript V3 untuk mendapatkan a untuk menyediakan GeoPlacesClient ke perpustakaan dan AuthHelperuntuk mengautentikasi. GeoPlacesClient Ini memungkinkan semua APIs untuk geocoder.

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

Penggunaan dengan browser - SDK mandiri GeoPlaces

Contoh ini menggunakan klien Lokasi Amazon untuk membuat permintaan yang mengautentikasi menggunakan kunci API.

catatan

Beberapa contoh ini menggunakan Lokasi Amazon GeoPlacesClient. Klien ini 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 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>

Sertakan yang berikut ini dalam JavaScript file:

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

Fungsi

Di bawah ini adalah fungsi yang digunakan dalam plugin MapLibre geocoder Lokasi Amazon:

• buildAmazonLocationMaplibreGeocoder

  Kelas ini menciptakan sebuah instance dariAmazonLocationMaplibreGeocder, yang merupakan titik masuk ke yang lain semua panggilan lainnya.

  Menggunakan panggilan GeoPlacesClient API mandiri (klien adalah instance dariGeoPlacesClient):

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

  Menggunakan panggilan LocationClient API terkonsolidasi (klien adalah instance dariLocationClient):

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

• getPlacesGeocoder

  Mengembalikan ready-to-use IControl objek yang dapat ditambahkan langsung ke peta.

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