IT:OpenLayers Local Tiles e Maperitive

From OpenStreetMap Wiki
Jump to navigation Jump to search

Aggiungere un Tile Layer alla mappa utilizzando Maperitive

Questa guida mostra come creare un proprio rendering della mappa OpenStreetMap utilizzando Maperitive e come visualizzare il risultato in una pagina web.

Maperitive è una applicazione che consente di eseguire un rendering personalizzato dei dati OSM intervenendo sui fogli di stile che definiscono come i diversi "oggetti" della mappa debbano venire mostrati.

Maperitive è in grado di generare le "tiles" della mappa secondo le caratteristiche da noi richieste, aggiungendo alla mappa l' hillshading, la colorazione in base all' elevazione e le curve di livello,

Un esempio può essere visualizzato qua

Maperitive

Maperitive è un programma che esprime al meglio le sue potenzialità attarverso l' immissione delle istruzioni da linea di comando o meglio ancora attraverso l' esecuzione di script.

E' per questo indispensabile fare riferimento alla documentazione del programma

Maperitive di default apre nella sua interfaccia grafica la mappa OSM, ma per eseguire un rendering dobbiamo caricare un file .osm con i dati della zona che ci interessa.

Questo può essere fatto in diversi modi, utliizzando la funzione "Esporta" di OpenStreetMap, JOSM o altri programmi come spiegato qua.

Salvato questo file , che chiameremo dati.osm, in una directory chiamata "maps" creata come sottocartella di Maperitive, possiamo visualizzare questo file richiamandolo da riga di comando:

load-source maps/dati.osm

Possiamo aggiungere alla visualizzazione, utilizzando i Tools del programma, curve di livello e hillshading.

Dopo avere specificato il limiti della mappa da renderizzare (Map- Set Bounds), possiamo generare le tiles , sia utilizzando il Tools dell' interfaccia grafica, sia da riga di comando:

generate-tiles minzoom=5 maxzoom=15

ad esempio, genera le tiles dal livello di zoom 5 al livello 15.

Poichè ogni livello di zoom necessita di circa il quadruplo di tiles del livello precedente, è necessario prestare attenzione poichè si raggiungono rapidamente enormi quantità di tiles da generare con conseguente impego di tempo e di spazio su disco.

Ad esempio, se la mappa che visualizzamo occupa lo schermo del computer a livello di zoom 10, sarà composta da circa 15 tiles, che diventano 60 al livello di zoom 11, 240 al livello 12, 960 al livello 13...... 245,760 tiles al livello 17 (circa 80 minuti di lavoro, 10 GB di spazio su disco). Questi dati indicativi, ricavati dal manuale del programma, danno un' idea del problema.

Possiamo vedere che Mapertive avrà creato nella cartella "Tiles" diverse sottodirectory nominate con il numero del livello di zoom contenuto, cartella che andrà eventualmente trasferita nel webserver.

ll file html

Il codice nell' esempio che segue crea un nuovo layer chiamato maperitive che visualizza le tiles generate, in alternativa lo script mostra i layers Mapnik, Osmarender e Cyclemap di OSM.

Copiare il codice in un nuovo file, salvarlo come html nel webserver o in locale, in una posizione con la cartella "Tiles" come sottodirectory.


<html>
<head>
<title>layer OSM </title>
 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
 
// Posizione iniziale della mappa
    var lat=44.355;
    var lon=11.71;
    var zoom=13;

    function init() {
 
        map = new OpenLayers.Map ("map", {
            controls:[ 
			new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanZoomBar(),
                       new OpenLayers.Control.ScaleLine(),
                       new OpenLayers.Control.Permalink('permalink'),
                       new OpenLayers.Control.MousePosition(),                    
                       new OpenLayers.Control.Attribution()
				      ],
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
	var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");		
	var tilesathome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");			
	var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
 	
	// layer tiles generati da Maperitive
	var maperitive = new OpenLayers.Layer.OSM("Maperitive", "http://www.iskre.org/osm/valsanterno/Tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true});
            
        map.addLayers([ maperitive, mapnik, tilesathome, cyclemap ] );
 
	map.addControl(new OpenLayers.Control.LayerSwitcher());
 
        var lonLat = new OpenLayers.LonLat( lon ,lat )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
		map.setCenter (lonLat, zoom); 
 }
 
</script>
</head>
 
<body onload="init();">
 <span style="font-family: Arial; font-weight: bold;">OSM Mapnik, Osmarender, CycleMap e tiles generate con Maperitive</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

Altri modi per ottenere tiles in locale

Mapnik è l'applicazione che genera la mappa principale di oSM e può essere installato in locale.

MapTiler è una applicazione molto utile per generare tiles compatibili con Openlayers a partire da mappe georeferenziate in diversi formati.

OSMtiledownloader e JTileDownloader salvano in locale le tiles OpenStreetMap.

Vedi anche