A térkép stílusának módosítása

Cikk
08/05/2024

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

Képernyőkép a térképbetöltési folyamat során beállított szürkeárnyalatos sötét stílusról.

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

Képernyőkép a térképbetöltési folyamat után beállított műholdas stílusról.

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

Stílusválasztó listaelrendezés

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épernyőkép egy térképről, amelyen a Stílusválasztó vezérlő látható, és az elrendezés tulajdonsága listára van állítva.