IT:OpenLayers Local Tiles Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

Visualizza le tiles di OpenStreetMap in locale

Questo esempio mostra come visualizzare le tiles della mappa memorizzate in locale.

Io uso questo sistema per controllare le tiles scaricate per essere usate in Osmtracker, ma può servire per visualizzare le tiles renderizzate con qualsiasi altra tecnica.

Risultato

Nell' immagine si possono vedere due Layers: quello più chiaro mostre le tiles scaricate dal server OSM e quello più scuro le tiles salvate in locale. In questo modo è possibile controllare quali tiles sono già memorizzate nella directory locale e quali mancano.

OpenLayers Local Tiles Example.png

Setup

Preparare una directory locale

Creare una nuova directory, ad esempio: C:\OSM.

In questa cartella creare una subdirectory chiamata "tiles".

Copiare o scaricare le vostre tiles in queste directory, manualmente o usando uno dei seguenti tools:

  1. OSMtiledownloader
  2. JTileDownloader

Il file html

Copiare il testo seguente in un editore e salvarlo con il nome di local_tiles.html.


<html>
<head>
    <title>OSM Local Tiles</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- bring in the OpenLayers javascript library
         (here we bring it from the remote site, but you could
         easily serve up this javascript yourself) -->
   <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 
    <!-- bring in the OpenStreetMap OpenLayers layers.
         Using this hosted file will make sure we are kept up
         to date with any necessary changes -->
   <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
    <script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
        var lat=47.7;
        var lon=7.5;
        var zoom=10;
 
        var map; //complex object of type OpenLayers.Map
 
        //Initialise the 'map' object
        function init() {
 
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine({geodesic: true}),
                    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.0339,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            layerMapnik.setOpacity(0.4);
            map.addLayer(layerMapnik); 
 
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            layerCycleMap.setOpacity(0.4);
            map.addLayer(layerCycleMap);
 
            // This is the layer that uses the locally stored tiles
            var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: false});
            map.addLayer(newLayer);
			// This is the end of the layer
 
 	            var switcherControl = new OpenLayers.Control.LayerSwitcher();
	            map.addControl(switcherControl);
	            switcherControl.maximizeControl();
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
        }
 
    </script>
</head>
 
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
 
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>
 
</body>
 
</html>

Quindi modificare la latitudine, la longitudine e lo zoom della zona da visualizzare.

Test

Aprire il file "local_tiles.htm" nel vostro broswer e controllare il risultato.

Si può cambiare il layer di base per controllare le differenti tiles.

Se manca qualche tile, cliccare con il pulsante destro del mouse nel browser ed aprire "visualizza informazioni immagine" da dove è possibile vedere quali tiles mancano.

In questo esempio la tile 527/350 del zoom level 10 è mancante. Open the local_tiles.htm in your browser and check the result. You can change the base layer to check the different tiles. I OpenLayers Local Tiles test.png

Information

All this information is based on the input from Bikeman2000 on http://forum.openstreetmap.org/viewtopic.php?id=7572. Thank you.

Vedi anche

Related