Sdílet prostřednictvím


Zobrazení pokynů pro trasu z A do B

V tomto článku se dozvíte, jak vytvořit žádost o trasu a zobrazit trasu na mapě.

Existují dva způsoby, jak to udělat. Prvním způsobem je dotazování rozhraní API Get Route Directions pomocí sady TypeScript REST SDK @azure-rest/maps-route. Druhým způsobem je použít rozhraní Fetch API k vytvoření požadavku na vyhledávání v rozhraní API Get Route Directions API. Oba přístupy jsou popsány v tomto článku.

Dotazování na trasu pomocí sady REST SDK

import * as atlas from "azure-maps-control";
import MapsRoute, { toColonDelimitedLatLonString } from "@azure-rest/maps-route";
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 Route client.
    const client = MapsRoute(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);

    // Create the GeoJSON objects which represent the start and end points of the route.
    const startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
      title: "Redmond",
      icon: "pin-blue"
    });

    const endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
      title: "Seattle",
      icon: "pin-round-blue"
    });

    // Add the data to the data source.
    dataSource.add([startPoint, endPoint]);

    // Create a layer for rendering the route line under the road labels.
    map.layers.add(
      new atlas.layer.LineLayer(dataSource, null, {
        strokeColor: "#2272B9",
        strokeWidth: 5,
        lineJoin: "round",
        lineCap: "round"
      }),
      "labels"
    );

    // Create a layer for rendering the start and end points of the route as symbols.
    map.layers.add(
      new atlas.layer.SymbolLayer(dataSource, null, {
        iconOptions: {
          image: ["get", "icon"],
          allowOverlap: true,
          ignorePlacement: true
        },
        textOptions: {
          textField: ["get", "title"],
          offset: [0, 1.2]
        },
        filter: ["any", ["==", ["geometry-type"], "Point"], ["==", ["geometry-type"], "MultiPoint"]] //Only render Point or MultiPoints in this layer.
      })
    );

    // Get the coordinates of the start and end points.
    const coordinates = [
      [startPoint.geometry.coordinates[1], startPoint.geometry.coordinates[0]],
      [endPoint.geometry.coordinates[1], endPoint.geometry.coordinates[0]]
    ];

    // Get the route directions between the start and end points.
    const response = await client.path("/route/directions/{format}", "json").get({
      queryParameters: {
        query: toColonDelimitedLatLonString(coordinates)
      }
    });

    // Get the GeoJSON feature collection of the route.
    const data = getFeatures(response.body.routes);

    // Add the route data to the data source.
    dataSource.add(data);

    // Update the map view to center over the route.
    map.setCamera({
      bounds: data.bbox,
      padding: 40
    });
  });
};

/**
 * Helper function to convert a route response into a GeoJSON FeatureCollection.
 */
const getFeatures = (routes) => {
  const bounds = [];
  const features = routes.map((route, index) => {
    const multiLineCoords = route.legs.map((leg) => {
      return leg.points.map((coord) => {
        const position = [coord.longitude, coord.latitude];
        bounds.push(position);
        return position;
      });
    });

    // Include all properties on the route object except legs.
    // Legs is used to create the MultiLineString, so we only need the summaries.
    // The legSummaries property replaces the legs property with just summary data.
    const props = {
      ...route,
      legSummaries: route.legs.map((leg) => leg.summary),
      resultIndex: index
    };
    delete props.legs;

    return {
      type: "Feature",
      geometry: {
        type: "MultiLineString",
        coordinates: multiLineCoords
      },
      properties: props
    };
  });

  return {
    type: "FeatureCollection",
    features: features,
    bbox: new atlas.data.BoundingBox.fromLatLngs(bounds)
  };
};

document.body.onload = onload;

V předchozím příkladu kódu první blok vytvoří objekt mapy a nastaví ověřovací mechanismus tak, aby používal Microsoft Entra ID. Pokyny najdete v tématu Vytvoření mapy .

Druhý blok kódu vytvoří objekt, který implementuje rozhraní TokenCredential pro ověřování požadavků HTTP do Azure Mapy pomocí přístupového tokenu. Pak předá objekt přihlašovacích údajů Mapy Route a vytvoří instanci klienta.

Třetí blok kódu vytvoří a přidá objekt DataSource do mapy.

Čtvrtý blok kódu vytvoří objekty počátečních a koncových bodů a přidá je do objektu dataSource.

Řádek je funkce pro linestring. LineLayer vykresluje řádkové objekty zabalené v DataSource jako čáry na mapě. Čtvrtý blok kódu vytvoří a přidá do mapy vrstvu řádku. Zobrazit vlastnosti vrstvy čáry v LinestringLayerOptions.

Vrstva symbolů používá texty nebo ikony k vykreslení dat založených na bodech zabalených v Zdroji dat. Texty nebo ikony se vykreslují jako symboly na mapě. Pátý blok kódu vytvoří a přidá do mapy vrstvu symbolů.

Šestý blok kódu dotazuje službu směrování Azure Mapy, která je součástí klienta Mapy Route. Požadavek GET slouží k získání trasy mezi počátečními a koncovými body. Kolekce funkcí GeoJSON z odpovědi se pak extrahuje pomocí getFeatures() pomocné funkce a přidá se do zdroje dat. Potom vykreslí odpověď jako trasu na mapě. Další informace o přidání čáry do mapy naleznete v tématu Přidání čáry na mapě.

