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

  • Статья

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

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

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

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

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

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

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

  2. Добавьте в файл следующий код 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>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.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. Он добавлен на следующем шаге.

  3. Затем добавьте следующий код JavaScript в функцию GetMap сразу после кода, добавленного на предыдущем шаге. Этот код создает элемент управления картой и инициализирует его с помощью предоставленных ключей подписки Azure Карты. Обязательно замените строку <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>'
    }
});

    Важная информация о приведенном выше коде Javacript.

    • Это ядро функции GetMap, которое инициализирует API управления картой, предоставляя ей ключ учетной записи Azure Maps.
    • atlas — это пространство имен, которое содержит API Azure Map и связанные визуальные компоненты.
    • atlas.Map предоставляет элемент управления для визуальной интерактивной веб-карты.

  4. Сохраните изменения в файл и откройте HTML-страницу в браузере. Показанная карта — это самая базовая карта, которую можно сделать, вызвав atlas.Map ключ подписки azure Карты учетной записи.

    A screenshot showing the most basic map that you can make by calling `atlas.Map` using your Azure Maps account key.

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

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

  1. В функции 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.
    }));
});

    Важная информация о приведенном выше коде Javacript.

    • Этот код реализует обработчик событий ready для элемента управления картой. Остальная часть кода в этом руководстве помещается в ready обработчик событий.
    • В обработчике событий ready элемента управления картой создается источник данных для хранения маршрута от начальной до конечной точки.
    • Чтобы определить способ отрисовки линии маршрута, создается и присоединяется слой линий к источнику данных. Чтобы убедиться, что линия маршрута не охватывает метки дороги, передайте второй параметр со значением 'labels'.

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

  2. Задайте в качестве начальной точки офис корпорации Майкрософт, а в качестве конечной — заправку в Сиэтле. Начальные и точки создаются путем добавления следующего кода в обработчик событий элемента управления 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
});

    Важная информация о приведенном выше коде Javacript.

    • Этот код создает два объекта Point в формате GeoJSON, которые будут представлять начальную и конечную точки, и добавляет эти объекты в источник данных.
    • Последний блок кода задает позицию камеры, используя данные о широте и долготе начальной и конечной точек.
    • Начальная и конечная точки добавляются в источник данных.
    • Ограничивающий прямоугольник для начальной и конечной точек вычисляется с использованием функции atlas.data.BoundingBox.fromData. Этот ограничивающий прямоугольник используется для формирования вида с камер карты по всему пути с помощью функции map.setCamera.
    • Для компенсации размеров пикселей значков символов добавляется заполнение.

    Дополнительные сведения о наборе элемента управления Map Камера см. в наборе Камера(Камера Options | Камера BoundsOptions и AnimationOptions) Свойство.

  3. Сохраните файл MapRoute.html и обновите страницу в браузере. Карта сместится так, что в центре окажется Сиэтл. Синий маркер в форме капли обозначает начальную точку. Круглый синий маркер обозначает конечную точку маршрута.

    A screenshot showing a map with a route containing a blue teardrop pin marking the start point at Microsoft in Redmond Washington and a blue round pin marking the end point at a gas station in Seattle.

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

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

Совет

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

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

    //Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));

//Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline);

  2. Указав учетные данные и URL-адрес, добавьте следующий код в конец обработчика событий ready элемента управления.

    //Start and end point input to the routeURL
var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];

//Make a search route request
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
    //Get data features from response
    var data = directions.geojson.getFeatures();
    datasource.add(data);
});

    Важная информация о приведенном выше коде Javacript.

    • Этот код создает маршрут от начальной точки к конечной точке.
    • routeURL обращается к службе "Построение маршрутов" Azure Maps, чтобы рассчитать направления маршрута.
    • Коллекция компонентов GeoJSON из ответа извлекается с помощью метода geojson.getFeatures() и добавляется в источник данных.

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

    A screenshot showing a map that demonstrates the Azure Map control and Route service.

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

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

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

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