IGN

Géoservices IGN

Guide de migration depuis l'API v2 - Affichage de base

Dernière mise à jour : 17 Novembre 2017

Table des matières

On montre ici comment afficher une carte utilisant la couche “Photographies aériennes” centrée sur la position de l’internaute (géolocalisation) et affichant les producteurs associés à la couche affichée.

Avec l’ancienne version (API V2)

Pour pouvoir utiliser les fonctions de base de l’API Géoportail V2, il faut d’abord :

L’exemple suivant montre comment on pouvait faire cela avec l’API V2 :

La suite du tutoriel montre comment obtenir un résultat similaire avec les nouveaux outils du Géoportail.

Avec OpenLayers et l’extension Géoportail pour Openlayers

Principe

Les fonctions principales à utiliser pour afficher une carte de base sont :

Des informations supplémentaires sur l’affichage des couches géoportail sont disponibles ici et là pour l’affichage des producteurs.

Le code suivant vous permettra ainsi d’afficher une carte avec une couche WMTS (ici, les photographies aériennes) et l’affichage des producteurs de la couche dans la section “map” du code HTML :

function go() {
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.GeoportalWMTS({
          layer: "ORTHOIMAGERY.ORTHOPHOTOS"
      })
    ],
    controls : [
       new ol.control.GeoportalAttribution()
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([2.294, 48.858]),
      zoom: 17
    })
  });
}

La couche affichée sera la couche ORTHOIMAGERY.ORTHOPHOTOS et sera centrée sur les coordonnées 2.294, 48.858.

Pour géolocaliser l’utilisateur, on utilise la classe OpenLayers ol.Geolocation.

Il faut également ajouter une fonction  ”.on(‘change’, function(evt){})” pour détecter les changements de l’élément de géolocalisation et appliquer le nouveau centrage à la carte.

Le code suivant permet de géolocaliser l’utilisateur :

var geolocation = new ol.Geolocation({
    tracking: true
});

geolocation.on('change', function(evt) {
    map.getView().setCenter(ol.proj.fromLonLat(geolocation.getPosition())) ;
})

Mise en oeuvre

Avec le SDK

Principe

La fonction principale permettant d’afficher une carte avec une couche est GP.Map.load().

L’attribut center permet de définir le centre de la carte au départ. Mettre geolocate : true permet de centrer la carte sur votre position actuelle. Plus d’informations ICI.

Le code suivant vous permettra ainsi d’afficher une carte avec une couche WMTS (ici les photographies aériennes) dans la section “map” du code HTML :

var map = Gp.Map.load(
    "map",   // identifiant du conteneur HTML
    // options d'affichage de la carte (Gp.MapOptions)
    {   
        // centrage de la carte
        center : {
            geolocate : true
        },
        // niveau de zoom de la carte (de 1 à 21)
        zoom : 17,
        // Couches à afficher
        layersOptions : {
             "ORTHOIMAGERY.ORTHOPHOTOS" : {}
        }
}) ;

La couche affichée sera la couche ORTHOIMAGERY.ORTHOPHOTOS.

Mise en oeuvre

Avec le SDK, le code est le suivant :