Создание карты

Статья
06/13/2023

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

Загрузка схемы

Чтобы загрузить карту, создайте новый экземпляр класса Map. При инициализации карты передайте идентификатор элемента DIV для отрисовки карты и передайте набор параметров для использования при загрузке карты. Если сведения о проверке подлинности по умолчанию не указаны в atlas пространстве имен, эти сведения необходимо указать в параметрах карты при загрузке карты. Эта схема асинхронно загружает несколько ресурсов для повышения производительности. Таким образом, после создания экземпляра карты прикрепите ready событие или load к карте, а затем добавьте дополнительный код, взаимодействующий с картой, в обработчик событий. readyСобытие исполняется, как только на карте загружено достаточно ресурсов для взаимодействия с программным способом. loadСобытие исполняется после полного завершения загрузки представления первоначальной таблицы.

Вы также можете загрузить несколько карт на одной странице. Пример кода, демонстрирующий загрузку нескольких карт на одной странице, см. в разделе Несколько карт в Azure Maps Примеры. Исходный код для этого примера см. в разделе Исходный код нескольких карт.

Снимок экрана: сетка привязки на карте.

Совет

При использовании нескольких карт на одной странице можно использовать одинаковые или разные параметры проверки подлинности и языка.

Отображение одной карты мира

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

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Параметры карт

При создании карты существует несколько различных типов параметров, которые можно передать для настройки функций карты:

CameraOptions и CameraBoundOptions используются для указания области, отображаемой на карте.
ServiceOptions определяет, как карта должна взаимодействовать со своими службами.
StyleOptions проверяет, является ли карта стилизованной и отображенной.
UserInteractionOptions используются для указания того, как должна отображаться карта при взаимодействии пользователя с картой.

Эти параметры можно также обновить после загрузки карты с помощью функций setCamera, setServiceOptions, setStyle и setUserInteraction.

Управление камерой карт

Существует два способа задать отображаемую область на карте с помощью камеры на карте. При загрузке карты можно задать параметры камеры. Или можно вызвать параметр setCamera в любое время после загрузки карты, чтобы программно обновить представление карты.

Настройка камеры

Камера на карте управляет тем, что отображается в области просмотра холста карты. Параметры камеры можно передать в параметры карты при инициализации или передаче в setCameraфункцию карт.

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

Свойства карты, такие как центр и уровень масштаба, являются частью свойств CameraOptions .

Настройка границ камеры

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

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

Далее создается объект Map с помощью конструктора new atlas.Map(). Свойства карты, например CameraBoundsOptions, можно определить через функцию setCamera класса Map. Свойства границ и заполнения задаются с помощью setCamera.

Просмотр анимации карты

При настройке параметров камеры карты можно задать Параметры анимации. Эти параметры определяют тип анимации и время перемещения камеры.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

Далее первый блок кода создает карту и задает стили ввода и масштабирования. Во втором блоке кода создается обработчик события нажатия для кнопки анимации. Если эта кнопка выбрана, setCamera функция вызывается с некоторыми случайными значениями для CameraOptions и AnimationOptions.

<!DOCTYPE html>
 <html>
 <head>

    <!-- 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 type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

Снимок экрана: карта с кнопкой

Преобразования запросов

Иногда полезно иметь возможность изменять HTTP-запросы, выполняемые элементом управления картой. Пример:

Добавьте дополнительные заголовки в запросы плиток для служб, защищенных паролем.
Измените URL-адреса для выполнения запросов через прокси-службу.

Параметры службы карты имеют transformRequest , который можно использовать для изменения всех запросов, сделанных картой до их выполнения. transformRequestПараметр — это функция, которая принимает два параметра: строку URL-адреса и строку типа ресурса, которая указывает, для чего используется запрос. Эта функция должна возвращать результат RequestParameters.

transformRequest: (url: string, resourceType: string) => RequestParameters

При использовании преобразования запроса необходимо вернуть RequestParameters объект, содержащий url как минимум свойство . Ниже приведены свойства, которые могут быть включены в RequestParameters объект .

Параметр	Тип	Описание
текст	строка	Текст запроса POST.
credentials	`'same-origin'` \| `'include'`	Используется для указания параметра учетных данных запроса независимо от источника (COR). Используйте "include" для отправки файлов cookie с запросами независимо от источника.
Заголовки	объект	Заголовки, отправляемые вместе с запросом. Объект представляет собой пару "ключ-значение" строковых значений.
method	`'GET'` \| `'POST'` \| `'PUT'`	Тип запроса, который требуется выполнить. По умолчанию — `'GET'`.
тип	`'string'` \| `'json'` \| `'arrayBuffer'`	Формат текста ответа POST.
url	строка	Запрашиваемый URL-адрес.

Типы ресурсов, наиболее подходящие для содержимого, добавляемого на карту, перечислены в следующей таблице:

Тип ресурса	Описание
Образ —	Запрос изображения для использования с SymbolLayer или ImageLayer.
Источник	Запрос исходных сведений, таких как запрос TileJSON. Некоторые запросы из базовых стилей карт также используют этот тип ресурса при загрузке сведений об источнике.
Tile	Запрос из слоя плитки (растровый или векторный).
WFS	Запрос от в модуле пространственных операций `WfsClient` ввода-вывода к службе веб-компонентов OGC. Дополнительные сведения см. в статье Подключение к службе WFS.
WebMapService	Запрос из в `OgcMapLayer` модуле пространственных операций ввода-вывода к службе WMS или WMTS. Дополнительные сведения см. в разделе Добавление слоя карты из Открытого геопространственного консорциума (OGC).

Ниже приведены некоторые типы ресурсов, которые обычно игнорируются, которые передаются через преобразование запроса и связаны с базовыми стилями карты: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution.

В следующем примере показано, как изменить размер всех запросов, https://example.com добавив имя пользователя и пароль в качестве заголовков в запрос.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});