Définition d’un style de carte (Android SDK)
Cet article vous présente deux façons de définir des styles de carte à l’aide d’Android SDK Azure Maps. Azure Maps offre le choix entre six styles de carte. Pour plus d’informations sur les styles de carte pris en charge, consultez Styles de carte pris en charge dans Azure Maps.
Remarque
Mise hors service d’Android SDK Azure Maps
Le kit de développement logiciel (SDK) natif Azure Maps pour Android est désormais déconseillé et va être mis hors service le 31 mars 2025. Pour éviter toute interruption de service, nous vous recommandons de migrer vers le kit de développement logiciel (SDK) web Azure Maps avant le 31 mars 2025. Pour plus d’informations, consultez le Guide de migration Android SDK Azure Maps.
Prérequis
Veillez à suivre les étapes du Démarrage rapide : Créer une application Android.
Définir le style de carte dans la disposition
Vous pouvez définir un style de carte dans le fichier de disposition de votre classe d’activité lorsque vous ajoutez le contrôle de carte. Le code suivant définit l’emplacement du centre, le niveau de zoom et le style de carte.
<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"
/>
La capture d’écran suivante montre le rendu, obtenu avec le code ci-dessus, d’une carte routière avec le style de nuances de gris foncé.
Définition du style de carte dans le code
Le style de carte peut être défini programmatiquement dans le code avec la méthode setStyle de la carte. Le code suivant définit l’emplacement du centre et le niveau de zoom à l’aide de la méthode setCamera de la carte et spécifie le style de carte SATELLITE_ROAD_LABELS.
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))
}
La capture d’écran suivante montre le rendu, obtenu avec le code ci-dessus, d’une carte avec le style des étiquettes de route satellite.
Définition de la caméra de la carte
La caméra de la carte contrôle la région du monde qui est affichée dans le point de vue de la carte. Elle peut se trouver dans la disposition ou être spécifiée programmatiquement dans le code. Dans le deuxième cas, il existe deux méthodes principales pour définir la position de la carte : avec center et zoom ou en passant un cadre englobant. Le code suivant montre comment définir toutes les options de caméra facultatives avec center et 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)
)
Il est souvent souhaitable de concentrer la carte sur un jeu de données. Un cadre englobant peut être calculé à partir des caractéristiques à l’aide de la méthode MapMath.fromData et transmis dans l’option bounds de la caméra de la carte. Lors de la définition d’une vue cartographique basée sur un cadre englobant, il est souvent utile de spécifier une valeur padding pour tenir compte de la taille en pixels des points rendus sous forme de bulles ou de symboles. Le code suivant montre comment définir toutes les options de caméra facultatives lorsqu’un cadre englobant est utilisé pour définir la position de la caméra.
//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)
)
Les proportions d’un cadre englobant ne sont pas forcément les mêmes que celles de la carte. De ce fait, la carte affiche souvent la zone du cadre englobant dans sa totalité, mais serré verticalement ou horizontalement seulement.
Animer la vue cartographique
Lorsque vous définissez les options de caméra de la carte, vous pouvez également utiliser des options d’animation pour créer une transition entre la vue de la carte actuelle et la suivante. Ces options spécifient le type d’animation et la durée nécessaire pour déplacer la caméra.
| Option | Description |
|---|---|
animationDuration(Integer durationMs) |
Spécifie la durée d’animation de la caméra entre les vues en millisecondes (ms). |
animationType(AnimationType animationType) |
Spécifie le type de transition d’animation à effectuer. - JUMP - modification immédiate.- EASE - modification progressive des paramètres de la caméra.- FLY - modification progressive des paramètres de l'appareil photo qui crée un arc ressemblant à un vol. |
Ce code montre comment animer l’affichage de la carte en utilisant une animation FLY sur une durée de trois secondes :
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)
)
Le code ci-dessus permet d'animer l’affichage de la carte de New York à Seattle :
Étapes suivantes
Pour obtenir plus d’exemples de code à ajouter à vos cartes, consultez les articles suivants :