Des souris et des cartes

Accueil > Lab > Géoportail > Géoportail & OL3

4 votes

Géoportail & OL3

dimanche 20 avril 2014, par Spip

Maintenant, regardons comment intégrer les jolies cartes IGN avec l’API OL3.

La dernière version majeure de la célèbre API OpenLayers intègre les dernières avancées du web HTML5 et CSS3, WebGL, etc. pour assurer des performances accrues. Voyons comment intégrer les couches du Géoportail avec cette bibliothèque.

- Comme d’habitude, on charge la bibliothèque sur votre page en incluant le fichier fichier de style (CSS) et le code javascript (JS) :

<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" />
<script type="text/javascript" src="http://ol3js.org/en/master/build/ol.js"></script>

- Puis ajoutons la div pour la carte :

<div id="map" style="width:100%; height:400px;"></div>

- Vient le moment délicat de déclarer une couche. Pour cela, nous nous baserons sur une couche WMTS (voir l’exemple sur OL3), cela nous facilitera la tâche :

ol.source.Geoportail = function(key, layer, options)
{  if (!options) options={};
   var matrixIds = new Array();
   var resolutions = new Array();
   var size = ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()) /256;
   for (var z=0; z <= (options.maxZoom ? options.maxZoom:18) ; z++)
   {  matrixIds[z] = z ;
      resolutions[z] = size / Math.pow(2, z)
   }
   var attr = [ ol.source.Geoportail.prototype.attribution ];
   if (options.attributions) attr.push(options.attributions);
   ol.source.WMTS.call (this,
   {  url: "http://wxs.ign.fr/" + key + "/wmts",
      layer: layer,
      matrixSet: "PM",
      format: options.format ? options.format:"image/jpeg",
      projection: "EPSG:3857",
      tileGrid: new ol.tilegrid.WMTS
      ({ origin: [-20037508, 20037508],
         resolutions: resolutions,
         matrixIds: matrixIds
      }),
      style: options.style ? options.style:"normal",
      attributions: attr
   }); 
};
ol.inherits (ol.source.Geoportail, ol.source.WMTS);
// Attribution standard
ol.source.Geoportail.prototype.attribution = new ol.Attribution
({  html: '<a href="http://www.geoportail.gouv.fr/">Géoportail</a>'
    +'&copy; <a href="http://www.ign.fr/">IGN-France</a>'
});

Si cette fonction semble un peu compliquée au premier abord, puisqu’il faut déclarer les résolutions des tuiles, cela va nous permettre de créer facilement une couche Géoportail de cette façon :

new ol.layer.Tile( { source: new ol.source.Geoportail(apiKey, "GEOGRAPHICALGRIDSYSTEMS.MAPS") } );

- Il ne nous reste donc plus qu’à déclarer une carte. On en profite pour ajouter un bouton pour avoir un affichage plein écran (fullscreen), c’est top non ?

var map = new ol.Map
({ target: 'map',
   renderer: ["canvas"],  /* ["webgl", "canvas", "dom"] */
   view: new ol.View
   ({ zoom: 7,
      center: [288074, 6247982]
   }),
   controls: ol.control.defaults().extend
   ([ new ol.control.FullScreen()
   ]),
   layers: [new ol.layer.Tile(
   { source: new ol.source.Geoportail(apiKey, "GEOGRAPHICALGRIDSYSTEMS.MAPS")
   })]
});

Admirez le résultat ! En maintenant appuyé Ctrl+Shft, on peut faire tourner la carte !

Affichage du Géoportail avec OL3

En savoir plus...

Fork me ! sur Github

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?