Skapa en karta

Artikel
07/04/2023

Den här artikeln visar hur du skapar en karta och animerar en karta.

Läser in en karta

Om du vill läsa in en karta skapar du en ny instans av klassen Map. När du initierar kartan skickar du ett DIV-element-ID för att återge kartan och skicka en uppsättning alternativ som ska användas vid inläsning av kartan. Om standardautentiseringsinformation inte anges i atlas namnområdet måste den här informationen anges i kartalternativen när kartan läses in. Kartan läser in flera resurser asynkront för prestanda. När du har skapat kartinstansen bifogar du en ready eller load -händelse till kartan och lägger sedan till mer kod som interagerar med kartan till händelsehanteraren. Händelsen ready utlöses så snart kartan har tillräckligt med resurser inlästa för att interagera med programmatiskt. Händelsen load utlöses när den första kartvyn har lästs in helt.

Du kan också läsa in flera kartor på samma sida. Exempelkod som visar inläsning av flera kartor på samma sida finns i Flera kartor i Azure Maps Exempel. Källkoden för det här exemplet finns i Källkod för flera kartor.

En skärmbild som visar fästrutnätet på kartan.

Tips

Du kan använda samma eller olika inställningar för autentisering och språk när du använder flera kartor på samma sida.

Visa en enda kopia av världen

När kartan zoomas ut på en bred skärm visas flera kopior av världen vågrätt. Det här alternativet är bra för vissa scenarier, men för andra program är det önskvärt att se en enda kopia av världen. Det här beteendet implementeras genom att alternativet maps renderWorldCopies anges till false.

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

Kartalternativ

När du skapar en karta där finns det flera olika typer av alternativ som kan skickas in för att anpassa hur kartan fungerar:

CameraOptions och CameraBoundOptions används för att ange vilket område kartan ska visa.
ServiceOptions används för att ange hur kartan ska interagera med tjänster som driver kartan.
StyleOptions används för att ange att kartan ska formateras och återges.
UserInteractionOptions används för att ange hur kartan ska nå när användaren interagerar med kartan.

Dessa alternativ kan också uppdateras när kartan har lästs in med hjälp av setCamerafunktionerna , setServiceOptions, setStyleoch setUserInteraction .

Kontrollera kartkameran

Det finns två sätt att ange det visade området på kartan med hjälp av kameran på en karta. Du kan ställa in kameraalternativen när du läser in kartan. Eller så kan du anropa setCamera alternativet när som helst när kartan har lästs in för att programmatiskt uppdatera kartvyn.

Ställ in kameran

Kartkameran styr vad som visas i kartarbetsytans visningsvy. Kameraalternativ kan skickas till kartalternativen när de initieras eller skickas till kartfunktionen 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 
});

Kartegenskaper, till exempel center- och zoomnivå, är en del av egenskaperna CameraOptions .

Ställ in kameragränsarna

En avgränsningsruta kan användas för att uppdatera kartkameran. Om avgränsningsrutan beräknades utifrån punktdata är det ofta användbart att ange ett utfyllnadsvärde för bildpunkter i kameraalternativen för att ta hänsyn till ikonstorleken. Den här pixelutfyllnaden hjälper till att säkerställa att punkter inte hamnar utanför kartvyportens kant.

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

I följande kod skapas ett Map-objekt via new atlas.Map(). Kartegenskaper som CameraBoundsOptions kan definieras via setCamera-funktionen i map-klassen. Egenskaper för gränser och utfyllnad anges med hjälp av setCamera.

Animera kartvy

När du ställer in kameraalternativen för kartan kan animeringsalternativ också anges. Dessa alternativ anger vilken typ av animering och varaktighet det ska ta att flytta kameran.

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

I följande kod skapar det första kodblocket en karta och anger formaten för retur- och zoomningskarta. I det andra kodblocket skapas en klickhändelsehanterare för animera-knappen. När den här knappen väljs setCamera anropas funktionen med några slumpmässiga värden för CameraOptions och 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>

En skärmbild som visar en karta med en knapp med etiketten Animera kartor som när den trycks på gör att kartan zoomar in eller ut.

Begär transformeringar

Ibland är det bra att kunna ändra HTTP-begäranden som görs av kartkontrollen. Exempel:

Lägg till fler rubriker i panelbegäranden för lösenordsskyddade tjänster.
Ändra URL:er för att köra begäranden via en proxytjänst.

Tjänstalternativen för kartan har en transformRequest som kan användas för att ändra alla begäranden som görs av kartan innan de görs. Alternativet transformRequest är en funktion som tar in två parametrar: en sträng-URL och en resurstypsträng som anger vad begäran används till. Den här funktionen måste returnera ett RequestParameters-resultat .

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

När du använder en begärandetransformering måste du returnera ett RequestParameters objekt som innehåller en url egenskap som minst. Följande är de egenskaper som kan ingå i ett RequestParameters -objekt.

Alternativ	Typ	Description
body	sträng	En POST-begärandetext.
autentiseringsuppgifter	`'same-origin'` \| `'include'`	Används för att ange inställningen för autentiseringsuppgifter för begäran om korsande ursprung (COR). Använd "include" för att skicka cookies med begäranden om korsande ursprung.
Headers	objekt	Rubrikerna som ska skickas med begäran. Objektet är ett nyckel/värde-par med strängvärden.
metod	`'GET'` \| `'POST'` \| `'PUT'`	Den typ av begäran som ska göras. Standardvärdet är `'GET'`.
typ	`'string'` \| `'json'` \| `'arrayBuffer'`	Formatet för POST-svarstexten.
url	sträng	Url:en som ska begäras.

De resurstyper som är mest relevanta för innehåll som du lägger till på kartan visas i följande tabell:

Resurstyp	Description
Bild	En begäran om en bild för användning med antingen en SymbolLayer eller ImageLayer.
Källa	En begäran om källinformation, till exempel en TileJSON-begäran. Vissa begäranden från baskartformaten använder också den här resurstypen vid inläsning av källinformation.
Panel	En begäran från ett panelskikt (raster eller vektor).
WFS	En begäran från en `WfsClient` i modulen Spatial IO till en OGC-webbfunktionstjänst. Mer information finns i Ansluta till en WFS-tjänst.
WebMapService	En begäran från modulen `OgcMapLayer` i Spatial IO till en WMS- eller WMTS-tjänst. Mer information finns i Lägga till ett kartskikt från Open Geospatial Consortium (OGC).

Här följer några resurstyper som vanligtvis ignoreras och som skickas via begärandetransformeringen och som är relaterade till baskartformaten: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs och Attribution.

I följande exempel visas hur du ändrar alla begäranden till storleken https://example.com genom att lägga till ett användarnamn och lösenord som rubriker i begäran.

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