Caméra et vue

Avec le SDK Maps pour iOS, vous pouvez changer le point de vue de l'utilisateur de la carte en modifiant la caméra de la carte.

Avec le SDK Maps pour iOS, vos utilisateurs peuvent incliner et faire pivoter vos cartes pour les adapter à une orientation adaptée à leur contexte. À n'importe quel niveau de zoom, les utilisateurs peuvent effectuer un panoramique de la carte ou modifier sa perspective avec une latence très faible.

Les modifications apportées à la caméra ne modifient pas les repères, les polylignes ni les autres éléments graphiques que vous avez ajoutés, mais vous pouvez modifier ces ajouts pour qu'ils s'adaptent mieux à la nouvelle vue.

Vue de la carte

Le SDK Maps pour iOS utilise la projection de Mercator pour représenter la surface de la Terre (sphère) sur l'écran de votre appareil (surface plane).

Position de la caméra

La vue de la carte est modélisée comme une caméra orientée vers le bas sur une surface plane. La position de la caméra (et par conséquent le rendu de la carte) est indiquée par les propriétés suivantes : position cible (latitude/longitude), orientation, inclinaison et zoom.

Cible (zone géographique)

La cible de la caméra correspond à la position du centre de la carte, spécifiée en tant que coordonnées de latitude et longitude.

Orientation

L'orientation de la caméra indique la direction de la boussole, mesurée en degrés depuis le nord géographique et correspondant au bord supérieur de la carte. Si vous tracez une ligne verticale du centre au bord supérieur de la carte, l'orientation correspond à la direction de la caméra (mesurée en degrés) par rapport au nord géographique.

La valeur d'orientation 0 signifie que le haut de la carte pointe vers le nord géographique. La valeur d'orientation 90 indique que le haut de la carte est orienté plein est (90 degrés sur une boussole). La valeur 180 signifie que le haut de la carte est orienté plein sud.

L'API Google Maps vous permet de modifier l'orientation d'une carte. Par exemple, un conducteur tourne souvent sa carte routière pour l'aligner dans le sens de la route, tandis qu'un randonneur utilisant une carte et une boussole oriente généralement la carte afin qu'une ligne verticale pointe vers le nord.

Inclinaison (angle de vue)

L'inclinaison définit la position de la caméra sur un arc juste au-dessus du point central de la carte, mesurée en degrés à partir du nadir (direction qui pointe juste en dessous de la caméra). La valeur 0 correspond à une caméra orientée à la verticale vers le bas. Une valeur supérieure à 0 correspond à une caméra inclinée vers l'horizon selon le nombre de degrés spécifié. Lorsque vous modifiez l'angle de vue, la carte apparaît en perspective, les éléments géographiques lointains semblant plus petits, et les plus proches semblant plus grands, comme le montrent les illustrations ci-dessous.

Dans les images ci-dessous, l'angle de vue est de 0 degré. La première image correspond à un plan schématisé ; la position 1 correspond à la position de la caméra et la position 2 à la position actuelle de la carte. La carte qui en résulte est présentée juste en dessous.

Sur les images ci-dessous, l'angle de vue est de 45 degrés. Notez que la caméra se déplace à mi-chemin le long d'un arc entre une ligne verticale perpendiculaire (0 degré) et le sol (90 degrés), jusqu'à la position 3. La caméra pointe toujours vers le point central de la carte, mais la zone représentée par la ligne en position 4 est maintenant visible.

Sur cette capture d'écran, la carte est toujours centrée sur le même point que sur la carte d'origine, mais d'autres éléments géographiques ont été ajoutés en haut de la carte. À mesure que vous augmentez l'angle au-delà de 45 degrés, les éléments géographiques situés entre la caméra et la position de la carte apparaissent proportionnellement plus grands, tandis que ceux situés au-delà de la position de la carte apparaissent proportionnellement plus petits, ce qui donne un effet tridimensionnel.

Zoom

Le niveau de zoom de la caméra détermine l'échelle de la carte. Plus le niveau de zoom est élevé, plus on peut voir de détails sur la carte ; et inversement, plus le niveau de zoom est faible, plus la partie du monde affichée à l'écran est grande. À un niveau de zoom 0, l'échelle de la carte est telle que le monde entier a une largeur d'environ 256 points.

Augmenter le niveau de zoom de 1 double la largeur du monde à l'écran. Ainsi, à un niveau de zoom de N, la largeur du monde est d'environ 256 * 2^N points. Par exemple, à un niveau de zoom de 2, le monde entier mesure environ 1 024 points de large.

