Использование шаблонов изображений
Изображения можно использовать с маркерами HTML и различными слоями в Azure Maps веб-пакете SDK:
- Слои символов позволяют отображать точки на карте с помощью значка изображения. Символы также можно визуализировать по линиям.
- Слои многоугольников можно визуализировать с помощью изображения шаблона заливки.
- Маркеры HTML могут отображать точки с помощью изображений и других элементов HTML.
Чтобы обеспечить хорошую производительность при работе с слоями, перед отрисовкой Загрузите изображения в ресурс с изображением Sprite. IconOptions(SymbolLayer) предварительно загружает несколько изображений маркера в несколько цветов в спрайт изображения Map по умолчанию. Эти изображения маркеров и многое другое представлены в виде шаблонов SVG. Они могут использоваться для создания изображений с настраиваемыми масштабами или использования в качестве основного и дополнительного цветов клиента. В итоге предусмотрено 42 шаблонов изображений: 27 значков символов и 15 узоров заливки многоугольников.
Шаблоны изображений можно добавить в ресурсы с изображением Sprite с помощью 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 параметре TH iconOptions.
Слой линии со встроенным шаблоном значка демонстрирует, как это сделать. Как показано на следующем снимке экрана, он отрисовывает красную линию на карте и использует слой символов с помощью car шаблона изображения с голубым первичным цветом и белым вторичным цветом. Исходный код для этого примера см. в разделе "Слой строк" со встроенным примером кода шаблона значка.
Совет
Если вы указываете шаблон изображения, установите rotation для параметра значок на уровне символов значение 90, если хотите, чтобы он указывал на то же направление, что и линия.
Использование шаблона изображения с слоем многоугольников
После загрузки шаблона изображения в спрайт изображений карт его можно визуализировать как шаблон заливки на слое многоугольников, ссылаясь на идентификатор ресурса изображения в fillPattern параметре слоя.
Многоугольник заливки со встроенным шаблоном значка демонстрирует, как отрисовка многоугольника с помощью dot шаблона изображения с красным первичным цветом и прозрачным вторичным цветом, как показано на следующем снимке экрана. Исходный код для этого примера см. в разделе "Заливка многоугольников" со встроенным примером кода шаблона значка.
Совет
Установка вторичного цвета шаблонов заливки упрощает просмотр базовой схемы, тем самым предоставляя первичный шаблон.
Использование шаблона изображения с маркером HTML
Шаблон изображения можно получить с помощью altas.getImageTemplate функции и использовать в качестве содержимого HTML-маркера. Шаблон можно передать в htmlContent параметр маркера, а затем настроить с помощью color secondaryColor параметров, и text.
Пример html-маркера со встроенным шаблоном значка демонстрирует использование 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 поддерживают следующие значения заполнителей:
| Заполнитель | Description |
|---|---|
{color} |
Основной цвет. |
{secondaryColor} |
Дополнительный цвет. |
{scale} |
Изображение SVG преобразуется в изображение PNG при добавлении в спрайт изображений карт. Этот заполнитель можно использовать для масштабирования шаблона перед преобразованием, чтобы обеспечить четкое отображение. |
{text} |
Расположение для отрисовки текста при использовании с маркером HTML. |
В примере "Добавление пользовательского значка в пространство имен атласа" показано, как создать шаблон SVG и добавить его в веб-пакет SDK Azure Maps в качестве шаблона повторного использования, как показано на следующем снимке экрана. Исходный код для этого примера см. в разделе "Добавление пользовательского шаблона значка" в пример кода пространства имен atlas.
Список шаблонов образов
В этой таблице перечислены все шаблоны изображений, представленные в данный момент в Azure Maps веб-пакете SDK. Имя шаблона выше каждого изображения. По умолчанию основным цветом является синий цвет, а дополнительный — белым. Чтобы сделать дополнительный цвет более удобным для просмотра на белом фоне, на следующих изображениях дополнительный цвет устанавливается в черный.
Шаблоны значков символов
marker
marker-thick
marker-circle
маркер-плоский
marker-square
marker-square-cluster
marker-arrow
marker-ball-pin
marker-square-rounded
marker-square-rounded-cluster
flag
flag-triangle
треугольник
triangle-thick
triangle-arrow-up
triangle-arrow-left
hexagon
шестигранник-толстый
hexagon-rounded
hexagon-rounded-thick
pin
pin-round
rounded-square
rounded-square-thick
arrow-up
arrow-up-thin
автомобиль
Шаблон заливки многоугольника
средство проверки
checker-rotated
Круги
circles-spaced
diagonal-lines-up
diagonal-lines-down
diagonal-stripes-up
diagonal-stripes-down
grid-lines
rotated-grid-lines
rotated-grid-stripes
x-fill
zig-zag
zig-zag-vertical
пунктиры
Значки предварительно загруженных изображений
Карта предварительно загружает набор значков в спрайт изображения Maps с помощью marker pin шаблонов, и pin-round. Эти имена значков и их значения цвета перечислены в следующей таблице.
| Имя значка | color | secondaryColor |
|---|---|---|
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 |
Попробуйте сейчас инструмент
С помощью следующего средства можно отобразить различные встроенные шаблоны изображений различными способами и настроить основной и дополнительный цвета и масштаб.
Следующие шаги
Дополнительные сведения о классах и методах, которые используются в этой статье:
Дополнительные примеры кода, в которых можно использовать шаблоны изображений, см. в следующих статьях: