Руководство по отображению маршрутов с помощью службы маршрутов Azure Maps и элемента управления map

Статья
11/05/2024

В этом руководстве показано, как применить API службы "Построение маршрутов" Azure Maps и элемент управления картой для отображения направлений маршрута от начальной до конечной точки. В этом руководстве показано, как:

создание и отображение элемента управления картой на веб-странице;
определение отрисовки маршрута через слои символов и слои линий;
создание и добавление на карту объектов GeoJSON, которые будут представлять начальную и конечную точки;
получение направлений маршрута от начальной до конечной точки, используя API "Получение направлений маршрута".

Исходный код см. в руководстве route на GitHub. Пример см. в статье Прокладывание маршрута до точки интереса в службе "Карты Azure".

Необходимые компоненты

Учетная запись Azure Maps
Ключ подписки

Создание и отображение элемента управления картой

В следующих шагах описаны создание и отображение элемента управления картой на веб-странице.

На локальном компьютере создайте файл MapRoute.html.

Добавьте в файл следующий код HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Map Route</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource, client;

        function GetMap() {
            //Add Map Control JavaScript code here.
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

Некоторые сведения о HTML:

Заголовок HTML включает файлы ресурсов CSS и JavaScript, размещенные в библиотеке управления картой Azure.
Событие onload в тексте страницы вызывает GetMap функцию, когда текст страницы завершит загрузку.
Функция GetMap содержит встроенный код JavaScript, используемый для доступа к API Azure Maps. Эта функция добавляется на следующем шаге.

Затем добавьте следующий код JavaScript в функцию GetMap сразу после кода, добавленного на предыдущем шаге. Этот код создает элемент управления картой и инициализирует его с помощью предоставленных ключей подписки Azure Maps. Обязательно замените строку <Your Azure Maps Key> первичным ключом Azure Maps, скопированным из учетной записи службы Maps.
```
//Instantiate a map object
var map = new atlas.Map('myMap', {
    // Replace <Your Azure Maps Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '<Your Azure Maps Key>'
    }
});
```
Некоторые сведения о JavaScript:
- Это ядро функции GetMap, которое инициализирует API управления картой, предоставляя ей ключ учетной записи Azure Maps.
- atlas — это пространство имен, которое содержит API Azure Map и связанные визуальные компоненты.
- atlas.Map предоставляет элемент управления для визуальной интерактивной веб-карты.
Сохраните изменения в файл и откройте HTML-страницу в браузере. Показанная карта — это самая базовая карта, которую можно сделать с помощью ключа atlas.Map подписки на учетную запись Azure Maps.

Определение отрисовки для отображения маршрута

В этом руководстве маршрут отрисовывается с помощью слоя линий. Начальные и конечные точки отрисовываются с помощью слоя символов. Дополнительные сведения о добавлении слоев линий см. в статье Добавление слоя линий на карту. Дополнительные сведения о слоях символов см. в статье Добавление слоя символов на карту.

В функции GetMap после инициализации карты добавьте следующий код JavaScript.
```
//Wait until the map resources are ready.
map.events.add('ready', function() {

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

    //Add a layer for rendering the route lines and have it render under the map labels.
    map.layers.add(new atlas.layer.LineLayer(datasource, null, {
        strokeColor: '#2272B9',
        strokeWidth: 5,
        lineJoin: 'round',
        lineCap: 'round'
    }), 'labels');

    //Add a layer for rendering point data.
    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: ['get', 'icon'],
            allowOverlap: 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.
    }));
});
```
Некоторые сведения о JavaScript:
- Этот код реализует обработчик событий ready для элемента управления картой. Остальная часть кода в этом руководстве помещается в ready обработчик событий.
- В обработчике событий ready элемента управления картой создается источник данных для хранения маршрута от начальной до конечной точки.
- Чтобы определить способ отрисовки линии маршрута, создается и присоединяется слой линий к источнику данных. Чтобы убедиться, что линия маршрута не охватывает метки дороги, передайте второй параметр со значением 'labels'.
Теперь создаем слой символов и привязываем его к источнику данных. Этот слой определяет, как отображаются начальная и конечная точки. Выражения были добавлены для получения изображения значка и текстовых меток из свойств для каждого объекта точки. Чтобы узнать больше о выражениях, ознакомьтесь со стилистическими выражениями на основе данных.
Задайте в качестве начальной точки офис корпорации Майкрософт, а в качестве конечной — заправку в Сиэтле. Начальные и точки создаются путем добавления следующего кода в обработчик событий элемента управления ready Map:
```
//Create the GeoJSON objects which represent the start and end points of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
    title: "Redmond",
    icon: "pin-blue"
});

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

map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 80
});
```
Некоторые сведения о JavaScript:
- Этот код создает два объекта Point в формате GeoJSON, которые будут представлять начальную и конечную точки, и добавляет эти объекты в источник данных.
- Последний блок кода задает позицию камеры, используя данные о широте и долготе начальной и конечной точек.
- Начальная и конечная точки добавляются в источник данных.
- Ограничивающий прямоугольник для начальной и конечной точек вычисляется с использованием функции atlas.data.BoundingBox.fromData. Этот ограничивающий прямоугольник используется для формирования вида с камер карты по всему пути с помощью функции map.setCamera.
- Для компенсации размеров пикселей значков символов добавляется заполнение.
Дополнительные сведения о свойстве setCamera элемента управления Map см. в разделе setCamera(CameraOptions | Свойство CameraBoundsOptions и AnimationOptions).
Сохраните файл MapRoute.html и обновите страницу в браузере. Карта сместится так, что в центре окажется Сиэтл. Синий маркер в форме капли обозначает начальную точку. Круглый синий маркер обозначает конечную точку маршрута.

Получение направлений маршрута

Из этого раздела вы узнаете, как использовать API направлений маршрута Azure Maps, чтобы получить направление маршрута и предполагаемое время прибытия от одной точки к другой.

Совет

API-интерфейсы предлагают службы "Построение маршрутов" Azure Maps для планирования маршрутов на основе различных типов, таких как самые быстрые, кратчайшие, экономичные или захватывающие маршруты на основе расстояния, плотности трафика и способа перемещения. Кроме того, с помощью этой службы пользователи могут планировать маршруты с учетом исторических данных о плотности трафика. Пользователь может получить прогноз продолжительности поездки для любого заданного времени. Дополнительные сведения см. в статье Route — Get Route Directions (Маршрут. Получение направления маршрута).

В функции GetMap внутри обработчика событий ready элемента управления добавьте в код JavaScript следующее:

var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;

//Make a search route request
fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });
    //Add route line to the datasource
    datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
});

Некоторые сведения о JavaScript:

Этот код создает маршрут от начальной точки к конечной точке.
Запросы url API службы маршрутизации Azure Maps для вычисления направлений маршрута.
Затем массив координат извлекается из ответа и добавляется в источник данных.

Сохраните файл MapRoute.html и обновите страницу в браузере. Теперь на карте появится маршрут от начальной до конечной точки.

Полный код для этого руководства представлен в руководстве route на GitHub.
Чтобы просмотреть этот пример в реальном времени, см. статью Маршрутизация к назначению на веб-сайте Azure Maps Code Samples.

Следующие шаги

В следующем руководстве показано, как создать запрос маршрута с ограничениями, например по типу транспорта или характеристикам груза. Затем вы попробуете отобразить несколько маршрутов на одной карте.

Поиск маршрутов для различных способов перемещения с помощью службы "Карты Azure"

Поделиться через