Keresési eredmények megjelenítése a térképen

Cikk
10/18/2023

Ez a cikk bemutatja, hogyan kereshet a keresett helyre, és hogyan jelenítheti meg a keresési eredményeket a térképen.

Kétféleképpen kereshet egy érdekes helyet. Ennek egyik módja a TypeScript REST SDK, @azure-rest/maps-search használata keresési kérelem létrehozásához. A másik módszer az, hogy keresési kérelmet küld az Azure Térképek Fuzzy search API-nak a Fetch API-n keresztül. Mindkét módszert ebben a cikkben ismertetjük.

Keresési kérelem kérése REST SDK-val

import * as atlas from "azure-maps-control";
import MapsSearch from "@azure-rest/maps-search";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client Id>",
      aadAppId: "<Your Azure Active Directory Client Id>",
      aadTenant: "<Your Azure Active Directory Tenant Id>"
    }
  });

  map.events.add("load", async () => {
    // Use the access token from the map and create an object that implements the TokenCredential interface.
    const credential = {
      getToken: () => {
        return {
          token: map.authentication.getToken()
        };
      }
    };

    // Create a Search client.
    const client = MapsSearch(credential, "<Your Azure Maps Client Id>");

    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Search for gas stations near Seattle.
    const response = await client.path("/search/fuzzy/{format}", "json").get({
      queryParameters: {
        query: "gasoline station",
        lat: 47.6101,
        lon: -122.34255
      }
    });

    // Arrays to store bounds for results.
    const bounds = [];

    // Convert the response into Feature and add it to the data source.
    const searchPins = response.body.results.map((result) => {
      const position = [result.position.lon, result.position.lat];
      bounds.push(position);
      return new atlas.data.Feature(new atlas.data.Point(position), {
        position: result.position.lat + ", " + result.position.lon
      });
    });

     // Add the pins to the data source.
    datasource.add(searchPins);

    // Set the camera to the bounds of the pins
    map.setCamera({
      bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
      padding: 40
    });
  });
};

document.body.onload = onload;

Az előző kód példában az első blokk létrehoz egy térképobjektumot, és beállítja a hitelesítési mechanizmust a Microsoft Entra ID használatára. További információ: Térkép létrehozása.

A második kódblokk létrehoz egy objektumot, amely implementálja a TokenCredential felületet a HTTP-kérések Azure-Térképek való hitelesítéséhez a hozzáférési jogkivonattal. Ezután átadja a hitelesítő objektumot a Térképek Searchnek, és létrehozza az ügyfél egy példányát.

A kód harmadik blokkja létrehoz egy adatforrás-objektumot a DataSource osztály használatával, és hozzáadja a keresési eredményeket. A szimbólumrétegek szöveggel vagy ikonokkal jelenítik meg az Adatforrásba burkolt pontalapú adatokat szimbólumként a térképen. Ezután létrejön egy szimbólumréteg. A rendszer hozzáadja az adatforrást a szimbólumréteghez, amelyet aztán hozzáad a térképhez.

A negyedik kódblokk get kérést küld a Térképek Search-ügyfélben. Lehetővé teszi, hogy ingyenes szöveges keresést végezzen a Get Search Fuzzy rest API-n keresztül, hogy megkeresse az érdeklődési pontot. A Search Fuzzy API kéréseinek lekérése képes kezelni a homályos bemenetek bármilyen kombinációját. A válasz ezután funkcióobjektumokká alakul, és hozzáadódik az adatforráshoz, ami automatikusan azt eredményezi, hogy az adatok a térképen a szimbólumrétegen keresztül jelennek meg.

Az utolsó kódblokk a Térkép beállítása Kamera tulajdonság használatával módosítja a térkép kamerahatárait.

A keresési kérelem, az adatforrás, a szimbólumréteg és a kamerahatárok a térkép eseményfigyelőjének belsejében találhatók. Biztosítani szeretnénk, hogy az eredmények megjelenjenek a térkép teljes betöltése után.

Keresési kérés kérése a Fetch API-val

import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client Id>",
      aadAppId: "<Your Azure Active Directory Client Id>",
      aadTenant: "<Your Azure Active Directory Tenant Id>"
    }
  });

  map.events.add("load", () => {
    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Send a request to Azure Maps search API
    let url = "https://atlas.microsoft.com/search/fuzzy/json?";
    url += "&api-version=1";
    url += "&query=gasoline%20station";
    url += "&lat=47.6101";
    url += "&lon=-122.34255";
    url += "&radius=100000";

    // Parse the API response and create a pin on the map for each result
    fetch(url, {
      headers: {
        Authorization: "Bearer " + map.authentication.getToken(),
        "x-ms-client-id": "<Your Azure Maps Client Id>"
      }
    })
      .then((response) => response.json())
      .then((response) => {
        // Arrays to store bounds for results.
        const bounds = [];

        // Convert the response into Feature and add it to the data source.
        const searchPins = response.results.map((result) => {
          const position = [result.position.lon, result.position.lat];
          bounds.push(position);
          return new atlas.data.Feature(new atlas.data.Point(position), {
            position: result.position.lat + ", " + result.position.lon
          });
        });

        // Add the pins to the data source.
        datasource.add(searchPins);

        // Set the camera to the bounds of the pins
        map.setCamera({
          bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
          padding: 40
        });
      });
  });
};

document.body.onload = onload;

Az előző kód példában az első kódblokk egy térképobjektumot hoz létre. Beállítja a hitelesítési mechanizmust a Microsoft Entra-azonosító használatára. További információ: Térkép létrehozása.

A második kódblokk létrehoz egy adatforrás-objektumot a DataSource osztály használatával, és hozzáadja a keresési eredményeket. A szimbólumrétegek szöveggel vagy ikonokkal jelenítik meg az Adatforrásba burkolt pontalapú adatokat szimbólumként a térképen. Ezután létrejön egy szimbólumréteg. A rendszer hozzáadja az adatforrást a szimbólumréteghez, amelyet aztán hozzáad a térképhez.

A kód harmadik blokkja létrehoz egy URL-címet a keresési kéréshez.

A negyedik kódblokk a Fetch API-t használja. A Fetch API használatával kérést intézhet az Azure Térképek Fuzzy search API-hoz, hogy megkeresse az érdekes pontokat. A Fuzzy search API képes kezelni a homályos bemenetek bármilyen kombinációját. Ezután kezeli és elemzi a keresési választ, és hozzáadja az eredménycsapokat a searchPins tömbhöz.

Az utolsó kódblokk létrehoz egy BoundingBox objektumot. Az eredmények tömbjét használja, majd a térkép kamerahatárait a Térkép készletével állítja be Kamera. Ezután rendereli az eredménycsapokat.

A keresési kérelem, az adatforrás, a szimbólumréteg és a kamerahatárok a térkép eseményfigyelőjén belül vannak beállítva, hogy az eredmények megjelenjenek a térkép teljes betöltése után.

Az alábbi képen egy képernyőkép látható a két kódminta eredményeiről.