Tuilage des données OSM avec Leaflet

Carte d’occupation du sol (Landuse d’OSM)

osm landuse diouck

Principe du tuilage:

Le tuilage est le re-découpage d’un raster en petite images à des échelles prédéfinies pour être utilisé par des outils web.

Le tuilage va donc découper le raster sur plusieurs échelles (pyramidage) en autant de petites images (tuilage), dont le nom du dossier et celui de l’images sont les coordonnées x et y dans le système de projection mercator.

diouck pyramides

1/- Données: Pays de la Loire à télécharger depuis ce lien

2/- Analyse thématique uniquement sur la donnée « landuse »  avec Qgis et génération d’un fichier  au format png que vous pouvez télécharger  là :  OSM Landuse.

3/- Création de mosaïques d’images tuilées avec gdal2tiles.

Comme les autres outils de GDAL , il est assez facile à utiliser. Ci-dessous est un exemple de commande pour créer des tuiles de notre image.

gdal2tiles.py -z -v 7-13 "OSM Landuse.png" "OSM Landuse"

Pour faire simple nous allons créer une pyramide avec les niveaux de zoom allant de 7 à 13 dans le dossier OSM Landuse. La derniere version de gdal vous crée automatiquement un dossier pour chaque niveau de zoom.

4/- Intégration des tuile dans une application.

Je ne vais pas rentrer dans les détails de créations de cartes mais juste juste vous monter comment intégrer notre pyramide tuilée dans une application. Vous avez simplement à rajouter cette ligne:

var mytile =L.tileLayer(‘landuse/{z}/{x}/{y}.png’,{tms: ‘true’}).addTo(map);

La carte est accessible depuis ce lien

Leaflet: Rennes Metropole

Services tuilés Aigle avec les données de RennesMetropole : TMS & PVCI

Rennes Metropole : TMS &PVCI avec Leaflet

Rennes Metropole : TMS &PVCI avec Leaflet

Code source:

 

var geoRennesMetropolePlanOptions = { minZoom: 0, 
					maxZoom: res.length - 1, 
					//detectRetina: true, 
					continuousWorld: true, // if not set to true, will only load positive tiles 
					//tms: true, 
				attribution: 'Orthophotographie 2011 :  Référentiel voies et adresses : Rennes Métropole'
			  };	
				var geoRennesMetropolePlan = new L.TileLayer('http://geo.rennesmetropole.fr/tms/4564/PVCI/{z}/{x}/{y}.png', geoRennesMetropolePlanOptions);
					// alter getTileUrl because Y axis is inverted (TMS profile is locale)
					geoRennesMetropolePlan.getTileUrl = function (tilePoint, zoom) {
					console.log(tilePoint);
				var toRet;
					toRet = L.Util.template(this._url, L.Util.extend({
					"z":this._getZoomForUrl(),
					 x:tilePoint.x,
					 y:-tilePoint.y - 1
					}, this._urlParams));
					return toRet;
				}
				map.addLayer(geoRennesMetropolePlan);

				//var geoRennesMetropoleOrthoAttribution = 'Orthophotographie 2011 : E-mégalis et Collectivités Territoriales bretonnes, Référentiel voies et adresses : Rennes Métropole';
				var geoRennesMetropoleOrthoOptions = { minZoom: 0, 
					maxZoom: res.length - 1, 
					//detectRetina: true, 
					continuousWorld: true, // if not set to true, will only load positive tiles 
					//tms: true, 
				attribution: 'Orthophotographie 2011 :Référentiel voies et adresses : Rennes Métropole'
			  };
				var geoRennesMetropoleOrtho = new L.TileLayer('http://www.geo.rennesmetropole.fr/tms/4563/ORTHO2011/{z}/{x}/{y}.png', geoRennesMetropoleOrthoOptions);
					// alter getTileUrl because Y axis is inverted (TMS profile is locale)
					geoRennesMetropoleOrtho.getTileUrl = function (tilePoint, zoom) {
					console.log(tilePoint);
				var toRet;
					toRet = L.Util.template(this._url, L.Util.extend({
					"z":this._getZoomForUrl(),
					 x:tilePoint.x,
					 y:-tilePoint.y - 1
					}, this._urlParams));
					return toRet;
				}