Creare una mappa

Articolo
07/04/2023

Questo articolo illustra come creare una mappa e aggiungere un'animazione a una mappa.

Caricamento di una mappa

Per caricare una mappa, creare una nuova istanza della classe Map. Quando si inizializza la mappa, passare un ID elemento DIV per eseguire il rendering della mappa e passare un set di opzioni da usare durante il caricamento della mappa. Se le informazioni di autenticazione predefinite non vengono specificate nello spazio dei nomi, queste informazioni devono essere specificate atlas nelle opzioni della mappa durante il caricamento della mappa. La mappa carica diverse risorse in modo asincrono per le prestazioni. Di conseguenza, dopo aver creato l'istanza della mappa, collegare un ready evento o load alla mappa e quindi aggiungere altro codice che interagisce con la mappa al gestore eventi. L'evento ready viene generato non appena la mappa ha risorse sufficienti caricate per interagire a livello di codice. L'evento load viene generato dopo il completamento del caricamento completo della visualizzazione mappa iniziale.

È anche possibile caricare più mappe nella stessa pagina, per il codice di esempio che illustra il caricamento di più mappe nella stessa pagina, vedere Più mappe negli esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Più codice sorgente mappe.

Screenshot che mostra la griglia di snap sulla mappa.

Suggerimento

È possibile usare le stesse impostazioni di autenticazione e lingua diverse quando si usano più mappe nella stessa pagina.

Mostra una singola copia del mondo

Quando la mappa viene zoomata su uno schermo ampio, vengono visualizzate in orizzontale più copie del mondo. Questa opzione è ideale per alcuni scenari, ma per altre applicazioni è consigliabile visualizzare una singola copia del mondo. Questo comportamento viene implementato impostando l'opzione mappe renderWorldCopies su false.

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Opzioni mappa

Quando si crea una mappa, sono disponibili diversi tipi di opzioni che possono essere passate per personalizzare il modo in cui le funzioni della mappa:

CameraOptions e CameraBoundOptions vengono usati per specificare l'area in cui deve essere visualizzata la mappa.
ServiceOptions viene usato per specificare come la mappa deve interagire con i servizi che alimentano la mappa.
StyleOptions viene usato per specificare la mappa deve essere in stile e sottoposto a rendering.
UserInteractionOptions viene usato per specificare il modo in cui la mappa deve raggiungere quando l'utente interagisce con la mappa.

Queste opzioni possono essere aggiornate anche dopo che la mappa è stata caricata usando le setCamerafunzioni , , setServiceOptionssetStylee setUserInteraction .

Controllo della fotocamera della mappa

Esistono due modi per impostare l'area visualizzata della mappa usando la fotocamera di una mappa. È possibile impostare le opzioni della fotocamera durante il caricamento della mappa. In alternativa, è possibile chiamare l'opzione setCamera in qualsiasi momento dopo che la mappa è stata caricata per aggiornare a livello di codice la visualizzazione mappa.

Impostare la fotocamera

La fotocamera della mappa controlla ciò che viene visualizzato nel riquadro di visualizzazione dell'area di disegno della mappa. Le opzioni della fotocamera possono essere passate alle opzioni della mappa quando vengono inizializzate o passate alla funzione mappe setCamera .

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

Le proprietà della mappa, ad esempio il centro e il livello di zoom, fanno parte delle proprietà CameraOptions .

Impostare i limiti della fotocamera

È possibile usare una casella di selezione per aggiornare la fotocamera della mappa. Se il rettangolo di selezione è stato calcolato dai dati del punto, spesso è utile specificare un valore di riempimento pixel nelle opzioni della fotocamera per tenere conto delle dimensioni dell'icona. Questa spaziatura in pixel consente di assicurarsi che i punti non vengano interrotti dal bordo del riquadro di visualizzazione mappa.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

