Guide pratique pour utiliser des modèles d’image

Article
06/28/2023

Les images peuvent être utilisées avec des marqueurs HTML et différentes couches dans le SDK web Azure Maps :

Les couches de symboles peuvent afficher des points sur la carte avec une icône d’image. Les symboles peuvent également être rendus le long d’un tracé de lignes.
Les couches de polygones peuvent être rendues avec une image de motif de remplissage.
Les marqueurs HTML peuvent afficher des points à l’aide d’images et d’autres éléments HTML.

Pour garantir de bonnes performances avec les couches, chargez les images dans la ressource de sprite d’image de carte avant le rendu. Par défaut, l’interface IconOptions, de SymbolLayer, précharge dans le sprite d’image de carte quelques images de marqueur dans un certain nombre de couleurs. Ces images de marqueur, entre autres éléments, sont disponibles sous forme de modèles SVG. Elles peuvent être utilisées pour créer des images avec des échelles personnalisées ou être utilisées comme couleur principale et secondaire du client. Au total, 42 modèles d’images sont fournis : 27 icônes de symboles et 15 motifs de remplissage de polygones.

Il est possible d’ajouter des modèles d’image aux ressources de sprite d’image de carte à l’aide de la fonction map.imageSprite.createFromTemplate. Cette fonction permet de passer jusqu’à cinq paramètres :

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

L’id est un identificateur unique que vous créez. L’id est attribué à l’image quand elle est ajoutée au sprite d’image de cartes. Utilisez cet identificateur dans les couches pour spécifier la ressource d’image à restituer. templateName spécifie le modèle d’image à utiliser. L’option color définit la couleur principale de l’image et les options secondaryColor définissent la couleur secondaire de l’image. L’option scale met à l’échelle le modèle d’image avant de l’appliquer au sprite d’image. Quand l’image est appliquée au sprite d’image, elle est convertie en image PNG. Pour garantir un rendu clair, il est préférable d’appliquer un scale-up au modèle d’image avant de l’ajouter au sprite plutôt que dans une couche.

Cette fonction charge l’image de façon asynchrone dans le sprite d’image. Ainsi, elle retourne une promesse que vous pouvez attendre la fin de l’exécution de cette fonction.

Le code suivant montre comment créer une image à partir de l’un des modèles intégrés, puis l’utiliser avec une couche de symboles.

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

Utiliser un modèle d’image avec une couche de symboles

Une fois qu’un modèle d’image a été chargé dans le sprite d’image de carte, il peut être restitué sous la forme d’un symbole dans une couche de symboles en référençant l’ID de ressource d’image dans l’option image de iconOptions.

L'exemple Calque de symbole avec modèle d'icône intégré montre comment procéder en rendant un calque de symbole à l'aide du marker-flat modèle d'image avec une couleur primaire sarcelle et une couleur secondaire blanche, comme le montre la capture d'écran suivante.

Pour obtenir le code source de cet exemple, consultez Couche de symboles avec un modèle d’icône intégré.

Utiliser un modèle d’image le long d’un tracé de lignes

Une fois qu’un modèle d’image a été chargé dans le sprite d’image de carte, il peut être restitué le long du tracé d’une ligne en ajoutant un LineString à une source de données et en utilisant une couche de symboles avec une option lineSpacing, puis en référençant l’ID de la ressource d’image dans l’option image de iconOptions.

Le modèle d’icône de couche de ligne avec icône intégrée montre comment procéder. L’exemple suivant restitue une ligne rose sur la carte et utilise une couche de symboles à l’aide du modèle d’image car avec le bleu toile comme couleur principale et le blanc comme couleur secondaire. Pour obtenir le code source de cet exemple, consultez Couche de lignes avec un modèle d’icône intégré.

Conseil

Si le modèle d’image pointe vers le haut, définissez l’option icône rotation de la couche de symboles sur 90 si vous voulez qu’il pointe dans la même direction que la ligne.

Utiliser un modèle d’image avec une couche de polygones

Une fois qu’un modèle d’image a été chargé dans le sprite d’image de carte, il peut être restitué sous la forme d’un modèle de remplissage dans une couche de polygones en référençant l’ID de ressource d’image dans l’option fillPattern de la couche.

L’exemple de modèle De polygone de remplissage avec icône intégrée montre comment restituer une couche de polygones à l’aide du dot modèle d’image avec une couleur primaire rouge et une couleur secondaire transparente, comme illustré dans la capture d’écran suivante. Pour obtenir le code source de cet exemple, consultez Remplir un polygone avec un modèle d’icône intégré.

Conseil

La définition de la couleur secondaire des motifs de remplissage permet de mieux voir la carte sous-jacente tout en fournissant néanmoins le modèle principal.

Utiliser un modèle d’image avec un marqueur HTML

Un modèle d’image peut être récupéré à l’aide de la fonction altas.getImageTemplate et utilisé comme contenu d’un marqueur HTML. Le modèle peut être passé à l’option htmlContent du marqueur, puis personnalisé à l’aide des options color, secondaryColor et text.

