Передовые методы работы Azure Maps веб-пакета SDK

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

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

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

Рекомендации по обеспечению безопасности

Дополнительные сведения о рекомендациях по обеспечению безопасности см . в рекомендациях по проверке подлинности и авторизации.

Использование последних версий Azure Maps

Пакеты SDK Azure Maps проходят регулярное тестирование безопасности вместе с любыми внешними библиотеками зависимостей, используемыми пакетами SDK. Любая известная проблема безопасности своевременно устраняется и запускается в рабочей среде. Если приложение указывает на последнюю основную версию размещенной версии веб-пакета SDK для Azure Maps, он автоматически получает все дополнительные обновления версий, включающие исправления, связанные с безопасностью.

Если веб-пакет SDK для Azure Maps размещен через модуль npm, обязательно используйте символ caret (^) в сочетании с номером версии пакета npm в Azure Maps в package.json файле, чтобы он указывает на последнюю дополнительную версию.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Совет

Всегда используйте последнюю версию элемента управления Azure Maps npm. Дополнительные сведения см . в документации по npm в azure-maps-control .

Оптимизация начальной загрузки карт

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

Просмотр события готовности карт

Аналогичным образом, когда карта изначально загружается, она часто требуется загружать данные на нее как можно быстрее, поэтому пользователь не смотрит на пустую карту. Поскольку карта загружает ресурсы асинхронно, необходимо дождаться, пока карта будет готова к взаимодействию, прежде чем пытаться отобразить в ней свои собственные данные. Есть два события, которых нужно дождаться: событие load и событие ready. Событие загрузки будет возникать после завершения загрузки начального представления карты и загрузки каждой плитки карты. Если вы видите ошибку "Стиль не выполняется загрузка", следует использовать load событие и дождаться полной загрузки стиля.

Готовое событие запускается, когда минимальные ресурсы карты, необходимые для начала взаимодействия с картой. Точнее, ready событие активируется при первом загрузке данных стиля карты. Событие ready часто может срабатывать в два раза быстрее, чем событие load, и, таким образом, позволяет вам быстрее начать загрузку данных в карту. Избегайте внесения изменений в стиль или язык карты на данный момент, так как это может активировать перезагрузку стиля.

Отложенная загрузка веб-пакета SDK Azure Maps

Если карта не нужна сразу, загрузите веб-пакет SDK Azure Maps до тех пор, пока не потребуется. В этом случае загрузка файлов JavaScript и CSS, используемых веб-SDK Azure Maps, задерживается до тех пор, пока они не понадобятся. Обычно это происходит, когда карта загружается на вкладке или всплывающей панели, которая не отображается при загрузке страницы.

В примере кода карты "Отложенная загрузка" показано, как отложить загрузку веб-пакета SDK Azure Maps до нажатия кнопки. Исходный код см. в разделе "Отложенная загрузка примера кода карты".

Добавление заполнителя для карты

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

Установка начального стиля карты и параметров камеры при инициализации

Часто приложениям требуется загрузить карту в определенное место или в заданном стиле. Иногда разработчики ожидают, ready пока карта не загружена (или дождитесь события), а затем используйте setCamera или setStyle функции карты. Часто, чтобы отобразить требуемое начальное представление, необходимо дополнительное время, поскольку многие ресурсы по умолчанию загружаются по умолчанию до загрузки ресурсов, необходимых для нужного представления карты. Лучше всего передать нужную камеру карты и параметры стиля в карту при ее инициализации.

Оптимизация источников данных

Веб-пакет SDK имеет два источника данных,

• Источник GeoJSON: DataSource класс управляет необработанными данными расположения в формате GeoJSON локально. Подходит для небольших и средних наборов данных (до сотен тысяч компонентов).
• Источник векторной плитки: VectorTileSource класс загружает данные, отформатированные как векторные плитки для текущего представления карты, на основе системы карт. Идеально подходит для больших и огромных наборов данных (миллионы или миллиарды компонентов).

Использование решений для больших наборов данных на основе листов

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

Платформа Azure Maps Creator извлекает данные в формате векторной плитки. Другие форматы данных могут использовать такие инструменты, как Tippecanoe. Дополнительные сведения о работе с векторными плитками см. в статье "Mapbox awesome-vector-tiles readme" в GitHub.

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

Дополнительные сведения о источниках данных см. в разделе "Создание источника данных".

Объединение нескольких наборов данных в одном источнике векторного листа

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

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

Уменьшение числа обновлений холста, вызванных обновлением данных

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

• Функция источников данных add может использоваться для добавления одного или нескольких компонентов в источник данных. Каждый раз, когда эта функция вызывается при обновлении холста карты. При добавлении множества компонентов их нужно объединить в массив или коллекцию компонентов и один раз передать их в эту функцию, вместо того чтобы перебирать набор данных и вызывать эту функцию для каждого компонента.
• Функция источников данных setShapes может использоваться для перезаписи всех фигур в источнике данных. Под капотом он объединяет источники clear данных и функции вместе add и выполняет одно обновление холста карты вместо двух, что быстрее. Не забудьте использовать эту функцию, если требуется обновить все данные в источнике данных.
• Функция источников данных importDataFromUrl может использоваться для загрузки в источник данных файла GeoJSON через URL-адрес. После скачивания данных он передается в функцию источников add данных. Если файл GeoJSON размещен в другом домене, следует убедиться, что другой домен поддерживает запросы между доменами (COR). Если нет, можно скопировать данные в локальный файл в вашем домене или создать прокси-службу с включенными COR. Если файл имеет большой размер, нужно попробовать преобразовать его в источник векторных листов.
• Если функции упаковываются в Shape класс, addPropertysetCoordinatesфункции и setProperties функции фигуры запускают обновление в источнике данных и обновлении холста карты. Все компоненты, возвращаемые источниками данных getShapes и функциями getShapeById, автоматически упаковываются вместе с классом Shape. Если требуется обновить несколько фигур, их можно быстрее преобразовать в JSON с помощью функции источников toJson данных, редактирования GeoJSON, а затем передать эти данные в функцию источников setShapes данных.

Предотвращение вызова функции очистки источников данных без необходимости

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

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

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

Удаление неиспользуемых компонентов и свойств

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

• Сокращается объем данных, которые нужно загрузить.
• Сокращается количество функций, которые нужно перебрать при подготовке данных к отрисовке.
• Иногда имеется возможность упростить или удалить управляемые данными выражения и фильтры, что означает уменьшение обработки данных, требуемой во время их отрисовки.

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

Кроме того, уменьшение количества значащих цифр в координатах компонентов может значительно уменьшить размер данных. Это не редкость для координат, содержащих 12 или более десятичных разрядов; однако шесть десятичных разрядов имеют точность около 0,1 метра, что часто более точно, чем расположение координаты представляет (при работе с небольшими данными расположения, такими как макеты здания в помещении), рекомендуется использовать шесть десятичных разрядов. Наличие более шести десятичных разрядов, скорее всего, не будет иметь разницы в том, как данные отрисовывается и требует, чтобы пользователь скачал больше данных для не добавленного преимущества.

Ниже приведен список полезных инструментов для работы с данными GeoJSON.

Использование отдельного источника данных для быстро меняющихся данных

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

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

Настройка параметров буфера и допуска в источниках данных GeoJSON

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

Класс DataSource также имеет параметр tolerance, который используется при уменьшении разрешения геометрических объектов с помощью алгоритма упрощения Дугласа-Пекера для отрисовки. Увеличение этого значения допуска снижает разрешение геометрий и, в свою очередь, повышает производительность. Необходимо настроить этот параметр, чтобы получить правильное сочетание разрешения геометрических объектов и производительности для вашего набора данных.

Установка параметра максимального масштабирования источников данных GeoJSON

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

Уменьшение отклика GeoJSON

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

Доступ к необработанному GeoJSON с помощью URL-адреса

В JavaScript можно хранить встроенные объекты GeoJSON, однако это использует больше памяти в качестве копий, хранящихся в переменной, созданной для этого объекта, и экземпляра источника данных, который управляет им в отдельной веб-рабочей роли. Предоставьте приложение GeoJSON с помощью URL-адреса, а источник данных загружает одну копию данных непосредственно в рабочую рабочую роль источников данных.

Оптимизация слоев отрисовки

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

Создание слоев и их повторное использование

Веб-пакет SDK для Azure Maps — это управляемый данными. Данные поступают в источники данных, которые затем подключаются к слоям отрисовки. Если нужно изменить данные на карте, следует обновить их в источнике данных или изменить параметры стиля на слое. Это часто быстрее, чем удаление, а затем повторное создание слоев при каждом изменении.

Рассмотрение сигнального слоя поверх слоя символов

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

Относительно редкое использование HTML-маркеров и всплывающих окон

В отличие от большинства слоев в веб-элементе управления Azure Maps, использующих для отрисовки WebGL, маркеры HTML используют для отрисовки традиционные элементы модели DOM. Таким образом, чем больше дополнительных маркеров HTML добавлено на страницу, тем больше имеется элементов модели DOM. После добавления нескольких сотен маркеров HTML может снизиться производительность. Для более крупных наборов данных рекомендуется кластеризация данных или использование слоя символов или сигнального слоя.

В примере кода повторного использования всплывающего окна с несколькими пин-кодами показано, как создать одно всплывающее окно и повторно использовать его, обновив его содержимое и положение. Исходный код см. в разделе "Повторное использование всплывающего окна с несколькими пин-кодами".

Таким образом, если на карте есть только несколько точек для отрисовки, простота маркеров HTML может быть предпочтительнее. Кроме того, маркеры HTML можно легко перетаскивать при необходимости.

Объединение слоев

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

Например, рассмотрим набор данных, в котором все компоненты имеют свойство isHealthy, которое может иметь значение true или false. При создании пузырькового слоя, который отрисовывает различные цветные пузырьки на основе этого свойства, существует несколько способов сделать это, как показано в следующем списке, от наименее эффективного до наиболее эффективного.

• Разделение данных на два источника в зависимости от значения isHealthy и прикрепление сигнального слоя с жестко заданным параметром цвета для каждого источника данных.
• Помещение всех данных в один источник и создание двух сигнальных слоев с жестко заданным параметром цвета и фильтром на основе свойства isHealthy.
• Помещение всех данных в один источник и создание одного сигнального слоя с выражением стиля case для варианта цвета на основе свойства isHealthy. Ниже приведен пример кода, демонстрирующий это.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Создание плавных анимаций слоя символов

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

• allowOverlap — указывает, отображается ли символ при столкновении с другими символами.
• ignorePlacement — указывает, могут ли другие символы пересекаться с данным символом.

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

Пример кода простой анимации символов демонстрирует простой способ анимации слоя символов. Исходный код для этого примера см . в примере примера простой анимации символов.

Указание диапазона масштабирования

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

• Если данные поступают из источника плитки вектора, часто исходные слои для разных типов данных доступны только через диапазон уровней масштаба.
• Если используется слой плиток, который не имеет плиток для всех уровней масштабирования 0 до 24, и вы хотите, чтобы он отображался только на уровнях, на которых он содержит плитки, и не пытаться заполнить отсутствующие плитки плитками с другими уровнями масштабирования.
• Если требуется, чтобы слой отображался только на определенных уровнях масштаба. Все слои имеют параметр minZoom , maxZoom в котором слой отрисовывается при выполнении этих уровней масштабирования на основе логики maxZoom > zoom >= minZoom.