Nel codice seguente viene costruito un oggetto Map tramite new atlas.Map(). Le proprietà della mappa, ad esempio CameraBoundsOptions, possono essere definite tramite la funzione setCamera della classe Map. I limiti e le proprietà relative alla spaziatura interna vengono impostati tramite setCamera.

Aggiungere un'animazione alla visualizzazione della mappa

Quando si impostano le opzioni della fotocamera della mappa, è anche possibile impostare le opzioni di animazione . Queste opzioni specificano il tipo di animazione e la durata da prendere per spostare la fotocamera.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

Nel codice seguente il primo blocco di codice crea una mappa e imposta gli stili invio e zoom mappa. Nel secondo blocco di codice viene creato un gestore eventi click per il pulsante animate. Quando viene selezionato questo pulsante, la setCamera funzione viene chiamata con alcuni valori casuali per CameraOptions e AnimationOptions.

<!DOCTYPE html>
 <html>
 <head>

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

Screenshot che mostra una mappa con un pulsante con etichetta Animate Maps che, quando premuto, fa sì che la mappa venga zoomata o indietro.

Trasformazioni delle richieste

A volte è utile essere in grado di modificare le richieste HTTP effettuate dal controllo mappa. Ad esempio:

Aggiungere altre intestazioni alle richieste di riquadro per i servizi protetti da password.
Modificare gli URL per eseguire le richieste tramite un servizio proxy.

Le opzioni di servizio della mappa hanno un transformRequest oggetto che può essere usato per modificare tutte le richieste effettuate dalla mappa prima che vengano effettuate. L'opzione transformRequest è una funzione che accetta due parametri, un URL stringa e una stringa di tipo di risorsa che indica per quale richiesta viene usata. Questa funzione deve restituire un risultato RequestParameters .

transformRequest: (url: string, resourceType: string) => RequestParameters

Quando si usa una trasformazione di richiesta, è necessario restituire un RequestParameters oggetto contenente una url proprietà almeno. Di seguito sono riportate le proprietà che possono essere incluse in un RequestParameters oggetto.

Opzione	Tipo	Descrizione
Corpo	string	Corpo della richiesta POST.
credentials	`'same-origin'` \| `'include'`	Usato per specificare l'impostazione delle credenziali delle richieste tra origini (COR). Usare "include" per inviare cookie con richieste tra origini.
headers	object	Intestazioni da inviare con la richiesta. L'oggetto è una coppia di valori chiave di stringa.
method	`'GET'` \| `'POST'` \| `'PUT'`	Tipo di richiesta da effettuare. Il valore predefinito è `'GET'`.
tipo	`'string'` \| `'json'` \| `'arrayBuffer'`	Formato del corpo della risposta POST.
url	string	URL da richiedere.

I tipi di risorse più rilevanti per il contenuto aggiunto alla mappa sono elencati nella tabella seguente:

Tipo di risorsa	Descrizione
Immagine	Richiesta di un'immagine da usare con un SymbolLayer o ImageLayer.
Source (Sorgente)	Richiesta di informazioni di origine, ad esempio una richiesta TileJSON. Alcune richieste dagli stili della mappa di base usano anche questo tipo di risorsa durante il caricamento delle informazioni di origine.
Tile	Richiesta da un livello di riquadro (raster o vettore).
WFS	Richiesta da un `WfsClient` oggetto nel modulo I/O spaziale a un servizio funzionalità Web OGC. Per altre informazioni, vedere Connettersi a un servizio WFS.
WebMapService	Richiesta dal `OgcMapLayer` modulo I/O spaziale a un servizio WMS o WMTS. Per altre informazioni, vedere Aggiungere un livello mappa da Open Geospatial Consortium (OGC).

Ecco alcuni tipi di risorse, in genere ignorati, passati attraverso la trasformazione della richiesta e sono correlati agli stili della mappa di base: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribuzione.

Nell'esempio seguente viene illustrato come modificare tutte le richieste alle dimensioni https://example.com aggiungendo un nome utente e una password come intestazioni alla richiesta.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});