Uso de plantillas de imagen
Las imágenes se pueden usar con los marcadores HTML y varias capas dentro del SDK web de Azure Maps:
- Las capas de símbolos pueden representar puntos en el mapa con un icono de imagen. Los símbolos también se pueden representar a lo largo de una ruta de acceso de líneas.
- Las capas de polígono se pueden representar con una imagen de patrón de relleno.
- Los marcadores HTML pueden representar puntos mediante imágenes y otros elementos HTML.
Con el fin de garantizar un buen rendimiento con las capas, estas cargue las imágenes en el recurso de sprite de imagen de mapa antes de la representación. De forma predeterminada, el objeto IconOptions de SymbolLayer carga previamente un par de imágenes de marcador en algunos colores en el sprite de imagen de mapa. Estas imágenes de marcador y mucho más están disponibles como plantillas SVG. Se pueden usar para crear imágenes con escalas personalizadas o como color principal y secundario del cliente. En total se proporcionan 42 plantillas de imagen: 27 iconos de símbolos y 15 patrones de relleno de polígonos.
Se pueden agregar plantillas de imagen a los recursos de sprite de imagen de mapa mediante la función map.imageSprite.createFromTemplate. Esta función permite pasar hasta cinco parámetros;
createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>
id es un identificador único que usted crea. id se asigna a la imagen cuando se agrega al sprite de imagen del mapa. Use este identificador en las capas para especificar el recurso de imagen que se va a representar. templateName especifica la plantilla de imagen que se va a usar. La opción color establece el color principal de la imagen y las opciones secondaryColor establecen el color secundario de la imagen. La opción scale escala la plantilla de imagen antes de aplicarla al sprite de imagen. Cuando la imagen se aplica al sprite de imagen, se convierte en un PNG. Para garantizar una representación nítida, es mejor escalar verticalmente la plantilla de imagen antes de agregarla al sprite que hacerlo en una capa.
Esta función carga de forma asincrónica la imagen en el sprite de imagen. Por lo tanto, devuelve una promesa que puede esperar que esta función realice.
En el código siguiente se muestra cómo crear una imagen a partir de una de las plantillas integradas y utilizarla con una capa de símbolos.
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'
}
}));
});
Uso de una plantilla de imagen con una capa de símbolos
Cuando se carga una plantilla de imagen en el sprite de imagen de mapa, se puede representar como un símbolo en una capa de símbolos haciendo referencia al identificador de recurso de imagen en la opción image de iconOptions.
En el ejemplo siguiente se representa una capa de símbolos mediante la plantilla de imagen marker-flat con un color principal verde azulado y un color secundario blanco.
Uso de una plantilla de imagen a lo largo de una ruta de acceso de líneas
Cuando se carga una plantilla de imagen en el sprite de imagen de mapa, se puede representar a lo largo de la ruta de acceso de una línea mediante la adición de un objeto LineString a un origen de datos y con una capa de símbolos con una opción lineSpacing y haciendo referencia al identificador del recurso de imagen en la opción image de iconOptions.
En el ejemplo siguiente se representa una línea rosa en el mapa y se usa una capa de símbolos mediante la plantilla de imagen car con un color principal azul Dodger y un color secundario blanco.
Sugerencia
Si la plantilla de imagen apunta hacia arriba, establezca la opción de icono rotation de la capa de símbolos en 90 si desea que apunte con la misma dirección que la línea.
Uso de una plantilla de imagen con una capa de polígono
Cuando se carga una plantilla de imagen en el sprite de imagen de mapa, se puede representar como un patrón de relleno en una capa de polígono haciendo referencia al identificador de recurso de imagen en la opción fillPattern de la capa.
En el ejemplo siguiente se representa una capa de polígono mediante la plantilla de imagen dot con un color principal rojo y un color secundario transparente.
Sugerencia
Establecer el color secundario de los patrones de relleno facilita la visualización del mapa subyacente y seguirá proporcionando el patrón principal.
Uso de una plantilla de imagen con un marcador HTML
Se puede recuperar una plantilla de imagen con la función altas.getImageTemplate y usarse como contenido de un marcador HTML. La plantilla se puede pasar a la opción del marcador htmlContent y, a continuación, personalizarse con las opciones color, secondaryColor y text.
En el ejemplo siguiente se usa la plantilla marker-arrow con un color principal rojo, un color secundario rosa y un valor de texto de "00".
Sugerencia
Las plantillas de imagen también se pueden usar fuera del mapa. La función getImageTemplate devuelve una cadena SVG que tiene marcadores de posición; {color}, {secondaryColor}, {scale}, {text}. Reemplace estos valores de marcador de posición para crear una cadena SVG válida. Después, puede bien agregar la cadena SVG directamente al DOM HTML, bien convertirla en un URI de datos e insertarlo en una etiqueta de imagen. Por ejemplo:
//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);
Creación de plantillas reutilizables personalizadas
Si la aplicación usa el mismo icono con iconos diferentes o si va a crear un módulo que agregue plantillas de imagen adicionales, puede agregar y recuperar fácilmente estos iconos desde el SDK web de Azure Maps. Utilice las siguientes funciones estáticas en el espacio de nombres atlas.
| Nombre | Tipo de valor devuelto | Descripción |
|---|---|---|
addImageTemplate(templateName: string, template: string, override: boolean) |
Agrega una plantilla de imagen SVG personalizada al espacio de nombres atlas. | |
getImageTemplate(templateName: string, scale?: number) |
string | Recupera una plantilla de SVG por nombre. |
getAllImageTemplateNames() |
string[] | Recupera una plantilla de SVG por nombre. |
Las plantillas de imagen SVG admiten los siguientes valores del marcador de posición:
| Marcador de posición | Descripción |
|---|---|
{color} |
El color principal. |
{secondaryColor} |
El color secundario. |
{scale} |
La imagen SVG se convierte en una imagen PNG cuando se agrega al sprite de imagen de mapa. Este marcador de posición se puede usar para escalar una plantilla antes de que se convierta para asegurarse de que se representa claramente. |
{text} |
La ubicación para representar texto cuando se usa con un marcador HTML. |
En el ejemplo siguiente se muestra cómo tomar una plantilla SVG y agregarla al SDK web de Azure Maps como plantilla de icono reutilizable.
Lista de plantillas de imagen
En esta tabla se enumeran todas las plantillas de imagen disponibles actualmente en el SDK web de Azure Maps. El nombre de la plantilla se encuentra encima de cada imagen. De forma predeterminada, el color principal es el azul y el secundario es el blanco. Para que el color secundario sea más fácil de ver en un fondo blanco, las siguientes imágenes tienen el color secundario establecido en negro.
Plantillas de iconos de símbolos
marker
marker-thick
marker-circle
marker-flat
marker-square
marker-square-cluster
marker-arrow
marker-ball-pin
marker-square-rounded
marker-square-rounded-cluster
Marca
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
automóvil
Plantillas de patrón de relleno poligonal
checker
checker-rotated
circles
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
Iconos de imagen cargados previamente
El mapa carga previamente un conjunto de iconos en el sprite de imagen de mapas usando las plantillas marker, pin y pin-round. Estos nombres de icono y sus valores de color se muestran en la siguiente tabla.
| nombre del icono | 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 |
Pruebe ahora la herramienta
Con la siguiente herramienta, puede representar las distintas plantillas de imagen integradas de varias maneras y personalizar la escala y los colores principales y secundarios.
Pasos siguientes
Más información sobre las clases y los métodos utilizados en este artículo:
Consulte los artículos siguientes para obtener más ejemplos de código donde se pueden usar las plantillas de imagen: