Визуализирующие локации и пути на карте с картами Azure

Нравится/не нравится этот пост? Хотите более лазурного контента? Следуй за мной на Twitter Отказ

Azure Maps – отличный способ добавить геопространственные возможности в ваши приложения, показать карту на веб-странице, чтобы проверить геозаказа, на маршрутизацию и данные трафика. Вы можете прочитать больше о Azure Maps в Официальная документация .

Этот пост охватывает:

Показывая контроль карты Azure на веб-странице
Добавление контактов на карту, чтобы показать места
Добавление пути к карте

Начиная

Начните с подписания на Azure, если у вас нет учетной записи: если вы студент, зарегистрируйтесь на Azure.microsoft.com/free/students Чтобы получить 100 долларов бесплатных кредитных и бесплатных услуг на год. В противном случае зарегистрируйтесь на Azure.microsoft.com/free Чтобы получить 200 долларов США за 30 дней и год бесплатных услуг.
Войдите в Azure и создайте ресурс Azure Maps, следуя эта ссылка Отказ

Как только у вас создан ресурс вашего карт, отправляйтесь на Общий ключ аутентификация раздел Настройки -> Аутентификация Вкладка на карте Лезвие в Azure Portal и примите копию вашего Первичный ключ Отказ

Показывая контроль карты Azure на веб-странице

Создайте веб-сайт, используя ваш любимый инструмент – я лично использовал Колбу Как я вступаю в Python. Создайте HTML-страницу. К Раздел Добавьте следующее, чтобы добавить поддержку для управления карт Azure:

В Добавьте Div с идентификатором MyMap Отказ

Следуйте этим с Сценарий тег Это создает контроль карт Azure и назначает его этому Div:

Вам нужно будет заменить {Подписка-ключ} С вашей первичной клавишей, который вы поймали из лазурного карта ресурса Blade.

Если вы просматриваете эту страницу, вы увидите элемент управления карты в верхней части страницы. Разместить его, вы можете стиль карту быть размером всей страницы, добавив стиль к голова :

Это даст хорошую, полноразмерную карту, показывая весь мир.

Вы можете узнать больше о начале работы с контролем карты в Начало работы Документы Отказ

Увеличить в определенную область

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

Сначала ваша страница должна дождаться договориться, пока не будет готов контроля карты, прежде чем он может позвонить любым методам. Вы можете сделать это, используя готов событие:

map.events.add('ready', function () {
    // add code to be run when the map is ready here
}

Внутри этого обработчика вы можете установить камеру, используя SetCamera Метод:

map.setCamera({
  bounds: [{min_long}, {min_lat}, {max_long}, {max_lat}],
    padding: 50
});

Установить min_long и min_lat Чтобы быть одним углом ограничительной коробки, который вы хотите убедиться, что с использованием координатов долготы и широты. max_long и max_lat. являются противоположным углом. Установить прокладка к минимальному количеству пикселей, чтобы иметь вокруг края границ.

Например, этот код показывает область вокруг Сиэтла:

map.events.add('ready', function () {
  map.setCamera({
    bounds: [-123, 47, -122, 48],
    padding: 50
  });
}

Вы можете прочитать больше об этом методе в Класс Класс Документы Отказ

Добавление контактов для местоположения

Карты могут добавить такие слои, как булавки и пути, с каждым слоем, показывающим данные координат. Эти данные введены в DataSource , который добавляется на карту, то слой применяется к этому источнику данных.

Чтобы показать контакты на карте, координаты для контактов добавляются как функция карты к источнику данных, а также Symbollayer Добавлен ссылка на этот источник данных. Карта покажет PIN-код для каждой точки в источнике данных.

Во-первых, создайте источник данных на картах готов обработчик события:

var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

Затем создайте функцию данных, чтобы обернуть точку и добавить ее в источник данных. Особенности могут включать в себя отдельные точки, многоугольники или линии, в этом случае это одна точка.

dataSource.add(
  new atlas.data.Feature(
    new atlas.data.Point([{longitude}, {latitude}])));

В этом коде {долгота} должен быть установлен на долготу точки, а {широта} установить на широту. Наконец, слой символов добавлен для отображения контактов, и этот символьный слой обертывает источник данных:

map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));

Есть загруженные больше, вы можете сделать с этими слоями символов, включая настройку символов с помощью изображений. Вы можете прочитать больше и попробовать некоторые из них в Azure Maps Символ слоя Документы Отказ

Показывая путь на карте

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

var line_datasource = new atlas.source.DataSource(null, {
    lineMetrics: true
});
map.sources.add(line_datasource);

Далее, а LineSting Функция добавляется к источнику данных:

line_datasource.add(new atlas.data.Feature(new atlas.data.LineString([
  [{point1_longitude}, {point1_latitude}],
  [{point2_longitude}, {point2_latitude}],
])));

Каждая точка добавляется к массиве, переданному в LineSting , в том порядке, что вы хотите, чтобы точки были связаны. Наконец, слой линии добавляется на карту:

map.layers.add(new atlas.layer.LineLayer(line_datasource, null));

Вы можете добавить несколько источников данных на карту и использовать их для нескольких слоев. Например, вы можете иметь источник данных для строки, а другой на точку в конце строки.

Вы можете настроить строку, такую как размер хода или цвет, в том числе имеющие градиенты цвета, чтобы указать начало и конец линии, передавая параметры при создании слоя. Например, иметь синий к красному градиенту, с красным, показывая конец линии (последняя координата в массиве, передаваемом в источник данных), используйте следующее:

map.layers.add(new atlas.layer.LineLayer(line_datasource, null, {
  strokeWidth: 6,
  strokeGradient: [
    'interpolate',
    ['linear'],
    ['line-progress'],
    0, "blue",
    1, "red"
  ]
}));

Резюме

В этом посте мы узнали, как добавить элемент управления карты Azure на веб-страницу, поместите камеру, добавьте контакты и добавьте линии. Голова до Официальная документация Чтобы узнать больше о возможностях карт Azure.

Оригинал: “https://dev.to/azure/visualizing-locations-and-paths-on-a-map-with-azure-maps-906”