Como utilizar modelos de imagem
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 do 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 atlas.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. A função 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
marcador-quadrado
marcador-quadrado-aglomerado
seta-marcador
marcador-bola-pino
marcador-quadrado-arredondado
marcador-quadrado-arredondado-cluster
flag
triângulo bandeira-bandeira
triângulo
triângulo-grosso
triângulo-seta para cima
triângulo-seta-esquerda
hexágono
hexagon-thick
hexágono-arredondado
hexágono-arredondado-espesso
alfinete
alfinete-redondo
quadrado-arredondado
arredondado-quadrado-espesso
seta para cima
seta para cima-fina
carro
Modelos de padrão de preenchimento de polígono
verificador
quadriculado-girado
círculos
círculos-espaçados
Linhas diagonais
diagonais-linhas-para baixo
listras diagonais para cima
riscas-diagonais-para baixo
linhas de grelha
linhas de grelha rotativas
listras de grade rotativas
x-enchimento
zigue-zague
zigue-zague-vertical
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.
Próximos passos
Saiba mais sobre as classes e métodos usados neste artigo:
Consulte os seguintes artigos para obter mais exemplos de código onde os modelos de imagem podem ser usados: