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.
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 setCamera
vannak 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.
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>'
}
});
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: