4
22 juil 2013

Depuis le passage à la v3 du Géoportail, le mode d'appel à l'API et l'ajout des couches raster tuilées (WMTS) ont pas mal changé. Ayant développé un SIG web en utilisant les fonds de carte et d'orthos de l'IGN, il y a eu plusieurs changements à effectuer avant de pouvoir récupérer les fonds de carte. Voila donc un tutoriel qui vous présente comment créer une carte simple avec OpenLayers et les sources d'images du Géoportail.

Article invité écrit par Gabriel Vatin

Premier grand changement de l'utilisation de l'API : si vous avez simplement besoin des services WMTS du Géoportail, vous n'avez plus besoin de charger une quelconque librairie Javascript de l'IGN. L'appel suivant n'est donc plus nécessaire dans vos fichiers HTML :

Deuxième modification, très important à prendre en compte : la clé d'accès aux services de l'IGN. Dorénavant, deux clés doivent être créées afin de pouvoir développer son application web cartographique. Une clé "développement" qui fonctionnera pour des requêtes depuis http://localhost, et une clé "production" qui fonctionnera sur votre serveur distant, identifié par son IP ou son URL.

Afin d'obtenir une clé Dev, un compte gratuit doit être créé sur api.ign.fr. De son côté, la clé Prod s'obtient sur le site commercial de l'IGN professionnels.ign.fr, où un type de contrat (gratuit ou payant) doit être choisi.

Dès que vous avez votre clé de développement, vous pouvez commencer à développer votre carte. Partons donc de la base avec une carte simple OpenLayers.

var map = new OpenLayers.Map('map');

Maintenant, venons-en aux données du Géoportail. Avant la v3, il fallait définir plusieurs variables d'accès (GeoRMHandler) pour pouvoir utiliser nos jetons et accéder aux tuiles. La méthode a été largement simplifié : grâce à votre clé, vous avez directement l'URL de requête WMTS pour récupérer les tuiles. Il faut simplement créer le bon objet d'options pour ajouter ces couches. Mon conseil : créer une variable my_key qui correspondra à la valeur de votre clé, et que vous pourrez facilement utiliser / modifier (surtout pour le passage en développement). Par défaut, nous créons un objet d'options IGN pour la première couche, qui correspond à la cartographie.

var my_key =  "123456789abcdef"; // clé de développement du site api.ign.fr
var ign_options = {
  name: "IGN - cartes",
  url: "http://gpp3-wxs.ign.fr/" + my_key + "/wmts",
  layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS", // couche disponible sur mon contrat APi Géoportail
  matrixSet: "PM",
  style: "normal",
  numZoomLevels: 19,
  group : "IGN",
  attribution: '©IGN  Terms of Service'
};

Cet objet ayant été défini, je peux maintenant définir et ajouter cette couche WMTS à ma carte. L'ajout de la seconde couche demande de modifier quelques paramètres (le nom, le nombre de zooms disponibles).

var ign_scans = new OpenLayers.Layer.WMTS(ign_options);

// Changement des options nécessaires pour la couche ortho
ign_options.name = "IGN - vue aérienne";
ign_options.layer = "ORTHOIMAGERY.ORTHOPHOTOS";
ign_options.numZoomLevels = 20;
var ign_orthos = new OpenLayers.Layer.WMTS(ign_options);

// Ajout des deux couches définies
map.addLayers([ign_scans, ign_orthos]);

Le reste, c'est du détail : on centre, on zoome ! Attention : n'oubliez pas que la carte est en 3857... Au final, voici le tout assemblé dans mon fichier HTML.

    var projGeop = new OpenLayers.Projection('EPSG:3857');
    var WGS84 = new OpenLayers.Projection('EPSG:4326');

    var map = new OpenLayers.Map('map', {projection: projGeop});
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var my_key =  "123456789abcdef"; // clé de développement du site api.ign.fr
    var ign_options = {
      name: "IGN - cartes",
      url: "http://gpp3-wxs.ign.fr/" + my_key + "/wmts",
      layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS", // couche disponible sur mon contrat APi Géoportail
      matrixSet: "PM",
      style: "normal",
      numZoomLevels: 19,
      group : 'IGN',
      attribution: '©IGN  Terms of Service'
    };

    var ign_scans = new OpenLayers.Layer.WMTS(ign_options);

    //Changement des options nécessaires pour l'ortho
    ign_options.name = "IGN - vue aérienne";
    ign_options.layer = "ORTHOIMAGERY.ORTHOPHOTOS";
    ign_options.numZoomLevels = 20;
    var ign_orthos = new OpenLayers.Layer.WMTS(ign_options);

    map.addLayers([ign_scans, ign_orthos]);

    var center = new OpenLayers.LonLat(7.267, 43.700).transform(WGS84, projGeop); // coordonnées de Nice en Mercator
    map.setCenter(center, 11);
  

Lors de la publication de votre carte sur votre serveur, n'oubliez pas de changer la valeur de la clé pour celle de votre contrat "Production".

A propos de l'auteur: 
invite

Commentaires

Bonjour,
Ne pas oublié de mettre un control OpenLayers.Control.Attribution dans la carte pour respecter les conditions d'utilisations.
C'est ce control qui affichera le contenu du attribution déclaré dans les options des 2 couches IGN.

Bonjour,

Vous avez tout à fait raison !

Merci de nous l'avoir signalé.

Arnaud

Bonjour

J'ai des connaissances en HMTL-CSS, et javascript, j'essaye de faire un site avec une carte basique (contenant quelques bricoles "zoom, couches shp"), suis-je obligé de prendre les cartes de l'IGN ?, y a t'il pas d'autres sources libres ?

Pour la syntaxe Openlayers (les fonctions) y a t'il un tutoriel pour mieux comprendre ?

Je vous remercie d'avance

Walid

Bonjour,

Vous n'êtes obligé de prendre les cartes IGN uniquement si vous travaillez sur l'emprise française mais surtout si vous avez un réel besoin des fonds IGN dans votre application. Sinon, un bon leaflet avec des fonds OpenStreetMap est en général suffisant.

Pour la syntaxe OpenLayers, je laisse mes collègues répondre, ils sauront vous renseigner mieux que moi.