Poslední blok kódu nastaví hranice mapy pomocí vlastnosti Map set Kamera.

Směrovací dotaz, zdroj dat, symbol, vrstvy čáry a hranice kamery se vytvářejí uvnitř naslouchacího procesu událostí. Tato struktura kódu zajišťuje, že se výsledky zobrazí až po úplném načtení mapy.

Dotazování na trasu prostřednictvím rozhraní API pro načtení

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", async () => {
    // Create a data source and add it to the map.
    const dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    // Create the GeoJSON objects which represent the start and end points of the route.
    const startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
      title: "Redmond",
      icon: "pin-blue"
    });

    const endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
      title: "Seattle",
      icon: "pin-round-blue"
    });

    // Add the data to the data source.
    dataSource.add([startPoint, endPoint]);

    // Create a layer for rendering the route line under the road labels.
    map.layers.add(
      new atlas.layer.LineLayer(dataSource, null, {
        strokeColor: "#2272B9",
        strokeWidth: 5,
        lineJoin: "round",
        lineCap: "round"
      }),
      "labels"
    );

    // Create a layer for rendering the start and end points of the route as symbols.
    map.layers.add(
      new atlas.layer.SymbolLayer(dataSource, null, {
        iconOptions: {
          image: ["get", "icon"],
          allowOverlap: true,
          ignorePlacement: true
        },
        textOptions: {
          textField: ["get", "title"],
          offset: [0, 1.2]
        },
        filter: ["any", ["==", ["geometry-type"], "Point"], ["==", ["geometry-type"], "MultiPoint"]] //Only render Point or MultiPoints in this layer.
      })
    );

    // Send a request to the route API
    let url = "https://atlas.microsoft.com/route/directions/json?";
    url += "&api-version=1.0";
    url +=
      "&query=" +
      startPoint.geometry.coordinates[1] +
      "," +
      startPoint.geometry.coordinates[0] +
      ":" +
      endPoint.geometry.coordinates[1] +
      "," +
      endPoint.geometry.coordinates[0];

    // Process request
    fetch(url, {
      headers: {
        Authorization: "Bearer " + map.authentication.getToken(),
        "x-ms-client-id": "<Your Azure Maps Client Id>"
      }
    })
      .then((response) => response.json())
      .then((response) => {
        const bounds = [];
        const route = response.routes[0];
        
        // Create an array to store the coordinates of each turn
        let routeCoordinates = [];
        route.legs.forEach((leg) => {
          const legCoordinates = leg.points.map((point) => {
            const position = [point.longitude, point.latitude];
            bounds.push(position);
            return position;
          });
          // Add each turn coordinate to the array
          routeCoordinates = routeCoordinates.concat(legCoordinates);
        });

        // Add route line to the dataSource
        dataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));

        // Update the map view to center over the route.
        map.setCamera({
          bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
          padding: 40
        });
      });
  });
};

document.body.onload = onload;

V předchozím příkladu kódu první blok kódu vytvoří objekt mapy a nastaví ověřovací mechanismus tak, aby používal Microsoft Entra ID. Pokyny najdete v tématu Vytvoření mapy .

Druhý blok kódu vytvoří a přidá objekt DataSource do mapy.

Třetí blok kódu vytvoří počáteční a cílové body pro trasu. Pak je přidá do zdroje dat. Další informace najdete v tématu Přidání špendlíku na mapě.

LineLayer vykresluje řádkové objekty zabalené v DataSource jako čáry na mapě. Čtvrtý blok kódu vytvoří a přidá do mapy vrstvu řádku. Zobrazit vlastnosti vrstvy čáry v LineLayerOptions.

Vrstva symbolů používá text nebo ikony k vykreslení dat založených na bodech zabalených v Zdroji dat jako symbolů na mapě. Pátý blok kódu vytvoří a přidá do mapy vrstvu symbolů. Prohlédněte si vlastnosti vrstvy symbolů na adrese SymbolLayerOptions.

Další blok kódu používá rozhraní Fetch API k vytvoření požadavku vyhledávání na získání směrů trasy. Odpověď se pak parsuje. Pokud byla odpověď úspěšná, informace o zeměpisné šířce a délce se použijí k vytvoření maticové čáry propojením těchto bodů. Spojnicová data se pak přidají do zdroje dat pro vykreslení trasy na mapě. Další informace naleznete v tématu Přidání čáry na mapě.

Poslední blok kódu nastaví hranice mapy pomocí vlastnosti Map set Kamera.

Směrovací dotaz, zdroj dat, symbol, vrstvy čáry a hranice kamery se vytvářejí uvnitř naslouchacího procesu událostí. Znovu chceme zajistit, aby se výsledky zobrazovaly po úplném načtení mapy.

Následující obrázek je snímek obrazovky znázorňující výsledky dvou ukázek kódu.

A screenshot of a map showing route directions between two points.

Další kroky

Další informace o třídách a metodách používaných v tomto článku:

Map

Úplné příklady kódu najdete v následujících článcích: