A térkép stílusának módosítása
A térképvezérlő számos különböző térképstílus-beállítást és alaptérkép-stílust támogat. A térképvezérlő inicializálásakor minden stílus beállítható. A stílusokat a térképvezérlő függvényével is beállíthatja setStyle
. Ez a cikk bemutatja, hogyan szabhatja testre a térkép megjelenését, és hogyan valósíthatja meg a stílusválasztó vezérlőt a térképen. A stílusválasztó vezérlőelem lehetővé teszi, hogy a felhasználó váltson a különböző alapstílusok között.
Térképstílus beállításainak megadása
A stílusbeállítások a webvezérlő inicializálása során állíthatók be. A stílusbeállításokat a térképvezérlő függvényének meghívásával setStyle
is frissítheti. Az összes elérhető stílusbeállítás megtekintéséhez tekintse meg a stílusbeállításokat.
//Set the style options when creating the map.
var map = new atlas.Map('map', {
renderWorldCopies: false,
showLogo: true,
showFeedbackLink: true,
style: 'road'
//Additional map options.
};
//Update the style options at anytime using `setStyle` function.
map.setStyle({
renderWorldCopies: true,
showLogo: false,
showFeedbackLink: false
});
Ha egy teljes funkcionalitású mintát keres, amely bemutatja, hogy a különböző stílusok hogyan befolyásolják a térkép megjelenítését, tekintse meg az Azure Maps-minták térképstílus-beállításait. A minta forráskódját a Térképstílus beállításai forráskódban talál.
Alaptérképstílus beállítása
A térképvezérlőt inicializálhatja a webes SDK-ban elérhető alaptérkép-stílusok egyikével is. Ezután a setStyle
függvény használatával frissítheti az alapstílust egy másik leképezési stílussal.
Alaptérképstílus beállítása inicializáláskor
A térképvezérlő alapstílusai az inicializálás során állíthatók be. Az alábbi kódban a style
térképvezérlő beállítása az grayscale_dark alaptérkép-stílusra van állítva.
var map = new atlas.Map('map', {
style: 'grayscale_dark',
//Additional map options
);
Az alaptérkép stílusának frissítése
Az alaptérkép stílusa frissíthető a setStyle
függvény használatával, és beállíthatja, style
hogy másik alaptérkép-stílusra váltson, vagy adjon hozzá további stílusbeállításokat.
A következő kódban a térképpéldány betöltése után a rendszer a setStyle függvény használatával frissíti grayscale_dark
satellite
a térképstílust.
map.setStyle({ style: 'satellite' });
Stílusválasztó vezérlőelem hozzáadása
A stílusválasztó vezérlő egy könnyen használható gombot biztosít, amely egy úszó panelt tartalmaz, amelyet a végfelhasználó használhat az alapstílusok közötti váltáshoz.
A stílusválasztó két különböző elrendezési lehetőséggel rendelkezik: icon
és list
. A stílusválasztó lehetővé teszi két különböző stílusválasztó beállítás style
kiválasztását is: light
és dark
. Ebben a példában a stílusválasztó az icon
elrendezést használja, és ikonok formájában jeleníti meg az alaptérkép-stílusok kijelölési listáját. A stílusvezérlő-választó a következő alapstílusokat tartalmazza: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]
. A stílusválasztó vezérlőelemek beállításáról további információt a Stílusvezérlő beállításai című témakörben talál.
Az alábbi képen az elrendezésben icon
megjelenő stílusválasztó vezérlő látható.
Az alábbi képen az elrendezésben list
megjelenő stílusválasztó vezérlő látható.
Fontos
Alapértelmezés szerint a stílusválasztó vezérlő felsorolja az Azure Maps Gen1 (S0) tarifacsomagjában elérhető összes stílust. Ha csökkenteni szeretné a lista stílusainak számát, adja át a listában megjeleníteni kívánt stílusok tömbét a mapStyle
stílusválasztó beállításába. Ha Gen1 (S1) vagy Gen2 tarifacsomagot használ, és az összes elérhető stílust meg szeretné jeleníteni, állítsa mapStyles
a stílusválasztó beállítását a következőre "all"
: .
Azure Maps Gen1 tarifacsomag kivonása
A Gen1 tarifacsomag elavult, és 26.09.15-én megszűnik. A Gen2 tarifacsomag az 1. generációs (S0 és S1) tarifacsomagot váltja fel. Ha az Azure Maps-fiókjában a Gen1 tarifacsomag van kiválasztva, a kivonás előtt átválthat Gen2 tarifacsomagra, ellenkező esetben automatikusan frissül. További információ: Az Azure Maps-fiók tarifacsomagjának kezelése.
Az alábbi kód bemutatja, hogyan bírálhatja felül az alapértelmezett mapStyles
alapstíluslistát. Ebben a példában a mapStyles
stílusválasztó vezérlőelemben megjelenítendő alapstílusok listázására szolgáló beállítást állítjuk be.
/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
layout: 'list'
}), {
position: 'top-right'
});
Következő lépések
Ha többet szeretne megtudni a cikkben használt osztályokról és módszerekről:
További kódmintákat a térképekhez a következő cikkekben talál: