Como usar modelos de imagem
As imagens podem ser usadas com marcadores HTML e várias camadas no SDK da Web do Azure Mapas:
- As camadas de símbolo 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 de mapa antes de renderizar. O IconOptions, do SymbolLayer, pré-carrega algumas imagens de marcador em um punhado de cores no sprite de imagem do mapa, por padrão. Essas imagens de marcador e outras 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, há 42 modelos de imagem fornecidos: 27 ícones de símbolo e 15 padrões de preenchimento de polígono.
Modelos de imagem podem ser adicionados aos recursos de sprite de imagem de mapa usando a função map.imageSprite.createFromTemplate. Essa função permite que até cinco parâmetros sejam empregados;
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 é adicionado ao sprite de imagem de mapas. Use esse identificador nas camadas para especificar qual recurso de imagem deve ser renderizado. templateName especifica qual modelo de imagem usar. A opção color define a cor primária da imagem e as opções secondaryColor definem a cor secundária da imagem. A opção scale dimensiona o modelo de imagem antes de aplicá-lo ao sprite de imagem. Quando é aplicada ao sprite da imagem, a imagem é convertida em um arquivo PNG. Para garantir uma renderização nítida, é melhor aumentar o modelo da imagem antes de adicioná-lo ao sprite, do que aumentá-lo em uma camada.
Esta função carrega de forma assíncrona a imagem no sprite de imagem. Portanto, ele retorna uma promessa de que você pode aguardar a conclusão dessa função.
O código a seguir mostra como criar uma imagem a partir de um dos modelos integrados e, a seguir, 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ímbolo
Depois que um modelo de imagem é carregado no sprite de imagem do mapa, ele pode ser renderizado como uma camada de símbolo referenciando a ID do recurso de imagem na opção image de iconOptions.
A amostra do modelo de camada de símbolo com ícone interno demonstrará como fazer isso renderizando uma camada de símbolo usando o modelo de imagem do marker-flat com uma cor primária verde-azulada e uma cor secundária branca, conforme mostrado na captura de tela a seguir.
Para obter o código-fonte desse exemplo, consulte Camada de símbolos com código de exemplo do modelo do í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 por meio da adição de uma LineString a uma fonte de dados e usando uma camada de símbolo com uma opção lineSpacing e referenciando a ID do recurso de imagem na opção image de iconOptions.
O modelo de camada de linhas com ícone interno demonstrará como fazer isso. De acordo com a captura de tela a seguir, ele renderiza uma linha vermelha no mapa e usa uma camada de símbolo usando o modelo de imagem do car com uma cor primária azul-anil e uma cor secundária branca. Para obter o código-fonte desse exemplo, consulte Camada de linha com o código de exemplo do modelo de ícone interno.
Dica
Se o modelo de imagem apontar para cima, defina a opção de ícone rotation da camada de símbolo para 90 se quiser que ele aponte na mesma direção da linha.
Usar um modelo de imagem com uma camada de polígonos
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 referenciando a ID do recurso de imagem na opção fillPattern da camada.
A amostra do modelo de polígono de preenchimento com ícone interno demonstrará como renderizar uma camada de polígono usando o modelo de imagem do dot 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 desse exemplo, consulte Código de exemplo de preenchimento do polígono com o modelo de ícone interno.
Dica
Definir a cor secundária dos padrões de preenchimento torna mais fácil ver que o mapa subjacente ainda fornecerá o padrão principal.
Usar um modelo de imagem com um marcador HTML
Um modelo de imagem pode ser recuperado usando a função atlas.getImageTemplate e usado como o conteúdo de um marcador HTML. O modelo pode ser passado para a opção htmlContent do marcador e personalizado usando as opções color, secondaryColor e text.
A amostra do modelo de marcador de HTML com ícone interno demonstrará isso usando o modelo do marker-arrow com uma cor primária vermelha, uma cor secundária rosa e um valor de texto de "00", conforme mostrado na captura de tela a seguir. Para obter o código-fonte desse exemplo, consulte Código de exemplo do marcador HTML com modelo de ícone interno.
Dica
Modelos de imagem também podem ser usados fora do mapa. A função getImageTemplate retorna uma cadeia de caracteres de SVG com espaços reservados: {color}, {secondaryColor}, {scale} e {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);
Criar modelos reutilizáveis personalizados
Se o seu aplicativo usa o mesmo ícone com módulos diferentes ou se você está criando um módulo que adiciona mais modelos de imagem, você pode adicionar e recuperar facilmente esses ícones do SDK da Web do Azure Mapas. Use as funções estáticas a seguir no namespace atlas.
| Nome | Tipo de retorno | Descrição |
|---|---|---|
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 por nome. |
getAllImageTemplateNames() |
string[] | Recupera um modelo SVG por nome. |
Os modelos de imagem SVG dão suporte aos seguintes valores de espaço reservado:
| Espaço reservado | Descrição |
|---|---|
{color} |
A cor primária. |
{secondaryColor} |
A cor secundária. |
{scale} |
A imagem SVG é convertida em uma imagem png quando adicionada ao sprite de imagem do mapa. Esse espaço reservado pode ser usado para dimensionar um modelo antes de ser convertido para garantir que seja renderizado com clareza. |
{text} |
O local para renderizar o texto quando usado com um marcador HTML. |
A amostra do namespace Adicionar modelo de ícone personalizado ao atlas demonstrará como usar um modelo de SVG e adicioná-lo ao SDK da Web do Azure Mapas como um modelo de ícone reutilizável, conforme mostrado na captura de tela a seguir. Para obter o código-fonte desse 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 Mapas. O nome do modelo está acima de cada imagem. Por padrão, a cor primária é azul e a cor secundária é branca. 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 ícone de símbolo
marcador
marker-thick
marker-circle
marker-flat
marker-square
marker-square-cluster
marker-arrow
marker-ball-pin
marker-square-rounded
marker-square-rounded-cluster
flag
flag-triangle
triangle
triangle-thick
triangle-arrow-up
triangle-arrow-left
hexagon
hexagon-thick
hexagon-rounded
hexagon-rounded-thick
pin
pin-round
rounded-square
rounded-square-thick
arrow-up
arrow-up-thin
car
Modelos de padrão de preenchimento de polígono
checker
checker-rotated
círculos
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
dots
Ícones de imagem pré-carregados
O mapa pré-carrega um conjunto de ícones no sprite de imagem do mapa usando os modelos marker, pin e pin-round. Esses nomes de ícones e seus valores de cores estão listados na tabela a seguir.
| nome do ícone | cor | 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 |
Ferramenta Experimentar agora
Com a ferramenta a seguir, você pode renderizar os diferentes modelos de imagem integrados de várias maneiras e personalizar as cores primárias e secundárias e a escala.
Próximas etapas
Saiba mais sobre as classes e métodos usados neste artigo:
Confira os artigos a seguir para obter mais exemplos de código onde os modelos de imagem podem ser usados: