Использование шаблонов изображений

2025-04-21

Изображения можно использовать с маркерами HTML и различными слоями в веб-пакете SDK для Azure Maps:

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

Чтобы обеспечить хорошую производительность при работе с слоями, перед отрисовкой Загрузите изображения в ресурс с изображением Sprite. IconOptions в SymbolLayer по умолчанию предварительно загружает в спрайт изображения карты несколько изображений маркера в нескольких цветах. Эти изображения маркеров и многое другое представлены в виде шаблонов SVG. Они могут использоваться для создания изображений с настраиваемыми масштабами или в качестве основных и дополнительных цветов для клиента. В итоге предусмотрено 42 шаблонов изображений: 27 значков символов и 15 узоров заливки многоугольников.

Шаблоны изображений можно добавить в ресурсы изображений спрайтов с помощью функции map.imageSprite.createFromTemplate. Эта функция позволяет передавать до пяти параметров;

createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>

idЭто уникальный идентификатор, который вы создаете. id назначается изображению при его добавлении в спрайт изображений Maps. Используйте этот идентификатор в слоях, чтобы указать, какой ресурс изображения необходимо отобразить. templateNameУказывает используемый шаблон изображения. colorПараметр задает основной цвет изображения, а secondaryColor Параметры задают дополнительный цвет изображения. scaleПараметр масштабирует шаблон изображения перед его применением к спрайту изображений. Когда изображение применяется к спрайту изображения, оно преобразуется в PNG. Чтобы обеспечить четкое отображение, лучше масштабировать шаблон изображения перед добавлением его к спрайту, чем масштабировать его в слое.

Эта функция асинхронно загружает изображение в спрайт изображений. Таким же методом возвращается обещание, которое можно ожидать завершения этой функции.

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

map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker-flat', 'teal', '#fff').then(function () {

   //Add a symbol layer that uses the custom created icon.
   map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
      iconOptions: {
         image: 'myTemplatedIcon'
      }
   }));
});

Используйте шаблон изображения с слоем символов

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

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

Исходный код этого примера см. в разделе "Слой символов" со встроенным примером кода шаблона значка.

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

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

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

Подсказка

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

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

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

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

Совет

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

Использование шаблона изображения с маркером HTML

Шаблон изображения можно получить с помощью atlas.getImageTemplate функции и использовать в качестве содержимого HTML-маркера. Шаблон можно передать в параметр htmlContent маркера, а затем настроить с помощью параметров color, secondaryColor и text.

Пример marker-arrow с красным первичным цветом, розовым вторичным цветом и текстовым значением "00", как показано на следующем снимке экрана. Исходный код для этого примера см. в разделе "Маркер HTML" со встроенным примером кода значка.

Совет

Шаблоны изображений можно использовать за пределами схемы. Функция getImageTemplate возвращает строку SVG с заполнителями; {color}, , {secondaryColor}{scale}{text}. Замените эти значения заполнителей, чтобы создать допустимую строку SVG. Затем можно либо добавить строку SVG непосредственно в HTML DOM, либо преобразовать ее в универсальный код ресурса (URI) данных и вставить в тег Image. Например:

//Retrieve an SVG template and replace the placeholder values.
var svg = atlas.getImageTemplate('marker').replace(/{color}/, 'red').replace(/{secondaryColor}/, 'white').replace(/{text}/, '').replace(/{scale}/, 1);

//Convert to data URI for use in image tags.
var dataUri = 'data:image/svg+xml;base64,' + btoa(svg);

Создать пользовательские шаблоны многократного использования

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

Имя.	Тип возвращаемых данных	Description
`addImageTemplate(templateName: string, template: string, override: boolean)`		Добавляет пользовательский шаблон изображения SVG в пространство имен Atlas.
`getImageTemplate(templateName: string, scale?: number)`	строка	Извлекает шаблон SVG по имени.
`getAllImageTemplateNames()`	string[]	Извлекает SVG-шаблон по заданному имени.

Шаблоны изображений SVG поддерживают следующие значения заполнителей:

Заполнитель	Описание
`{color}`	Основной цвет.
`{secondaryColor}`	Вторичный цвет.
`{scale}`	Изображение SVG преобразуется в изображение PNG при добавлении в спрайт изображений карт. Этот заполнитель можно использовать для масштабирования шаблона перед преобразованием, чтобы обеспечить четкое отображение.
`{text}`	Расположение для отрисовки текста при использовании с маркером HTML.

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

Список шаблонов образов

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

Шаблоны значков символов

маркёр

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

маркер-круг

плоский маркер

значок маркера

значок толщины маркера

значок окружности-маркера

значок marker-flat

квадратный маркер

маркер квадратной группы

marker-arrow

маркер-шар-штифт

значок marker-square

значок marker-square-cluster

значок marker-ball-pin

marker-square-rounded

marker-square-rounded-cluster

флаг

флаг-треугольник

значок marker-square-rounded

значок marker-square-rounded-cluster

треугольник

толстый треугольник

triangle-arrow-up

треугольник-стрелка-влево

значок треугольник

значок с толстым треугольником

шестиугольник

толстый шестигранник

округлый шестиугольник

шестигранник-с округлыми краями-толстый

значок шестиугольника

значок с толстыми гранями шестиугольника

значок с округлым шестигранником

значок с толстым закруглённым шестигранником

круглый штифт

округленный квадрат

квадрат с закруглёнными углами, толстый

Значок закрепления

значок круглый пин

значок с закругленными углами

значок с закруглёнными квадратами и толстыми линиями

стрелка вверх

Стрела вверх тонкая

автомобиль

значок автомобиля

Шаблон заливки многоугольника

средство проверки

повёрнутый шахматный узор

Круги

окружности с интервалами

значок проверки

поворотная иконка с шахматным рисунком

значок круги

значок с кругами

диагональные линии вверх

диагональные линии вниз

диагональные полосы вверх

диагональные полосы вниз

значок диагональных линий вверх

значок диагональные-линии-вниз

иконка диагональные полосы вверх

иконка диагональные полосы вниз

линии сетки

линии повёрнутой сетки

полосы на повернутой сетке

заливка x

значок сетки

значок повернутых сетчатых линий

значок с вращающейся решеткой и полосами

значок заполнения x

зигзаг

зигзаг-вертикаль

пунктиры

значок zig-zag

значок зиг-заг-вертикальный

значок с точками

Значки предварительно загруженных изображений

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

Имя значка	цвет	вторичный цвет
`marker-black`	`#231f20`	`#ffffff`
`marker-blue`	`#1a73aa`	`#ffffff`
`marker-darkblue`	`#003963`	`#ffffff`
`marker-red`	`#ef4c4c`	`#ffffff`
`marker-yellow`	`#f2c851`	`#ffffff`
`pin-blue`	`#2072b8`	`#ffffff`
`pin-darkblue`	`#003963`	`#ffffff`
`pin-red`	`#ef4c4c`	`#ffffff`
`pin-round-blue`	`#2072b8`	`#ffffff`
`pin-round-darkblue`	`#003963`	`#ffffff`
`pin-round-red`	`#ef4c4c`	`#ffffff`

Попробуйте сейчас инструмент

С помощью следующего средства можно отобразить различные встроенные шаблоны изображений различными способами и настроить основной и дополнительный цвета и масштаб.