Ändra formatet för kartan

Kartkontrollen stöder flera olika kartstilsalternativ och baskartstilar. Alla stilar kan ställas in när kartkontrollen initieras. Eller så kan du ställa in stilar genom att använda kartkontrollfunktionen setStyle . Den här artikeln visar hur du använder dessa stilalternativ för att anpassa kartans utseende och hur du implementerar stilväljarkontrollen i din karta. Style picker-kontrollen låter användaren växla mellan olika basstilar.

Inställningar för kartstilen

Stilalternativ kan ställas in under webbstyrningens initialisering. Eller så kan du uppdatera stilalternativen genom att anropa setStyle kartkontrollens funktion. För att se alla tillgängliga stilalternativ, se stilalternativ.

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

Sätt en baskartstil

Du kan också initiera kartkontrollen med en av baskartstilarna som finns tillgängliga i Web SDK. Du kan sedan använda setStyle funktionen för att uppdatera basstilen med en annan kartstil.

Sätt en baskartstil vid initialisering

Grundstilar för kartkontrollen kan ställas in vid initiering. I följande kod style är valet för kartkontroll inställt på grayscale_dark baskartstil.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
});

Uppdatera baskartans stil

Baskartans stil kan uppdateras genom att använda setStyle funktionen och ställa style in möjligheten att antingen byta till en annan baskartstil eller lägga till fler stilalternativ.

I följande kod uppdateras kartstilen från grayscale_dark till satellite med hjälp av funktionen setStyle efter att en kartinstans har lästs in.

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

Anpassa baskartan

StilOverrides-alternativen gör det möjligt för användare att effektivisera baskartan genom att stänga av specifika kartelement som lands-/regiongränser, administrativa distriktsgränser, byggnadsfotavtryck och vägdetaljlager. Detta möjliggör en renare och enklare kartvy, vilket gör det lättare att visualisera geometridata.

Följande kod visar hur man inaktiverar lands-/regiongränser och byggnadsområden på kartan.

var map = new atlas.Map('map', {
    styleOverrides: {
        countryRegion: { borderVisible: false },
        buildingFootprint: { visible: false },
    },

    //Additional map options
});

Här är exempel på alla fem tillgängliga styleOverrides alternativ:

• Lands-/regiongränser

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Administrationsdistriktets gränser

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Gränser för administrativa distrikt på andra nivån

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Skapa fotavtryck

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Väginformation

styleOverrides: {
    roadDetails: { visible: false }
}

Anmärkning

För mer information om de stödda kartstilarna för varje styleOverrides alternativ, se dokumentationen för styleOverrides API.

För ett exempel som visar de olika stilarna och hur de påverkar hur kartan renderas, se Kartstilsalternativ i Azure Maps Samples. För detta exempels källkod, se Map style options källkod.

Lägg till stilpicker-kontrollen

Style picker-kontrollen ger en lättanvänd knapp med flyout-panel som slutanvändaren kan använda för att växla mellan basstilar.

Stilvalaren har två olika layoutalternativ: icon och list. Dessutom låter stilväljaren dig välja två olika stilväljarkontrollalternativ style : light och dark. I detta exempel använder stilväljaren layouten icon och visar en vald lista med baskartstilar i form av ikoner. Stilkontrollväljaren inkluderar följande basuppsättning stilar: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. För mer information om stilpicker-kontrollalternativ, se Style Control Options.

Följande bild visar stilväljarens kontroll som visas i icon layouten.

Följande bild visar stilväljarens kontroll som visas i list layouten.

Viktigt

Som standard visar stilväljarkontrollen en grunduppsättning kartstilar. För att visa alla tillgängliga stilar, ställ in mapStyles alternativet till "all". För att visa en anpassad uppsättning anger du en matris med stilnamn för alternativet mapStyles.

Följande kod visar hur du kan åsidosätta standardbasstillistan mapStyles . I det här exemplet ställer vi in mapStyles alternativet att lista basstilarna som ska visas i stilväljarkontrollen.

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

Nästa steg

För att lära dig mer om de klasser och metoder som används i denna artikel:

Map

StyleOptions

StyleControl

StyleControlOptions

I följande artiklar finns fler kodexempel att lägga till i dina kartor:

Lägg till kartkontroller

Lägg till ett symbolskikt

Lägga till ett bubbellager