L’exemple de modèle Marqueur HTML avec icône intégrée le montre à l’aide du marker-arrow modèle avec une couleur primaire rouge, une couleur secondaire rose et une valeur de texte « 00 », comme illustré dans la capture d’écran suivante. Pour obtenir le code source de cet exemple, consultez Marqueur HTML avec un modèle d’icône intégrée.

Conseil

Les modèles d’image peuvent aussi être utilisés en dehors de la carte. La fonction getImageTemplate retourne une chaîne SVG qui comprend des espaces réservés : {color}, {secondaryColor}, {scale}, {text}. Remplacez les valeurs de ces espaces réservés pour créer une chaîne SVG valide. Vous pouvez ajouter la chaîne SVG directement au modèle DOM HTML ou la convertir en URI de données et l’insérer dans une étiquette d’image. Par exemple :

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

Créer des modèles réutilisables personnalisés

Si votre application utilise la même icône à travers des modules différents ou si vous créez un module qui ajoute plus de modèles d’image, vous pouvez facilement ajouter et récupérer ces icônes à partir du Kit de développement logiciel (SDK) web Azure Maps. Utilisez les fonctions statiques suivantes sur l’espace de noms atlas.

Nom	Type renvoyé	Description
`addImageTemplate(templateName: string, template: string, override: boolean)`		Ajoute un modèle d’image SVG personnalisé à l’espace de noms atlas.
`getImageTemplate(templateName: string, scale?: number)`	string	Récupère un modèle SVG par son nom.
`getAllImageTemplateNames()`	string[]	Récupère un modèle SVG par son nom.

Les modèles d’images SVG prennent en charge les valeurs d’espace réservé suivantes :

Espace réservé	Description
`{color}`	La couleur principale.
`{secondaryColor}`	La couleur secondaire.
`{scale}`	L’image SVG est convertie en image PNG quand elle est ajoutée au sprite d’image de carte. Cet espace réservé peut être utilisé pour mettre à l’échelle un modèle, avant sa conversion, afin de garantir qu’il s’affiche clairement.
`{text}`	L’emplacement de rendu du texte quand il est utilisé avec un marqueur HTML.

L’exemple Ajouter un modèle d’icône personnalisée à l’espace de noms atlas montre comment prendre un modèle SVG et l’ajouter au kit de développement logiciel (SDK) web Azure Maps en tant que modèle d’icône réutilisable, comme illustré dans la capture d’écran suivante. Pour obtenir le code source de cet exemple, consultez Ajouter un modèle d’icône personnalisé à un espace de noms atlas.

Liste des modèles d’image

Ce tableau liste tous les modèles d’image actuellement disponibles dans le SDK web Azure Maps. Le nom de modèle se trouve au-dessus de chaque image. Par défaut, la couleur principale est le bleu et la couleur secondaire est le blanc. Pour rendre la couleur secondaire plus visible sur un fond blanc, la couleur secondaire est définie sur noir pour les images suivantes.

Modèles d’icône de symbole

marker

marker-thick

marker-circle

marker-flat

icône marker

icône marker-thick

icône marker-circle

icône marker-flat

marker-square

marker-square-cluster

marker-arrow

marker-ball-pin

icône marker-square

icône marker-square-cluster

icône marker-ball-pin

marker-square-rounded

marker-square-rounded-cluster

indicateur

flag-triangle

icône marker-square-rounded

icône marker-square-rounded-cluster

triangle

triangle-thick

triangle-arrow-up

triangle-arrow-left

icône triangle

icône triangle-thick

hexagon

hexagon-thick

hexagon-rounded

hexagon-rounded-thick

icône hexagon

icône hexagon-thick

icône hexagon-rounded

icône hexagon-rounded-thick

pin-round

rounded-square

rounded-square-thick

icône pin

icône pin-round

icône rounded-square

icône rounded-square-thick

arrow-up

arrow-up-thin

voiture

icône car

Modèles de motif de remplissage de polygones

checker

checker-rotated

circles

circles-spaced

icône checker

icône checker-rotated

icône circles

icône circles-spaced

diagonal-lines-up

diagonal-lines-down

diagonal-stripes-up

diagonal-stripes-down

icône diagonal-lines-up

icône diagonal-lines-down

icône diagonal-stripes-up

icône diagonal-stripes-down

grid-lines

rotated-grid-lines

rotated-grid-stripes

x-fill

icône grid-lines

icône rotated-grid-lines

icône rotated-grid-stripes

icône x-fill

zig-zag

zig-zag-vertical

dots

icône zig-zag

icône zig-zag-vertical

icône dots

Icônes d’images préchargées

La carte précharge un ensemble d’icônes dans le sprite d’image de la carte en utilisant les modèles marker, pin et pin-round. Le nom de ces icônes et leur valeur de couleur sont listés dans le tableau suivant.

nom d’icône	couleur	couleur secondaire
`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`

Outil Essayer maintenant

Avec l’outil suivant, vous pouvez restituer les différents modèles d’image intégrés de différentes façons et personnaliser l’échelle et les couleurs principales et secondaires.