Le niveau de zoom doit correspondre à un nombre entier. La fourchette de niveaux de zoom autorisée par la carte dépend d'un certain nombre de facteurs, comme la cible, le type de carte et la taille de l'écran. Tout nombre en dehors de la fourchette sera converti vers la valeur valide la plus proche, qui peut correspondre au niveau de zoom minimal ou maximal. La liste suivante indique le niveau de détail approximatif que vous pouvez vous attendre à voir à chaque niveau de zoom :

• 1 : Le monde
• 5 : La masse continentale/le continent
• 10 : La ville
• 15 : Les rues
• 20 : Les immeubles

Définir la position initiale de la caméra

Définissez la position initiale de la caméra à l'aide de l'objet GMSCameraPosition, qui vous permet de définir la latitude et la longitude de la cible, ainsi que la direction, l'inclinaison et le zoom.

Pour définir la position initiale de la caméra, créez un objet GMSCameraPosition, puis transmettez-le au constructeur de commodité GMSMapView.

let camera = GMSCameraPosition(
  latitude: -33.8683,
  longitude: 151.2086,
  zoom: 16
)
mapView = GMSMapView(frame: self.view.bounds, camera: camera)
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
      

Vous pouvez également créer l'objet GMSMapView à l'aide de la méthode init UIView par défaut. Dans ce cas, la position de la caméra commence à l'emplacement par défaut et vous le modifiez après la création.

mapView = GMSMapView(frame: self.view.bounds)
      

mapView = [[GMSMapView alloc] initWithFrame:self.view.bounds];
      

Modifier la position de la caméra

Vous pouvez modifier par programmation la position de la caméra pour définir la position, l'orientation, l'inclinaison et le zoom. Bien que GMSMapView propose plusieurs méthodes pour modifier la position de la caméra, vous utilisez généralement GMSCameraPosition ou GMSCameraUpdate:

• GMSCameraPosition contient les propriétés et les méthodes que vous utilisez pour modifier chaque paramètre de position de la caméra: cible, orientation, inclinaison et zoom.

• GMSCameraUpdate vous permet de modifier la cible, la direction, l'inclinaison et le zoom. Il contient également d'autres méthodes pratiques pour prendre en charge le défilement, le zoom avancé, le centrage de la caméra dans des limites prédéfinies, etc.

Lorsque vous déplacez la caméra, vous pouvez l'ancrer à sa nouvelle position (ce qui signifie qu'il n'y a pas d'animation) ou animer le mouvement. Par exemple, si vous animez un changement de position cible de la caméra, l'animation passe de l'ancien emplacement au nouveau.

L'animation effectue une interpolation entre les attributs de caméra actuels et les nouveaux attributs. Vous pouvez contrôler la durée de l'animation à l'aide de Core Animation.

Utiliser "GMSCameraPosition"

Pour modifier la caméra avec GMSCameraPosition, créez un objet ou copiez un objet existant, puis définissez-le sur l'objet GMSMapView. Utilisez l'objet GMSCameraPosition pour ancrer l'appareil photo au nouvel emplacement, avec ou sans animation.

Utilisez un objet GMSCameraPosition pour configurer les propriétés de la caméra telles que la latitude, la longitude, le zoom, la direction et l'angle de vue. Vous utiliserez ensuite cet objet pour définir la propriété camera de GMSMapView.

let fancy = GMSCameraPosition(
  latitude: -33,
  longitude: 151,
  zoom: 6,
  bearing: 270,
  viewingAngle: 45
)
mapView.camera = fancy
      

GMSCameraPosition *fancy = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                       longitude:151.2086
                                                            zoom:6
                                                         bearing:30
                                                    viewingAngle:45];
[mapView setCamera:fancy];
      

Omettez toute propriété GMSCameraPosition que vous souhaitez définir sur sa valeur par défaut.

Pour animer le déplacement, utilisez la méthode animateToCameraPosition: au lieu de définir la propriété camera.

Utiliser "GMSCameraUpdate"

GMSCameraUpdate vous permet de modifier la position de la caméra, et de choisir d'ancrer ou d'animer sur cette nouvelle position. L'avantage de GMSCameraUpdate est la commodité. Vous pouvez utiliser GMSCameraPosition pour effectuer les mêmes tâches que GMSCameraUpdate, mais GMSCameraUpdate fournit des méthodes d'assistance supplémentaires pour faciliter la manipulation de l'appareil photo.

Par exemple, pour utiliser GMSCameraPosition afin d'incrémenter le niveau de zoom actuel, vous devez d'abord déterminer le niveau de zoom actuel, puis créer un objet GMSCameraPosition dans lequel vous définissez le zoom sur une valeur supérieure à celle du zoom actuel.

Vous pouvez également construire un objet GMSCameraUpdate avec la méthode zoomIn:. Ensuite, mettez à jour l'appareil photo en transmettant l'objet GMSCameraUpdate à la méthode GMSMapView animateWithCameraUpdate:.

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Utilisez plutôt la méthode moveCamera: GMSMapView pour ancrer la caméra à la nouvelle position.

Dans l'exemple suivant, vous utiliserez GMSCameraUpdate pour animer un mouvement de la caméra afin de la centrer sur Vancouver.

// Center the camera on Vancouver, Canada
let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let vancouverCam = GMSCameraUpdate.setTarget(vancouver)
mapView.animate(with: vancouverCam)
      

// Center the camera on Vancouver, Canada
CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
GMSCameraUpdate *vancouverCam = [GMSCameraUpdate setTarget:vancouver];
[mapView animateWithCameraUpdate:vancouverCam];
      

Créer un objet GMSCameraUpdate

Créez un objet GMSCameraUpdate en utilisant l'une de ses méthodes.

zoomIn: et zoomOut:

Modifiez le niveau de zoom actuel de 1.0, tout en conservant les mêmes propriétés pour toutes les autres propriétés.

zoomTo:

Modifie le niveau de zoom sur la valeur donnée, tout en conservant les mêmes propriétés pour toutes les autres propriétés.

zoomBy:

Augmente (ou diminue, si la valeur est négative) le niveau de zoom de la valeur donnée.

zoomBy:atPoint:

Augmente (ou diminue, si la valeur est négative) le niveau de zoom de la valeur donnée, tout en conservant la position du point spécifié à l'écran.

setTarget:

Modifie la latitude et la longitude de la caméra, tout en conservant toutes les autres propriétés.

setTarget:zoom:

Modifie la latitude, la longitude et le zoom de la caméra, tout en conservant les autres propriétés.

setCamera:

Définit un nouvel élément GMSCameraPosition.

scrollByX:Y:

Modifie la latitude et la longitude de la caméra pour déplacer la carte selon le nombre de points spécifié. Une valeur x positive déplace la caméra vers la droite, de sorte que la carte semble avoir bougé vers la gauche. Une valeur y positive déplace la caméra vers le bas, de sorte que la carte semble avoir bougé vers le haut. Le défilement est effectué par rapport à l'orientation actuelle de la caméra. Par exemple, si la caméra est orientée à 90 degrés, alors l'est est "haut".

fitBounds:

Modifie l'appareil photo pour qu'il centre les limites spécifiées à l'écran au plus haut niveau de zoom possible. Applique une marge intérieure par défaut à la limite de 64 points.

fitBounds:withPadding:

Modifie l'appareil photo pour qu'il centre les limites spécifiées à l'écran au plus haut niveau de zoom possible. Utilisez cette méthode pour spécifier la même marge intérieure, en points, pour tous les côtés du cadre de délimitation.

fitBounds:withEdgeInsets:

Modifie l'appareil photo pour qu'il centre les limites spécifiées à l'écran au plus haut niveau de zoom possible. Avec UIEdgeInsets, vous spécifiez indépendamment la marge intérieure de chaque côté du cadre de délimitation.

Utilisez GMSMapView pour modifier une seule propriété.

GMSMapView fournit plusieurs méthodes qui vous permettent de déplacer la caméra sans utiliser d'objet GMSCameraPosition ou GMSCameraUpdate. Avec ces méthodes, telles que animateToLocation: ou animateToZoom:, vous pouvez animer une modification dans une seule propriété d'appareil photo.

Par exemple, utilisez la méthode toViewingAngle: pour animer une modification de l'inclinaison de la caméra.

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Définir la cible (zone géographique)

La localisation détermine le centre de la carte. Les emplacements sont spécifiés par la latitude et la longitude, et représentés de manière programmatique par un élément CLLocationCoordinate2D, créé avec CLLocationCoordinate2DMake.

Utilisez GMSCameraPosition pour modifier le lieu. Dans cet exemple, la carte est ancrée au nouveau lieu.

let target = CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208)
mapView.camera = GMSCameraPosition(target: target, zoom: 6)
      

CLLocationCoordinate2D target =
    CLLocationCoordinate2DMake(-33.868, 151.208);
mapView.camera = [GMSCameraPosition cameraWithTarget:target zoom:6];
      

Pour animer la modification et faire un panoramique sur le nouvel emplacement, vous pouvez utiliser la méthode animateToCameraPosition: au lieu de définir la propriété camera. Vous pouvez également utiliser la méthode animateToLocation: sur GMSMapView.

mapView.animate(toLocation: CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208))
      

[mapView animateToLocation:CLLocationCoordinate2DMake(-33.868, 151.208)];
      

Vous pouvez également créer un objet GMSCameraUpdate pour déplacer la caméra. Utilisez sa méthode intégrée scrollByX:Y: pour indiquer le nombre de points de défilement de la caméra dans les directions X et Y. Dans cet exemple, vous faites défiler la caméra de 200 points vers la droite et de 100 points vers le bas:

// Move the camera 200 points to the right, and 100 points downwards
let downwards = GMSCameraUpdate.scrollBy(x: 200, y: 100)
mapView.animate(with: downwards)
      

// Move the camera 200 points to the right, and 100 points downwards
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:200.0 Y:100.0];
[mapView animateWithCameraUpdate:downwards];
      

Définissez l'orientation (orientation)

L'orientation correspond à la direction de la boussole, mesurée en degrés depuis le nord géographique pour le bord supérieur de la carte. Par exemple, si l'orientation est de 90 degrés, l'arête supérieure de la carte pointe vers l'est.

Définissez l'orientation par programmation avec GMSCameraPosition ou GMSCameraUpdate, ou avec la méthode animateToBearing: de GMSMapView.

mapView.animate(toBearing: 0)
      

[mapView animateToBearing:0];
      

Définir l'inclinaison (angle de vue)

L'angle de vue correspond à la position de la caméra sur un arc entre le point central de la carte et la surface de la Terre, mesuré en degrés à partir du nadir (direction qui pointe directement en dessous de la caméra). Lorsque vous modifiez l'angle de vue, la carte apparaît en perspective, avec des éléments géographiques situés entre la caméra et la position qui s'affichent proportionnellement plus grands, tandis que les éléments situés au-delà de la position de la carte apparaissent proportionnellement plus petits, ce qui donne un effet tridimensionnel.

L'angle de vue peut être compris entre 0 (pointant directement vers le bas sur la carte) et jusqu'à une valeur maximale dépendante du niveau de zoom. Pour un niveau de zoom supérieur ou égal à 16, l'angle maximal est de 65 degrés. Pour un niveau de zoom inférieur ou égal à 10, l'angle maximal est de 30 degrés.

Définissez l'angle de vue par programmation à l'aide de GMSCameraPosition ou de GMSCameraUpdate, ou avec la méthode animateToViewingAngle: de GMSMapView.

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Définir le zoom

Le niveau de zoom de la caméra détermine l'échelle de la carte. À un niveau de zoom plus élevé, vous pouvez voir plus de détails à l'écran, tandis qu'à un niveau de zoom plus faible, vous pouvez voir une plus grande partie du monde.

Définissez le zoom par programmation avec GMSCameraPosition ou GMSCameraUpdate, ou avec la méthode animateToZoom: de GMSMapView.

mapView.animate(toZoom: 12)
      

[mapView animateToZoom:12];
      

L'exemple suivant utilise la méthode zoomIn: pour construire un objet GMSCameraUpdate afin d'animer un zoom avant d'un niveau par rapport au niveau actuel.

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Définir des limites

Pour déplacer la caméra de sorte qu'une zone d'intérêt entière soit visible au plus haut niveau de zoom possible, définissez les limites de la vue de la caméra. Par exemple, si vous souhaitez afficher toutes les stations-service dans un rayon de cinq miles autour de la position actuelle de l'utilisateur, déplacez la caméra pour qu'elles soient toutes visibles à l'écran:

1. Calculez les GMSCoordinateBounds à afficher à l'écran.
2. Utilisez la méthode cameraForBounds:insets: de GMSMapView pour renvoyer un nouveau GMSCameraPosition.

Définir ces limites permet de s'assurer que le GMSCoordinateBounds donné s'adapte entièrement à la taille de la carte actuelle. Notez que cette méthode définit l'inclinaison et la direction de la carte sur 0.

L'exemple suivant montre comment modifier la caméra pour que les villes de Vancouver et de Calgary apparaissent toutes dans la même vue.

let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let calgary = CLLocationCoordinate2D(latitude: 51.05,longitude: -114.05)
let bounds = GMSCoordinateBounds(coordinate: vancouver, coordinate: calgary)
let camera = mapView.camera(for: bounds, insets: UIEdgeInsets())!
mapView.camera = camera
      

CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
CLLocationCoordinate2D calgary = CLLocationCoordinate2DMake(51.05, -114.05);
GMSCoordinateBounds *bounds =
    [[GMSCoordinateBounds alloc] initWithCoordinate:vancouver coordinate:calgary];
