Térkép létrehozása

Cikk
07/04/2023

Ez a cikk bemutatja, hogyan hozhat létre térképet és animálhat térképet.

Térkép betöltése

A térkép betöltéséhez hozzon létre egy új példányt a Map osztályból. A térkép inicializálásakor adjon meg egy DIV elemazonosítót a térkép megjelenítéséhez, és adja meg a térkép betöltésekor használni kívánt lehetőségeket. Ha nincs megadva alapértelmezett hitelesítési információ a atlas névtérben, ezt az információt meg kell adni a térkép beállításai között a térkép betöltésekor. A térkép több erőforrást tölt be aszinkron módon a teljesítményhez. Ezért a térképpéldány létrehozása után csatoljon egy vagy load egy eseményt ready a térképhez, majd adjon hozzá további kódot, amely a térképet használja az eseménykezelőhöz. Az ready esemény akkor aktiválódik, amikor a térkép elegendő erőforrással rendelkezik ahhoz, hogy programozott módon működjön. Az load esemény a kezdeti térképnézet teljes betöltése után aktiválódik.

Ugyanazon a lapon több térképet is betölthet. A több térkép ugyanazon az oldalon való betöltését bemutató mintakódért lásd: Több térkép a Azure Maps mintákban. A minta forráskódját lásd: Több térkép forráskódja.

Képernyőkép a dokkolási rácsról a térképen.

Tipp

Ugyanazon vagy eltérő hitelesítési és nyelvi beállításokat használhatja, ha ugyanazon az oldalon több térképet használ.

A világ egyetlen példányának megjelenítése

Ha a térkép nagyított széles képernyőn jelenik meg, a világ több példánya vízszintesen jelenik meg. Ez a lehetőség egyes forgatókönyvek esetében nagyszerű, más alkalmazások esetében azonban kívánatos, hogy a világ egyetlen példányát láthassa. Ezt a viselkedést úgy valósítja meg, hogy a térképek renderWorldCopies beállítását a következőre falseállítja: .

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

Térkép beállításai

Térkép létrehozásakor számos különböző lehetőség adható meg, amelyek a térkép működésének testreszabásához használhatók:

A CameraOptions és a CameraBoundOptions használatával adhatja meg a térképen megjelenítendő területet.
A ServiceOptions segítségével megadhatja, hogy a térkép hogyan működjön együtt a térképet használó szolgáltatásokkal.
A StyleOptions használatával adhatja meg, hogy a térképnek stílust kell-e használnia és renderelnie.
A UserInteractionOptions segítségével megadhatja, hogy a térkép hogyan érje el a térképet, amikor a felhasználó a térképet használja.

Ezek a beállítások akkor is frissíthetők, ha a térkép be lett töltve a setCamera, setServiceOptions, setStyleés setUserInteraction függvényekkel.

A térkép kamerájának vezérlése

A térkép megjelenített területét kétféleképpen állíthatja be egy térkép kamerája segítségével. A térkép betöltésekor beállíthatja a kamera beállításait. Vagy bármikor meghívhatja ezt a setCamera lehetőséget, miután a térkép be lett töltve a térképnézet programozott frissítésére.

A kamera beállítása

A térkép kamerája szabályozza, hogy mi jelenjen meg a térképvászon nézetablakában. A kamerabeállítások átadhatók a térkép beállításainak, amikor inicializálják vagy átadják a térképfüggvénynek 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 
});

A térképtulajdonságok, például a középső és a nagyítási szint, a CameraOptions tulajdonságainak részét képezik.

Kamerahatárok beállítása

Határolókeret használatával frissítheti a térkép kamerát. Ha a határolókeretet pontadatok alapján számították ki, gyakran hasznos, ha a kamera beállításaiban egy képpontos kitöltési értéket ad meg, hogy figyelembe vegyék az ikon méretét. Ez a képpontkitöltés segít biztosítani, hogy a pontok ne essenek le a térképnézet széléről.

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

A következő kódban egy Map objektum jön létre a használatával new atlas.Map(). A térképtulajdonságok, például CameraBoundsOptions a Map osztály setCamera függvényével határozhatók meg. A kötések és a kitöltési tulajdonságok a paranccsal setCameravannak beállítva.

Térképnézet animálása

A térkép kamerabeállításainak beállításakor animációs beállítások is beállíthatók. Ezek a beállítások határozzák meg, hogy milyen típusú animációt és időtartamot kell igénybe vennie a kamera áthelyezéséhez.

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

Az alábbi kódban az első kódblokk létrehoz egy térképet, és beállítja az enter és a nagyítási térkép stílusát. A második kódblokkban egy kattintásos eseménykezelő jön létre az animálás gombhoz. Ha ezt a gombot választja, a setCamera függvény a CameraOptions és az AnimationOptions véletlenszerű értékeivel lesz meghívva.

<!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>

Képernyőkép egy térképről egy Animált térképek feliratú gombbal, amely lenyomva a térkép nagyítását vagy kicsinyítését eredményezi.

Kérelemátalakítások

Néha hasznos lehet módosítani a térképvezérlő által küldött HTTP-kéréseket. Például:

Adjon hozzá további fejléceket a jelszóval védett szolgáltatások csempekérelméhez.
Módosítsa az URL-címeket a kérelmek proxyszolgáltatáson keresztüli futtatásához.

A térkép szolgáltatásbeállításai egy transformRequest olyan beállítással rendelkeznek, amellyel a térkép minden kérését módosíthatja, mielőtt azok létrejönnének. A transformRequest beállítás egy függvény, amely két paramétert vesz fel: egy sztring URL-címét és egy erőforrástípus-sztringet, amely jelzi, hogy mire használja a kérést. Ennek a függvénynek requestParameters eredményt kell visszaadnia .

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

Kérelemátalakítás használatakor legalább egy RequestParameters tulajdonságot url tartalmazó objektumot kell visszaadnia. Az alábbiakban az objektumokban RequestParameters található tulajdonságokat találhatja meg.

Beállítás	Típus	Leírás
body (Törzs)	sztring	POST kérelemtörzs.
hitelesítő adatok	`'same-origin'` \| `'include'`	A forrásközi kérések (COR-k) hitelesítő adatainak megadására szolgál. Használja a "include" (belefoglalás) elemet a cookie-k forrásközi kérésekkel való küldéséhez.
Fejlécek	object	A kéréssel elküldendő fejlécek. Az objektum a sztringértékek kulcsértékpárja.
method	`'GET'` \| `'POST'` \| `'PUT'`	A küldendő kérés típusa. Az alapértelmezett szint a `'GET'`.
típus	`'string'` \| `'json'` \| `'arrayBuffer'`	A POST válasz törzsének formátuma.
url	sztring	A kérendő URL-cím.

A térképhez hozzáadott tartalom szempontjából legrelevánsabb erőforrástípusok az alábbi táblázatban találhatók:

Erőforrás típusa	Leírás
Kép	Egy képre vonatkozó kérés, amely a SymbolLayer vagy az ImageLayer használatával használható.
Forrás	Forrásadatokra vonatkozó kérés, például TileJSON-kérés. Az alaptérkép-stílusok egyes kérései ezt az erőforrástípust is használják a forrásadatok betöltésekor.
Csempe	Egy csemperéteg (raszter vagy vektor) kérése.
WFS	A térbeli I/O-modulból egy OGC Web Feature Service-be irányuló kérés `WfsClient` . További információ: Csatlakozás WFS-szolgáltatáshoz.
WebMapService	A térbeli IO-modul kérése `OgcMapLayer` egy WMS- vagy WMTS-szolgáltatáshoz. További információ: Térképréteg hozzáadása az Open Geospatial Consortium (OGC)-ből.

Íme néhány erőforrástípus, amelyeket általában figyelmen kívül hagynak a kérésátalakítás során, és az alaptérkép-stílusokhoz kapcsolódnak: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution.

Az alábbi példa bemutatja, hogyan módosíthatja az összes kérést a méretre https://example.com úgy, hogy hozzáad egy felhasználónevet és jelszót fejlécként a kéréshez.

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