Come usare i modelli di immagine

Le immagini possono essere usate con marcatori HTML e vari livelli all'interno dell'SDK Web di 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 della mappa usando la funzione map.imageSprite.createFromTemplate. 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 mentre le opzioni secondaryColor 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 livello Simbolo con modello di icona predefinito illustra come eseguire questa operazione eseguendo il rendering di un livello simbolo con il modello di immagine marker-flat con un colore primario verde acqua 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 di 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 lineSpacing e facendo riferimento all'ID della risorsa immagine nell'opzione image di th iconOptions.

Il livello Linea con il modello di 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 modello di immagine car con un colore primario blu Dodger e un colore secondario bianco. Per il codice sorgente per questo esempio, vedere Livello Linea con codice di esempio di modello di icona predefinito.

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 Riempire il poligono con il modello di icona predefinito illustra come eseguire il rendering di un livello poligono usando il modello di immagine dot 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 del modello di icona predefinito.

Usare un modello di immagine con un marcatore HTML

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

L'esempio di Marcatore HTML con modello di icona predefinito illustra l'uso del modello marker-arrow 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 Marcatore HTML con modello di icona predefinito.

//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 di Mappe di Azure. Usare le funzioni statiche seguenti nello spazio dei nomi atlas.

I modelli di immagine SVG supportano i valori segnaposto seguenti:

L'esempio Aggiungere modello di icona personalizzato allo spazio dei nomi atlas illustra come acquisire un modello SVG e aggiungerlo all'SDK Web di Mappe di Azure come modello di icona riutilizzabile, come illustrato nello screenshot seguente. Per il codice sorgente per questo esempio, vedere Aggiungere modello di icona personalizzato allo spazio dei nomi atlas.

Elenco di modelli di immagine

Questa tabella elenca tutti i modelli di immagine attualmente disponibili nell'SDK Web di 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 icone dei simboli

Modelli di motivi di riempimento dei poligoni

Icone di immagine precaricate

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

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.

Passaggi successivi

Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:

Vedere gli articoli seguenti per altri esempi di codice in cui è possibile usare i modelli di immagine: