Como utilizar modelos de imagem

Artigo
10/18/2023

As imagens podem ser usadas com marcadores HTML e várias camadas no SDK da Web do Azure Maps:

As camadas de símbolos podem renderizar pontos no mapa com um ícone de imagem. Os símbolos também podem ser renderizados ao longo de um caminho de linhas.
As camadas de polígono podem ser renderizadas com uma imagem de padrão de preenchimento.
Os marcadores HTML podem renderizar pontos usando imagens e outros elementos HTML.

Para garantir um bom desempenho com camadas, carregue as imagens no recurso de sprite de imagem do mapa antes de renderizar. O IconOptions, do SymbolLayer, pré-carrega algumas imagens de marcador em um punhado de cores no sprite da imagem do mapa, por padrão. Essas imagens de marcador e muito mais estão disponíveis como modelos SVG. Eles podem ser usados para criar imagens com escalas personalizadas ou usados como uma cor primária e secundária do cliente. No total, são fornecidos 42 modelos de imagem: 27 ícones de símbolos e 15 padrões de preenchimento de polígonos.

Os modelos de imagem podem ser adicionados aos recursos de sprite de imagem do mapa usando a map.imageSprite.createFromTemplate função. Esta função permite que até cinco parâmetros sejam passados;

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

O id é um identificador exclusivo que você cria. O id é atribuído à imagem quando ela é adicionada ao sprite de imagem de mapas. Use esse identificador nas camadas para especificar qual recurso de imagem renderizar. O templateName especifica qual modelo de imagem usar. A color opção define a cor primária da imagem e as secondaryColor opções definem a cor secundária da imagem. A scale opção dimensiona o modelo de imagem antes de aplicá-lo ao sprite de imagem. Quando a imagem é aplicada ao sprite de imagem, ela se converte em um PNG. Para garantir uma renderização nítida, é melhor aumentar a escala do modelo de imagem antes de adicioná-lo ao sprite do que escalá-lo em uma camada.

Esta função carrega assincronamente a imagem no sprite da imagem. Assim, ele retorna uma promessa que você pode esperar até que esta função seja concluída.

O código a seguir mostra como criar uma imagem a partir de um dos modelos internos e, em seguida, usá-la com uma camada de símbolo.

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'
      }
   }));
});

Usar um modelo de imagem com uma camada de símbolos

Depois que um modelo de imagem é carregado no sprite de imagem do mapa, ele pode ser renderizado como um símbolo em uma camada de símbolo, fazendo referência ao ID do recurso de imagem na image opção do iconOptions.

O exemplo de modelo Camada de símbolo com ícone interno demonstra como fazer isso renderizando uma camada de símbolo usando o marker-flat modelo de imagem com uma cor primária azul-escuro e uma cor secundária branca, conforme mostrado na captura de tela a seguir.

Para obter o código-fonte deste exemplo, consulte Camada de símbolo com código de exemplo de modelo de ícone interno.

Usar um modelo de imagem ao longo de um caminho de linhas

Depois que um modelo de imagem é carregado no sprite de imagem do mapa, ele pode ser renderizado ao longo do caminho de uma linha adicionando um LineString a uma fonte de dados e usando uma camada de símbolo com uma lineSpacingopção e fazendo referência ao ID do recurso de imagem na image opção de th iconOptions.

A camada Linha com modelo de ícone interno demonstra como fazer isso. Como mostrado na captura de tela a seguir, ele renderiza uma linha vermelha no mapa e usa uma camada de símbolo usando o car modelo de imagem com uma cor primária azul esquiva e uma cor secundária branca. Para obter o código-fonte deste exemplo, consulte Camada de linha com código de exemplo de modelo de ícone interno.

Gorjeta

Se o modelo de imagem apontar para cima, defina a rotation opção de ícone da camada de símbolos como 90 se quiser que ele aponte na mesma direção da linha.

Usar um modelo de imagem com uma camada de polígono

Depois que um modelo de imagem é carregado no sprite de imagem do mapa, ele pode ser renderizado como um padrão de preenchimento em uma camada de polígono, fazendo referência ao ID do recurso de imagem na fillPattern opção da camada.

O exemplo de modelo Polígono de preenchimento com ícone interno demonstra como renderizar uma camada de polígono usando o dot modelo de imagem com uma cor primária vermelha e uma cor secundária transparente, conforme mostrado na captura de tela a seguir. Para obter o código-fonte deste exemplo, consulte Polígono de preenchimento com código de exemplo de modelo de ícone interno.

Gorjeta

Definir a cor secundária dos padrões de preenchimento torna mais fácil ver o mapa subjacente ainda fornecendo o padrão primário.

Usar um modelo de imagem com um marcador HTML

Um modelo de imagem pode ser recuperado usando a altas.getImageTemplate função e usado como o conteúdo de um marcador HTML. O modelo pode ser passado para a htmlContent opção do marcador e, em seguida, personalizado usando as coloropções , secondaryColore text .

O exemplo de modelo de marcador HTML com ícone interno demonstra isso usando o modelo com uma cor primária vermelha, uma cor secundária rosa marker-arrow e um valor de texto de "00", conforme mostrado na captura de tela a seguir. Para obter o código-fonte deste exemplo, consulte Marcador HTML com código de exemplo de modelo de ícone interno.

