Ändra formatet för kartan

Artikel
08/05/2024

Kartkontrollen stöder flera olika alternativ för kartformat och baskartformat. Alla format kan anges när kartkontrollen initieras. Du kan också ange formatmallar med hjälp av kartkontrollens setStyle funktion. Den här artikeln visar hur du använder dessa formatalternativ för att anpassa kartans utseende och hur du implementerar kontrollen för formatväljaren på kartan. Med kontrollen för formatväljaren kan användaren växla mellan olika basformat.

Ange alternativ för kartformat

Formatalternativ kan anges under initieringen av webbkontroll. Du kan också uppdatera formatalternativen genom att anropa kartkontrollens setStyle funktion. Om du vill se alla tillgängliga formatalternativ kan du läsa formatalternativ.

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

Ett fullständigt funktionellt exempel som visar hur de olika formaten påverkar hur kartan återges finns i Alternativ för kartformat i Azure Maps-exempel. Källkoden för det här exemplet finns i Källkod för kartformatalternativ.

Ange ett baskartformat

Du kan också initiera kartkontrollen med någon av de grundläggande kartformat som är tillgängliga i Webb-SDK. Du kan sedan använda setStyle funktionen för att uppdatera basformatet med ett annat kartformat.

Ange ett baskartformat vid initiering

Basformat för kartkontrollen kan anges under initieringen. I följande kod style är alternativet för kartkontrollen inställt på grayscale_dark baskartstil.

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

    //Additional map options
);

Skärmbild som visar det mörka formatmallen gråskala som anges under kartinläsningsprocessen.

Uppdatera baskartans formatmall

Baskartstilen setStyle kan uppdateras med hjälp av funktionen och ange style alternativet för att antingen ändra till ett annat baskartformat eller lägga till fler formatalternativ.

När en kartinstans har lästs in i följande kod uppdateras kartformatet från grayscale_dark till med funktionen setStylesatellite.

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

Skärmbild som visar satellitformatet, inställt efter kartinläsningsprocessen.

Lägg till formatväljarkontrollen

Kontrollen för formatväljaren ger en lättanvänd knapp med utfällbara paneler som kan användas av slutanvändaren för att växla mellan basformat.

Formatväljaren har två olika layoutalternativ: icon och list. Med formatväljaren kan du också välja två olika alternativ för formatväljaren style : light och dark. I det här exemplet använder formatväljaren layouten icon och visar en urvalslista med baskartformat i form av ikoner. Formatkontrollväljaren innehåller följande grundläggande uppsättning format: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Mer information om alternativ för formatväljare finns i Alternativ för formatkontroll.

Följande bild visar formatväljarkontrollen som visas i icon layouten.

Följande bild visar formatväljarkontrollen som visas i list layouten.

Listlayout för formatväljare

Viktigt!

Som standard listar formatväljarkontrollen alla tillgängliga format under prisnivån Gen1 (S0) i Azure Maps. Om du vill minska antalet formatmallar i den här listan skickar du en matris med de format som du vill ska visas i listan till mapStyle alternativet för formatväljaren. Om du använder prisnivån Gen1 (S1) eller Gen2 och vill visa alla tillgängliga formatmallar anger du mapStyles alternativet för formatväljaren till "all".

Azure Maps Gen1-prisnivån dras tillbaka

Prisnivån Gen1 är nu inaktuell och dras tillbaka den 26-09-15. Prisnivån Gen2 ersätter prisnivån Gen1 (både S0 och S1). Om ditt Azure Maps-konto har valt prisnivån Gen1 kan du växla till prisnivån Gen2 innan den dras tillbaka, annars uppdateras den automatiskt. Mer information finns i Hantera prisnivån för ditt Azure Maps-konto.

Följande kod visar hur du åsidosätter standardlistan mapStyles för basformat. I det här exemplet ställer vi in mapStyles alternativet för att visa en lista över basformaten som ska visas i formatvä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'
});

Skärmbild som visar en karta med kontrollen Formatväljare med layoutegenskapen inställd på lista.