Пример

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Указание границ слоя мозаики и диапазона масштабов источника

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

Пример

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Использование пустого стиля карты, если базовая карта является невидимой

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

Плавная анимация изображения или слоев мозаики

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

Оптимизация логики обнаружения конфликтов на слое символов

Слой символов имеет два параметра, которые существуют как для значков, так и для текста, и называются allowOverlap и ignorePlacement. Эти параметры указывают, может ли значок или текст символа перекрывать или быть перекрытым. Если задано значение false, слой символов выполняет вычисления при отрисовке каждой точки, чтобы узнать, сталкивается ли он с любым другим уже отрисованным символом в слое, а если это делает, не отрисовывайте символ коллайда. Это удобно при уменьшении помех на карте и уменьшении количества отображаемых объектов. При задании этих параметров falseэта логика обнаружения столкновений пропускается, и все символы отображаются на карте. Настройте этот параметр, чтобы получить оптимальное сочетание производительности и взаимодействия с пользователем.

Кластеризация больших наборов данных точек

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

Кроме того, для повышения производительности можно увеличить размер радиуса кластера. Чем больше радиус кластера, тем меньше кластеризованных точек для отслеживания и отрисовки. Дополнительные сведения см. в разделе "Данные точки кластеризации" в веб-пакете SDK.

Использование взвешенных кластерных тепловых карт

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

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Дополнительные сведения см. в разделе "Кластеризация" и слой тепловой карты.

Использование небольшого объема ресурсов для изображения

Изображения можно добавить в спрайт изображений карт для отрисовки значков в слое символов или шаблонов в слое многоугольников. Сохраняйте эти изображения небольшими, чтобы минимизировать объем загружаемых данных и объем пространства, занимаемого ими в спрайте изображений карт. При использовании слоя символов, который масштабирует значок с помощью параметра size, используйте изображение, имеющее максимальный размер в вашем плане, для отображения на карте, но не больше. Это обеспечивает визуализацию значка с высоким разрешением и одновременно минимизирует используемые им ресурсы. Кроме того, SVG также можно использовать в качестве меньшего формата файла для простых изображений значков.

Оптимизация выражений

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

Упрощение фильтров

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

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

Убедитесь, что выражения не создают ошибки

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

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

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

Приведенный выше код работает хорошо, если все функции в источнике данных имеют myColor свойство, а значение этого свойства — цвет. Это может не быть проблемой, если у вас есть полный контроль над данными в источнике данных и знать, что некоторые функции имеют допустимый цвет в свойстве myColor . С другой стороны, чтобы сделать этот код защищенным от ошибок, можно использовать выражение case с выражением has для проверки наличия свойства myColor в компоненте. В этом случае выражение типа to-color можно затем использовать для преобразования значения этого свойства в цвет. Если цвет является недопустимым, можно использовать резервный цвет. В следующем примере кода показано, как это сделать, и для резервного цвета устанавливается зеленый цвет.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Упорядочение логических выражений от наиболее подходящих до наименее подходящих

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

Упрощение выражений

Выражения могут быть мощными и иногда сложными. Менее сложные выражения оцениваются быстрее. Например, если требуется простое сравнение, лучше использовать выражение ['==', ['get', 'category'], 'restaurant'], чем выражение сопоставления, например ['match', ['get', 'category'], 'restaurant', true, false]. В этом случае, если проверяемое свойство является логическим значением, выражение get будет еще проще ['get','isRestaurant'].

Устранение неполадок веб-пакета SDK

Ниже приведены некоторые рекомендации по отладке ряда распространенных проблем, возникающих при разработке с помощью веб-пакета SDK для Azure Maps.

Почему не отображается карта при загрузке веб-элемента управления?

Действия, которые необходимо проверить:

• Убедитесь, что вы выполнили параметры проверки подлинности на карте. Без проверки подлинности карта загружает пустой холст и возвращает ошибку 401 на сетевой вкладке средств разработчика браузера.
• Убедитесь в наличии подключения к Интернету.
• Проверьте наличие ошибок в консоли инструментов разработчика в браузере. Некоторые ошибки могут привести к тому, что карта не будет отображаться. Выполните отладку приложения.
• Убедитесь, что вы используете поддерживаемый браузер.

Почему все мои данные отображаются на другой стороне мира?

Координаты, также называемые положениями, в пакетах SDK для Azure Maps соответствуют стандартному формату [longitude, latitude] геопространственной отрасли. Этот же формат также определяет, как координаты определяются в схеме GeoJSON; основные отформатированные данные, используемые в пакетах SDK для Azure Maps. Если данные отображаются на противоположной стороне мира, скорее всего, из-за значений долготы и широты, которые будут отменены в сведениях о координатах и позиции.

Почему маркеры HTML появляются в неправильном месте в веб-элементе управления?

Действия, которые необходимо проверить:

• Если для маркера используется настраиваемое содержимое, убедитесь, что параметры anchor и pixelOffset настроены правильно. По умолчанию нижний центр содержимого выравнивается с положением на карте.
• Убедитесь, что CSS-файл для Azure Maps загружен.
• Проверьте элемент DOM маркера HTML, чтобы узнать, добавлен ли любой CSS из приложения к маркеру и влияет на его положение.

Почему значки или текст в слое символов отображаются на неправильном месте?

Убедитесь, что anchor offset параметры настроены правильно, чтобы выровнять часть изображения или текста, которые вы хотите выровнять с координатой на карте. Если символ находится не на своем месте только при повернутой карте, проверьте параметр rotationAlignment. По умолчанию символы поворачиваются с помощью окна просмотра карт и отображаются прямо для пользователя. Однако в зависимости от вашего сценария может потребоваться заблокировать символ для ориентации карты, задав rotationAlignment параметр map.

Если символ находится не на своем месте только в том случае, когда карта наклонена, проверьте параметр pitchAlignment. По умолчанию символы остаются в режиме просмотра карт в режиме отображения карты, когда карта помечается или наклонена. Однако в зависимости от вашего сценария может потребоваться заблокировать символ на поле карты, задав pitchAlignment параметр map.

Почему на карте не отображаются мои данные?

Действия, которые необходимо проверить:

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

Можно ли использовать веб-пакет SDK для Azure Maps в IFRAME, изолированном в песочнице?

Да.

Поддержка

Ниже приведены различные способы получения поддержки для Azure Maps в зависимости от конкретной проблемы.

Как мне сообщить о проблеме с данными или адресом?

Сообщите о проблемах с помощью сайта отзывов Azure Maps. Подробные инструкции по проблемам с данными отчетов см. в статье "Предоставление отзывов о данных в Azure Maps".

Примечание.

Каждой заявке о проблеме присваивается уникальный URL-адрес для отслеживания. Срок решения зависит от типа проблемы и времени, необходимого для проверки правильности изменения. Изменения будут включаться в еженедельное обновление служб отрисовки, а другие службы, такие как геокодирование и маршрутизация, обновляются ежемесячно.

Как сообщить об ошибке в службе или API?

О проблемах сообщайте на странице Справка и поддержка в Azure, нажимая кнопку Создать запрос на поддержку.

Где получить техническую помощь по Azure Maps?

• По вопросам, связанным с визуальным элементом Power BI для Azure Maps, обращайтесь в службу поддержки Power BI.

• По всем остальным службам Azure Maps обращайтесь в службу поддержки Azure.

• Для вопросов или комментариев по отдельным функциям Azure Maps используйте форумы для разработчиков Azure Maps.

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

Дополнительные рекомендации по улучшению взаимодействия с пользователем в приложении см. в следующих статьях.

Сделайте приложение доступным

Дополнительные сведения о терминологии, используемой в Azure Maps и геопространственной отрасли.

Глоссарий Azure Maps