GMSCameraPosition *camera = [mapView cameraForBounds:bounds insets:UIEdgeInsetsZero];
mapView.camera = camera;
      

Limiter le panoramique à une zone donnée

Dans les scénarios ci-dessus, vous définissez les limites de la carte, mais les utilisateurs peuvent ensuite faire défiler la carte ou effectuer un panoramique au-delà de ces limites. À la place, vous pouvez contraindre les limites centrales lat/lng du point focal de la carte (la cible de la caméra) afin que les utilisateurs ne puissent faire défiler l'écran et effectuer un panoramique que dans ces limites.

Par exemple, une application de vente au détail d'un centre commercial ou d'un aéroport peut vouloir limiter la carte à des limites spécifiques, ce qui permet aux utilisateurs de faire défiler l'écran et d'effectuer un panoramique à l'intérieur de ces limites.

Pour limiter le panoramique à des limites spécifiques, définissez la propriété cameraTargetBounds de GMSMapView sur un objet GMSCoordinateBounds qui définit les limites requises. Pour supprimer la restriction ultérieurement, définissez cameraTargetBounds sur "nil".

mapView.cameraTargetBounds = bounds
      

mapView.cameraTargetBounds = bounds;
      

Le diagramme ci-dessous illustre le scénario suivant : la cible de la caméra est limitée à une zone légèrement plus grande que la fenêtre d'affichage. L'utilisateur peut faire défiler la carte ou effectuer un panoramique, sous réserve que la cible de la caméra reste dans la zone délimitée. La croix représente la cible de la caméra :

La carte remplit toujours la fenêtre d'affichage, même si cela se traduit par l'affichage de zones qui se trouvent en dehors des limites définies. Par exemple, si vous positionnez la cible de la caméra à un angle de la zone délimitée, la zone située au-delà de l'angle est visible dans la fenêtre d'affichage, mais les utilisateurs ne peuvent pas faire défiler la carte jusque dans cette zone. Le schéma suivant illustre ce scénario. La croix représente la cible de la caméra :

Dans le schéma suivant, la cible de la caméra a des limites très limitées, ce qui offre à l'utilisateur très peu de possibilités de faire défiler la carte ou de faire un panoramique. La croix représente la cible de la caméra :

Définir un zoom minimal ou maximal

Les constantes globales kGMSMinZoomLevel et kGMSMaxZoomLevel définissent les valeurs de zoom minimale ou maximale. Par défaut, les propriétés minZoom et maxZoom de GMSMapView sont définies sur ces constantes.

Pour limiter la plage de niveaux de zoom disponibles pour la carte, définissez un niveau de zoom minimal et un niveau maximal. Le code suivant limite le niveau de zoom à 10 et 15.

let camera = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 12
)
let mapView = GMSMapView(frame: .zero, camera: camera)
mapView.setMinZoom(10, maxZoom: 15)
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero
                                        camera:camera];
[mapView setMinZoom:10 maxZoom:15];
      

Vous devez définir la plage de zoom avec la méthode setMinZoom:maxZoom:. Toutefois, vous pouvez lire les valeurs actuelles à l'aide des propriétés minZoom et maxZoom. Cette approche est utile lorsque vous limitez une seule des valeurs. Le code suivant ne modifie que le niveau de zoom minimal.

mapView.setMinZoom(12, maxZoom: mapView.maxZoom)
      

[mapView setMinZoom:12 maxZoom:mapView.maxZoom];
      

Si, après avoir mis à jour le zoom minimal et maximal, le niveau de zoom de la caméra est défini sur une valeur en dehors de la nouvelle plage, le zoom actuel est automatiquement mis à jour pour afficher la valeur valide la plus proche. Par exemple, dans le code suivant, le zoom d'origine est défini sur 4. Lorsque la plage de zoom est ensuite définie sur 10-15, le zoom actuel est mis à jour et passe à 10.

// Sets the zoom level to 4.
let camera2 = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 4
)
let mapView2 = GMSMapView(frame: .zero, camera: camera)

// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)
      

// Sets the zoom level to 4.
GMSCameraPosition *camera2 = [GMSCameraPosition cameraWithLatitude:41.887
                                                         longitude:-87.622
                                                              zoom:4];
GMSMapView *mapView2 = [GMSMapView mapWithFrame:CGRectZero
                                         camera:camera];
// The current zoom, 4, is outside of the range. The zoom will change to 10.
[mapView setMinZoom:10 maxZoom:15];