Come usare i modelli di immagine

Articolo
10/18/2023

Le immagini possono essere usate con marcatori HTML e vari livelli all'interno dell'SDK Web Mappe di Azure:

I livelli simbolo possono eseguire il rendering dei punti sulla mappa con un'icona dell'immagine. È anche possibile eseguire il rendering dei simboli lungo un percorso di linee.
È possibile eseguire il rendering dei livelli poligono con un'immagine del motivo di riempimento.
I marcatori HTML possono eseguire il rendering dei punti usando immagini e altri elementi HTML.

Per garantire prestazioni ottimali con i livelli, caricare le immagini nella risorsa sprite dell'immagine della mappa prima del rendering. IconOptions, di SymbolLayer, precarica un paio di immagini di marcatore in pochi colori nello sprite dell'immagine della mappa, per impostazione predefinita. Queste immagini di marcatore e altro ancora sono disponibili come modelli SVG. Possono essere usati per creare immagini con scale personalizzate o usate come colore primario e secondario del cliente. In totale sono disponibili 42 modelli di immagine: 27 icone dei simboli e 15 modelli di riempimento poligono.

I modelli di immagine possono essere aggiunti alle risorse sprite dell'immagine mappa usando la map.imageSprite.createFromTemplate funzione . Questa funzione consente di passare fino a cinque parametri;

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

id è un identificatore univoco creato. L'oggetto id viene assegnato all'immagine quando viene aggiunto allo sprite dell'immagine di mappe. Usare questo identificatore nei livelli per specificare quale risorsa immagine eseguire il rendering. templateName Specifica il modello di immagine da usare. L'opzione color imposta il colore principale dell'immagine e le secondaryColor opzioni impostano il colore secondario dell'immagine. L'opzione scale ridimensiona il modello di immagine prima di applicarlo allo sprite dell'immagine. Quando l'immagine viene applicata allo sprite dell'immagine, viene convertita in un file PNG. Per garantire un rendering nitido, è preferibile aumentare le prestazioni del modello di immagine prima di aggiungerlo allo sprite, piuttosto che aumentare le prestazioni in un livello.

Questa funzione carica in modo asincrono l'immagine nello sprite dell'immagine. Restituisce quindi una promessa che è possibile attendere il completamento di questa funzione.

Il codice seguente illustra come creare un'immagine da uno dei modelli predefiniti, quindi usarla con un livello simbolo.

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

Usare un modello di immagine con un livello simbolo

Dopo aver caricato un modello di immagine nello sprite dell'immagine della mappa, è possibile eseguirne il rendering come simbolo in un livello simbolo facendo riferimento all'ID risorsa immagine nell'opzione image di iconOptions.

L'esempio di modello Simbolo con icona predefinita illustra come eseguire questa operazione eseguendo il rendering di un livello simbolo usando il marker-flat modello di immagine con un colore primario teale e un colore secondario bianco, come illustrato nello screenshot seguente.

Per il codice sorgente per questo esempio, vedere Livello simbolo con codice di esempio di modello icona predefinito.

Usare un modello di immagine lungo un percorso di linee

Dopo aver caricato un modello di immagine nello sprite dell'immagine della mappa, è possibile eseguirne il rendering lungo il percorso di una linea aggiungendo un oggetto LineString a un'origine dati e usando un livello simbolo con un'opzione lineSpacinge facendo riferimento all'ID della risorsa immagine nell'opzione image di th iconOptions.

Il livello Linea con il modello icona predefinito illustra come eseguire questa operazione. Come illustrato nello screenshot seguente, esegue il rendering di una linea rossa sulla mappa e usa un livello simbolo usando il car modello di immagine con un colore primario blu dodger e un colore secondario bianco. Per il codice sorgente per questo esempio, vedere Il livello riga con il codice di esempio di modello di icona predefinito.

Suggerimento

Se il modello di immagine punta verso l'alto, impostare l'opzione rotation icona del livello simbolo su 90 se si desidera che punti nella stessa direzione della linea.

Usare un modello di immagine con un livello poligono

Dopo aver caricato un modello di immagine nello sprite dell'immagine della mappa, è possibile eseguirne il rendering come motivo di riempimento in un livello poligono facendo riferimento all'ID risorsa immagine nell'opzione fillPattern del livello.

L'esempio di modello Riempimento poligono con icona predefinita illustra come eseguire il rendering di un livello poligono usando il dot modello di immagine con un colore primario rosso e un colore secondario trasparente, come illustrato nello screenshot seguente. Per il codice sorgente per questo esempio, vedere Riempire il poligono con il codice di esempio di modello di icona predefinito.

Suggerimento

L'impostazione del colore secondario dei motivi di riempimento rende più semplice vedere la mappa sottostante fornendo comunque il motivo primario.

Usare un modello di immagine con un marcatore HTML

Un modello di immagine può essere recuperato usando la altas.getImageTemplate funzione e usato come contenuto di un marcatore HTML. Il modello può essere passato all'opzione htmlContent del marcatore e quindi personalizzato usando le coloropzioni , secondaryColore text .

L'esempio di modello html Marker with built-in icon (Marcatore HTML con icona predefinita) illustra l'uso del marker-arrow modello con un colore primario rosso, un colore secondario rosa e un valore di testo "00", come illustrato nello screenshot seguente. Per il codice sorgente per questo esempio, vedere Html Marker with built-in icon template sample code (Marcatore HTML con codice di esempio di modello icona predefinito).

Suggerimento

I modelli di immagine possono essere usati anche all'esterno della mappa. Il funciton getImageTemplate restituisce una stringa SVG con segnaposto; {color}, {secondaryColor}, {scale}{text}. Sostituire questi valori segnaposto per creare una stringa SVG valida. È quindi possibile aggiungere la stringa SVG direttamente al DOM HTML oppure convertirla in un URI di dati e inserirla in un tag immagine. Ad esempio:

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

Creare modelli riutilizzabili personalizzati

Se l'applicazione usa la stessa icona all'interno di moduli diversi o se si sta creando un modulo che aggiunge altri modelli di immagine, è possibile aggiungere e recuperare facilmente queste icone dall'SDK Web Mappe di Azure. Usare le funzioni statiche seguenti nello spazio dei atlas nomi .

Nome	Tipo restituito	Descrizione
`addImageTemplate(templateName: string, template: string, override: boolean)`		Aggiunge un modello di immagine SVG personalizzato allo spazio dei nomi atlas.
`getImageTemplate(templateName: string, scale?: number)`	string	Recupera un modello SVG in base al nome.
`getAllImageTemplateNames()`	string[]	Recupera un modello SVG in base al nome.

I modelli di immagine SVG supportano i valori segnaposto seguenti:

Segnaposto	Descrizione
`{color}`	Colore principale.
`{secondaryColor}`	Colore secondario.
`{scale}`	L'immagine SVG viene convertita in un'immagine png quando viene aggiunta allo sprite dell'immagine della mappa. Questo segnaposto può essere usato per ridimensionare un modello prima che venga convertito per assicurarsi che venga eseguito il rendering in modo chiaro.
`{text}`	Posizione in cui eseguire il rendering del testo quando viene usato con un marcatore HTML.

L'esempio Add custom icon template to atlas namespace (Aggiungi modello icona personalizzata allo spazio dei nomi atlas) illustra come acquisire un modello SVG e aggiungerlo all'SDK Web Mappe di Azure come modello di icona riutilizzabile, come illustrato nello screenshot seguente. Per il codice sorgente per questo esempio, vedere Aggiungere un modello di icona personalizzato al codice di esempio dello spazio dei nomi atlas.

Elenco di modelli di immagine

Questa tabella elenca tutti i modelli di immagine attualmente disponibili nell'SDK Web Mappe di Azure. Il nome del modello è sopra ogni immagine. Per impostazione predefinita, il colore principale è blu e il colore secondario è bianco. Per semplificare la visualizzazione del colore secondario su uno sfondo bianco, le immagini seguenti hanno il colore secondario impostato su nero.

Modelli di icona dei simboli

marker

marcatore-spessore

cerchio marcatore

marker-flat

icona del marcatore

icona con spessore marcatore

icona a forma di cerchio marcatore

icona a forma di indicatore piatto

marcatore quadrato

marker-square-cluster

freccia del marcatore

marker-ball-pin

icona a forma di quadrato marcatore

icona marker-square-cluster

icona marker-ball-pin

marcatore arrotondato al quadrato

marker-square-rounded-cluster

flag

triangolo flag

icona a forma di indicatore arrotondato al quadrato

icona marker-square-rounded-cluster

triangolo

triangolo-spesso

triangolo-freccia su

triangolo-freccia sinistra

icona triangolo

icona a forma di triangolo

Esagono

hexagon-thick

esagonale arrotondato

esagono-arrotondato-spesso

icona esagonale

icona esagonale spessa

icona esagonale arrotondata

icona esagonale con spessore arrotondato

arrotondamento

arrotondato al quadrato

spessore arrotondato al quadrato

Icona a forma di puntina

Icona arrotondamento

icona arrotondata al quadrato

icona arrotondata con spessore quadrato

freccia su

freccia su sottile

Auto

icona dell'auto

Modelli di motivo di riempimento poligono

Checker

checker ruotato

Cerchi

cerchi spaziati

Icona del controllo

Icona a forma di checker ruotata

icona cerchi

Icona con spaziatura cerchi

linee diagonali-up

linee diagonali verso il basso

diagonale-strips-up

diagonale-strips-down

icona diagonale-linee-su

icona diagonale-linee-giù

icona diagonale-strips-up

icona diagonale-strips-down

linee griglia

linee di griglia ruotate

striping ruotato-griglia

riempimento x

icona delle linee della griglia

icona a forma di griglia ruotata

icona ruotata-griglia-strips

Icona di riempimento x

zig-zag

zig-zag-verticale

Punti

Icona zig-zag

Icona zig-zag-verticale

icona puntini

Icone dell'immagine precaricata

La mappa precarica un set di icone nello sprite dell'immagine di mappe usando i markermodelli , pine pin-round . Questi nomi di icona e i relativi valori di colore sono elencati nella tabella seguente.

nome icona	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`

Provalo ora strumento

Con lo strumento seguente è possibile eseguire il rendering dei diversi modelli di immagine predefiniti in vari modi e personalizzare i colori e la scala primari e secondari.