Zmienianie stylu mapy

Kontrolka mapy obsługuje kilka różnych opcji stylu mapy i stylów mapy podstawowej. Wszystkie style można ustawić podczas inicjowania kontrolki mapy. Możesz też ustawić style przy użyciu funkcji kontrolki setStyle mapy. W tym artykule pokazano, jak używać tych opcji stylu, aby dostosować wygląd mapy i jak zaimplementować kontrolkę selektora stylów na mapie. Kontrolka selektora stylów umożliwia użytkownikowi przełączanie się między różnymi stylami bazowymi.

Ustawianie opcji stylu mapy

Opcje stylu można ustawić podczas inicjowania kontrolki internetowej. Możesz też zaktualizować opcje stylu, wywołując funkcję kontrolki setStyle mapy. Aby wyświetlić wszystkie dostępne opcje stylu, zobacz opcje stylu.

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

Ustawianie stylu mapy bazowej

Możesz również zainicjować kontrolkę mapy przy użyciu jednego ze stylów mapy podstawowej, które są dostępne w zestawie SDK sieci Web. Następnie możesz użyć setStyle funkcji , aby zaktualizować styl podstawowy przy użyciu innego stylu mapy.

Ustawianie podstawowego stylu mapy podczas inicjowania

Style podstawowe kontrolki mapy można ustawić podczas inicjowania. W poniższym kodzie style opcja kontrolki mapy jest ustawiona na styl podstawowej mapy grayscale_dark.

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

    //Additional map options
});

Aktualizowanie stylu mapy podstawowej

Styl mapy podstawowej można zaktualizować, korzystając z funkcji setStyle i ustawiając opcję style na zmianę na inny styl mapy podstawowej lub dodanie więcej opcji stylu.

W poniższym kodzie, po załadowaniu wystąpienia mapy, styl mapy zostanie zaktualizowany z grayscale_dark do satellite przy użyciu funkcji setStyle.

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

Dostosowywanie mapy podstawowej

Opcje styleOverrides umożliwiają użytkownikom uproszczenie mapy podstawowej przez wyłączenie określonych elementów mapy, takich jak granice kraju/regionu, granice okręgów administracyjnych, kontury budynków oraz warstwy szczegółów dróg. Umożliwia to bardziej przejrzysty i prostszy widok mapy, co ułatwia wizualizowanie danych geometrycznych.

Poniższy kod pokazuje, jak wyłączyć granice kraju/regionu i tworzyć ślady na mapie.

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

    //Additional map options
});

Oto przykłady wszystkich pięciu dostępnych styleOverrides opcji:

• Granice kraju/regionu

styleOverrides: {
    countryRegion: { borderVisible: false }
}

• Granice okręgu administracyjnego

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

• Drugie granice powiatu administracyjnego

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

• Ślady budynków

styleOverrides: {
    buildingFootprint: { visible: false }
}

• Szczegóły drogi

styleOverrides: {
    roadDetails: { visible: false }
}

Aby zapoznać się z przykładem przedstawiającym różne style i ich wpływ na sposób renderowania mapy, zobacz Opcje stylu mapy w przykładach usługi Azure Maps. Aby zapoznać się z kodem źródłowym tego przykładu, zobacz Kod źródłowy opcji stylu mapy.

Dodawanie kontrolki selektora stylów

Kontrolka selektora stylów zapewnia łatwy w użyciu przycisk z panelem wysuwanym, który może być używany przez użytkownika końcowego do przełączania się między stylami podstawowymi.

Selektor stylów ma dwie różne opcje układu: icon i list. Ponadto selektor stylów umożliwia wybranie dwóch różnych opcji kontrolki style selektora stylów: light i dark. W tym przykładzie selektor stylów używa icon układu i wyświetla listę wybranych stylów mapy podstawowej w postaci ikon. Selektor kontrolek stylu zawiera następujący podstawowy zestaw stylów: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. Aby uzyskać więcej informacji na temat opcji kontrolki selektora stylów, zobacz Opcje kontrolki stylu.

Na poniższej ilustracji przedstawiono kontrolkę selektora stylów wyświetlaną w icon układzie.

Na poniższej ilustracji przedstawiono kontrolkę selektora stylów wyświetlaną w list układzie.

Poniższy kod pokazuje, jak zastąpić domyślną mapStyles listę stylów podstawowych. W tym przykładzie ustawiamy opcję mapStyles, aby wypisać style podstawowe do wyświetlenia w kontrolce selektora stylów.

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

Następne kroki

Aby dowiedzieć się więcej o klasach i metodach używanych w tym artykule:

Więcej przykładów kodu do dodania do map można znaleźć w następujących artykułach: