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

Cikk
09/22/2023

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 setStyle meghívásával 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 körűen működőképes 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, olvassa el a Térképstílus beállításai a Azure Maps mintákban című témakört. A minta forráskódját a Térképstílus beállításai forráskód című témakörben találja.

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énnyel 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 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énnyel, é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_darksatellite a térképstílust.

map.setStyle({ style: 'satellite' });

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

Stílusválasztó vezérlőelem hozzáadása

A stílusválasztó vezérlő egy könnyen használható gombot biztosít a úszó panellel, 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. Emellett a stílusválasztóval két különböző stílusválasztó vezérlőelemet style is választhat: light és dark. Ebben a példában a stílusválasztó az elrendezést icon 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ásairó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őelem látható.

Az alábbi képen az elrendezésben list megjelenő stílusválasztó vezérlőelem látható.

Stílusválasztó lista elrendezése

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 listában szereplő stílusok 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 a mapStyles stílusválasztó beállítását a értékre "all".

Azure Maps Gen1 tarifacsomag kivonása

Az 1. generációs 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 a Azure Maps fiókjában az 1. generációs tarifacsomag van kiválasztva, áttérhet a Gen2 tarifacsomagra a kivonása előtt, különben automatikusan frissül. További információ: A 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ílus-listá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őelem látható, és az elrendezés tulajdonsága listára van állítva.