Gorjeta

Os modelos de imagem também podem ser usados fora do mapa. O funciton getImageTemplate retorna uma cadeia de caracteres SVG que tem espaços reservados; {color}, {secondaryColor}, {scale}, {text}. Substitua esses valores de espaço reservado para criar uma cadeia de caracteres SVG válida. Em seguida, você pode adicionar a cadeia de caracteres SVG diretamente ao HTML DOM ou convertê-la em um URI de dados e inseri-la em uma marca de imagem. Por exemplo:

//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);

Crie modelos reutilizáveis personalizados

Se o seu aplicativo usa o mesmo ícone em módulos diferentes ou se você está criando um módulo que adiciona mais modelos de imagem, você pode facilmente adicionar e recuperar esses ícones do SDK da Web do Azure Maps. Use as seguintes funções estáticas no atlas namespace.

Nome	Tipo de Retorno	Description
`addImageTemplate(templateName: string, template: string, override: boolean)`		Adiciona um modelo de imagem SVG personalizado ao namespace atlas.
`getImageTemplate(templateName: string, scale?: number)`	string	Recupera um modelo SVG pelo nome.
`getAllImageTemplateNames()`	string[]	Recupera um modelo SVG pelo nome.

Os modelos de imagem SVG suportam os seguintes valores de espaço reservado:

Marcador de Posição	Description
`{color}`	A cor primária.
`{secondaryColor}`	A cor secundária.
`{scale}`	A imagem SVG é convertida em uma imagem png quando adicionada ao sprite da imagem do mapa. Esse espaço reservado pode ser usado para dimensionar um modelo antes de ser convertido para garantir que ele seja renderizado com clareza.
`{text}`	O local para renderizar texto quando usado com um marcador HTML.

O exemplo Adicionar modelo de ícone personalizado ao namespace atlas demonstra como usar um modelo SVG e adicioná-lo ao SDK da Web do Azure Maps como um modelo de ícone reutilizável, conforme mostrado na captura de tela a seguir. Para obter o código-fonte deste exemplo, consulte Adicionar modelo de ícone personalizado ao código de exemplo do namespace atlas.

Lista de modelos de imagem

Esta tabela lista todos os modelos de imagem atualmente disponíveis no SDK da Web do Azure Maps. O nome do modelo está acima de cada imagem. Por padrão, a cor primária é azul e a cor secundária é branco. Para tornar a cor secundária mais fácil de ver em um fundo branco, as imagens a seguir têm a cor secundária definida como preto.

Modelos de ícones de símbolos

marcador

marcador-espesso

marcador-círculo

marker-flat

ícone do marcador

ícone de espessura do marcador

ícone de círculo de marcador

ícone de marcador plano

marcador-quadrado

marcador-quadrado-aglomerado

seta-marcador

marcador-bola-pino

ícone de marcador quadrado

ícone marcador-quadrado-cluster

ícone marcador-bola-pino

marcador-quadrado-arredondado

marcador-quadrado-arredondado-cluster

flag

triângulo bandeira-bandeira

ícone de marcador quadrado arredondado

ícone marcador-quadrado-arredondado-cluster

triângulo

triângulo-grosso

triângulo-seta para cima

triângulo-seta-esquerda

ícone de triângulo

ícone de espessura de triângulo

hexágono

hexagon-thick

hexágono-arredondado

hexágono-arredondado-espesso

ícone hexágono

ícone com espessura de hexágono

ícone arredondado em hexágono

Ícone hexágono-arredondado-espesso

alfinete

alfinete-redondo

quadrado-arredondado

arredondado-quadrado-espesso

ícone de pino

ícone de pino redondo

ícone quadrado arredondado

ícone de espessura quadrada arredondada

seta para cima

seta para cima-fina

carro

ícone do carro

Modelos de padrão de preenchimento de polígono

verificador

quadriculado-girado

círculos

círculos-espaçados

ícone do verificador

ícone girado pelo quadriculado

ícone círculos

ícone com espaçamento de círculos

Linhas diagonais

diagonais-linhas-para baixo

listras diagonais para cima

riscas-diagonais-para baixo

ícone de linhas diagonais

Ícone de linhas diagonais para baixo

Ícone de listras diagonais para cima

ícone de listras diagonais para baixo

linhas de grelha

linhas de grelha rotativas

listras de grade rotativas

x-enchimento

ícone de linhas de grelha

ícone de linhas de grade giradas

ícone de listras de grade giradas

ícone x-fill

zigue-zague

zigue-zague-vertical

pontos

ícone em zigue-zague

ícone zig-zag-vertical

ícone de pontos

Ícones de imagem pré-carregados

O mapa pré-carrega um conjunto de ícones no sprite de imagem de mapas usando os markermodelos , pine pin-round . Esses nomes de ícones e seus valores de cor estão listados na tabela a seguir.

Nome do ícone	color	secundárioColor
`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`

Experimente agora a ferramenta

Com a ferramenta a seguir, você pode renderizar os diferentes modelos de imagem internos de várias maneiras e personalizar as cores e a escala primária e secundária.