Ustawianie stylu mapy (zestaw SDK systemu Android)
W tym artykule przedstawiono dwa sposoby ustawiania stylów mapy przy użyciu zestawu SDK platformy Azure Mapy Android. Usługa Azure Mapy ma sześć różnych stylów map do wyboru. Aby uzyskać więcej informacji na temat obsługiwanych stylów mapy, zobacz obsługiwane style mapy w usłudze Azure Mapy.
Uwaga
Wycofanie zestawu AZURE Mapy Android SDK
Zestaw Azure Mapy Native SDK dla systemu Android jest teraz przestarzały i zostanie wycofany w dniu 3.31.25. Aby uniknąć przerw w działaniu usługi, przeprowadź migrację do zestawu Sdk sieci Web usługi Azure Mapy do 31/31/25. Aby uzyskać więcej informacji, zobacz Przewodnik migracji zestawu SDK platformy Azure Mapy Android.
Wymagania wstępne
Pamiętaj, aby wykonać kroki opisane w przewodniku Szybki start: tworzenie aplikacji dla systemu Android.
Ustawianie stylu mapy w układzie
Styl mapy można ustawić w pliku układu dla klasy działań podczas dodawania kontrolki mapy. Poniższy kod ustawia lokalizację środkową, poziom powiększenia i styl mapy.
<com.azure.android.maps.control.MapControl
android:id="@+id/mapcontrol"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:azure_maps_centerLat="47.602806"
app:azure_maps_centerLng="-122.329330"
app:azure_maps_zoom="12"
app:azure_maps_style="grayscale_dark"
/>
Poniższy zrzut ekranu przedstawia powyższy kod przedstawiający mapę drogową ze stylem ciemnym w skali szarości.
Ustawianie stylu mapy w kodzie
Styl mapy można ustawić programowo w kodzie przy użyciu setStyle metody mapy. Poniższy kod ustawia lokalizację środkową i poziom powiększenia przy użyciu metody map setCamera i stylu mapy na SATELLITE_ROAD_LABELSwartość .
mapControl.onReady(map -> {
//Set the camera of the map.
map.setCamera(center(Point.fromLngLat(-122.33, 47.64)), zoom(14));
//Set the style of the map.
map.setStyle(style(MapStyle.SATELLITE_ROAD_LABELS));
});
mapControl!!.onReady { map: AzureMap ->
//Set the camera of the map.
map.setCamera(center(Point.fromLngLat(-122.33, 47.64)), zoom(14))
//Set the style of the map.
map.setStyle(style(MapStyle.SATELLITE_ROAD_LABELS))
}
Poniższy zrzut ekranu przedstawia powyższy kod przedstawiający mapę ze stylem etykiet dróg satelitarnych.
Ustawianie aparatu mapy
Aparat mapy kontroluje, która część świata jest wyświetlana w widoku mapy. Aparat może być w układzie programowo w kodzie. Podczas ustawiania go w kodzie istnieją dwie główne metody ustawiania położenia mapy; przy użyciu środka i powiększenia lub przekazywania w polu ograniczenia. Poniższy kod pokazuje, jak ustawić wszystkie opcjonalne opcje aparatu podczas używania center i zoom.
//Set the camera of the map using center and zoom.
map.setCamera(
center(Point.fromLngLat(-122.33, 47.64)),
//The zoom level. Typically a value between 0 and 22.
zoom(14),
//The amount of tilt in degrees the map where 0 is looking straight down.
pitch(45),
//Direction the top of the map is pointing in degrees. 0 = North, 90 = East, 180 = South, 270 = West
bearing(90),
//The minimum zoom level the map will zoom-out to when animating from one location to another on the map.
minZoom(10),
//The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
maxZoom(14)
);
//Set the camera of the map using center and zoom.
map.setCamera(
center(Point.fromLngLat(-122.33, 47.64)),
//The zoom level. Typically a value between 0 and 22.
zoom(14),
//The amount of tilt in degrees the map where 0 is looking straight down.
pitch(45),
//Direction the top of the map is pointing in degrees. 0 = North, 90 = East, 180 = South, 270 = West
bearing(90),
//The minimum zoom level the map will zoom-out to when animating from one location to another on the map.
minZoom(10),
//The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
maxZoom(14)
)
Często pożądane jest skupienie mapy na zestawie danych. Pole ograniczenia można obliczyć na podstawie funkcji przy użyciu MapMath.fromData metody i można przekazać do bounds opcji aparatu mapy. Podczas ustawiania widoku mapy na podstawie pola ograniczenia często warto określić padding wartość do uwzględnienia rozmiaru pikseli punktów renderowanych jako bąbelki lub symbole. Poniższy kod pokazuje, jak ustawić wszystkie opcjonalne opcje aparatu podczas używania pola ograniczenia w celu ustawienia położenia aparatu.
//Set the camera of the map using a bounding box.
map.setCamera(
//The area to focus the map on.
bounds(BoundingBox.fromLngLats(
//West
-122.4594,
//South
47.4333,
//East
-122.21866,
//North
47.75758
)),
//Amount of pixel buffer around the bounding box to provide extra space around the bounding box.
padding(20),
//The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
maxZoom(14)
);
//Set the camera of the map using a bounding box.
map.setCamera(
//The area to focus the map on.
bounds(BoundingBox.fromLngLats(
//West
-122.4594,
//South
47.4333,
//East
-122.21866,
//North
47.75758
)),
//Amount of pixel buffer around the bounding box to provide extra space around the bounding box.
padding(20),
//The maximum zoom level the map will zoom-in to when animating from one location to another on the map.
maxZoom(14)
)
Współczynnik proporcji pola ograniczenia może nie być taki sam jak współczynnik proporcji mapy, ponieważ mapa często pokazuje pełny obszar pola ograniczenia, ale często jest mocno pionowo lub poziomo.
Animowanie widoku mapy
Podczas ustawiania opcji aparatu mapy można również użyć opcji animacji, aby utworzyć przejście między bieżącym widokiem mapy a następnym. Te opcje określają typ animacji i czas trwania, który należy wykonać, aby przenieść aparat.
| Opcja | Opis |
|---|---|
animationDuration(Integer durationMs) |
Określa, jak długo aparat animuje się między widokami w milisekundach (ms). |
animationType(AnimationType animationType) |
Określa typ przejścia animacji do wykonania. - JUMP - natychmiastowa zmiana.- EASE - stopniowa zmiana ustawień aparatu.- FLY - stopniowa zmiana ustawień aparatu, które tworzą łuk przypominający lot. |
Ten kod pokazuje, jak animować widok mapy przy użyciu FLY animacji w ciągu trzech sekund:
map.setCamera(
center(Point.fromLngLat(-122.33, 47.6)),
zoom(12),
animationType(AnimationType.FLY),
animationDuration(3000)
);
map.setCamera(
center(Point.fromLngLat(-122.33, 47.6)),
zoom(12.0),
AnimationOptions.animationType(AnimationType.FLY),
AnimationOptions.animationDuration(3000)
)
Powyższy kod demonstruje animowanie widoku mapy z Nowego Jorku do Seattle:
Następne kroki
Więcej przykładów kodu do dodania do map można znaleźć w następujących artykułach: