Cambiare lo stile della mappa

Il controllo mappa supporta diverse opzioni di stile e stili mappa di base. È possibile impostare tutti gli stili al momento dell’inizializzazione del controllo mappa. In alternativa, è possibile impostare gli stili usando la funzione setStyle del controllo mappa. Questo articolo mostra come usare queste opzioni di stile per personalizzare l'aspetto della mappa e come implementare il controllo selezione stile nella mappa. Il controllo selezione stile consente all'utente di passare da uno stile di base a un altro.

Impostare le opzioni di stile della mappa

È possibile impostare le opzioni di stile durante l'inizializzazione del controllo Web. In alternativa, è possibile aggiornare le opzioni di stile chiamando la funzione setStyle del controllo mappa. Per visualizzare tutte le opzioni di stile disponibili, vedere Opzioni di stile.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
});

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

Impostare lo stile della mappa di base

È anche possibile inizializzare il controllo mappa con uno degli stili mappa di base disponibili nell'SDK Web. È quindi possibile usare la funzione setStyle per aggiornare lo stile di base con uno stile mappa diverso.

Impostare uno stile mappa di base al momento dell’inizializzazione

È possibile impostare gli stili di base del controllo mappa al momento dell'inizializzazione. Nel codice seguente, l'opzione style del controllo mappa è impostata sullo stile mappa di base grayscale_dark.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
});

Aggiornare lo stile mappa di base

È possibile aggiornare lo stile mappa di base tramite la funzione setStyle e impostare l'opzione style su un diverso stile mappa di base o aggiungere altre opzioni di stile.

Nel codice seguente, dopo il caricamento di un'istanza della mappa, lo stile della mappa viene aggiornato da grayscale_dark a satellite tramite la funzione setStyle.

map.setStyle({ style: 'satellite' });

Personalizza la mappa base

Le opzioni styleOverrides permettono agli utenti di semplificare la mappa base disattivando elementi specifici della mappa come i confini di paese/regione, i confini dei distretti amministrativi, le impronte degli edifici e i livelli di dettaglio stradale. Questo permette una visualizzazione mappa più pulita e semplice, facilitando la visualizzazione dei dati geometrici.

Il seguente codice mostra come disabilitare i confini di paese/regione e le impronte degli edifici sulla mappa.

var map = new atlas.Map('map', {
    styleOverrides: {
        countryRegion: { borderVisible: false },
        buildingFootprint: { visible: false },
    },

    //Additional map options
});

Ecco esempi di tutte e cinque le opzioni disponibili styleOverrides :

• Confini di paese/regione

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Confini del distretto amministrativo

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Confini del secondo distretto amministrativo

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Impronte degli edifici

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Dettagli della strada

styleOverrides: {
    roadDetails: { visible: false }
}

Per un esempio che mostra i diversi stili e come influenzano il rendering della mappa, consulta le opzioni di stile Mappa nei Mappe di Azure Samples. Per il codice sorgente di questo esempio, vedi Codice sorgente delle opzioni stile mappa.

Aggiungi il controllo di selezione dello stile

Il controllo di selezione dello stile offre un pulsante facile da usare con un riquadro a comparsa che può essere usato dall'utente finale per passare da uno stile di base a un altro.

La selezione stile include due opzioni di layout diverse: icon e list. Inoltre, il selettore di stile consente di scegliere tra due diverse opzioni del controllo del selettore di stile style: light e dark. In questo esempio, la selezione stile usa il layout icon e visualizza un elenco di selezione degli stili mappa di base sotto forma di icone. Il selettore del controllo dello stile include il seguente set di stili di base: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Per altre informazioni sulle opzioni del controllo di selezione dello stile, vedere Opzioni del controllo di selezione dello stile.

L'immagine seguente mostra il controllo di selezione dello stile visualizzato nel layout icon.

L'immagine seguente mostra il controllo di selezione dello stile visualizzato nel layout list.

Il codice seguente mostra come sostituire l'elenco di stili di base mapStyles predefinito. In questo esempio viene impostata l'opzione mapStyles per elencare gli stili di base da visualizzare nel controllo selezione stile.

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});  

Passaggi successivi

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

Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti: