Térkép létrehozása

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.

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é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.

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:

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

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

Az alkalmazás funkcióinak hozzáadásához tekintse meg a kódra vonatkozó példákat: