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 qué recurso de imagen 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 la 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, a continuación, usarla 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 de Capa de símbolos con la plantilla de iconos integrada se muestra cómo hacerlo mediante la representación de una capa de símbolos mediante la plantilla de imagen marker-flat con un color principal verde azulado y un color secundario blanco, como se muestra en la siguiente instantánea.
Para obtener el código fuente de este ejemplo, consulte el Código de ejemplo de capa de símbolo con plantilla de iconos integrada.
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.
La capa de línea con la plantilla de icono integrada muestra cómo hacerlo. Tal y como se muestra en la siguiente instantánea, se representa una línea roja 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. Para obtener el código fuente de este ejemplo, consulte el Código de ejemplo de capa de línea con plantilla de iconos integrada.
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.
El ejemplo de plantilla de Rellenar polígono con icono integrado muestra cómo representar una capa de polígono mediante la plantilla de imagen dot con un color primario rojo y un color secundario transparente, como se muestra en la siguiente instantánea. Para obtener el código fuente de este ejemplo, consulte el Código de ejemplo de relleno de polígono con plantilla de iconos integrada.
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.
El ejemplo de plantilla de icono HTML con icono integrado muestra esto con la plantilla marker-arrow con un color primario rojo, un color secundario rosa y un valor de texto de "00", como se muestra en la captura de pantalla siguiente. Para obtener el código fuente de este ejemplo, consulte el Código de ejemplo de marcador HTML con plantilla de iconos integrada.
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 en módulos diferentes o si está creando un módulo que agregue más plantillas de imagen, 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 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 represente claramente. |
{text} |
La ubicación para representar texto cuando se usa con un marcador HTML. |
El ejemplo de Agregar plantilla de icono personalizado a atlas namespace muestra cómo tomar una plantilla SVG y agregarla al SDK web de Azure Maps como plantilla de icono reutilizable, como se muestra en la siguiente instantánea. Para obtener el código fuente de este ejemplo, consulte Adición de una plantilla de icono personalizada al código de ejemplo del espacio de nombres atlas.
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: