Hillshade e Hiking Map

Questo esempio mostra come aggiungere in trasparenza alla mappa un layer hillshade e la mappa dei sentieri Lonvia Hiking map .

Tra i layers disponibili è inoltre aggiunto il layer Hike&Bike Map.

Nel codice, la funzione "osm_getTileURL" definita come;

 function osm_getTileURL(bounds) {
        var res = this.map.getResolution();
        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
        var z = this.map.getZoom();
        var limit = Math.pow(2, z);

        if (y < 0 || y >= limit) {
          return OpenLayers.Util.getImagesLocation() + "404.png";
        } else {
          x = ((x % limit) + limit) % limit;
          return this.url + z + "/" + x + "/" + y + "." + this.type;
        }
      }

viene richiamata dai layer "lonvia" , "hill" e " "hikebike" e fornisce il numero tile da visualizzare (x,y e livello di zoom).

Il file HTML

Copiare il codice in un file di testo, salvarlo come HTML ed aprirlo con un browser.

Il risultato è visualizzabile qua

<html>
<head>
<title>layer OSM, Hillshade, HikeBike Map, Lonvia hiking map</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")
            } );
 
			// OSM layers
			var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");		
			var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			
			// Hillshading layer
			var hill = new OpenLayers.Layer.TMS( "Hillshading", "http://toolserver.org/~cmarqu/hill/",
            { type: 'png', getURL: osm_getTileURL, displayOutsideMaxExtent: true, attribution: '<a href="http://nasa.gov/">NASA SRTM</a>',
              opacity: 1, isBaseLayer: false, visibility: true, numZoomLevels: 17, transparent: true, noOpaq: true } );
			
			// Lonvia layer
			var lonvia = new OpenLayers.Layer.TMS("Carta dei sentieri", "http://osm.lonvia.de/hiking/",
            { type: 'png', getURL: osm_getTileURL, displayOutsideMaxExtent: true, attribution: 'Map data &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
              opacity: 1, isBaseLayer: false, visibility: false, numZoomLevels: 17, transparent: true, noOpaq: true } );
			

                       // Hike and Bike map
			
			var hikebike = new OpenLayers.Layer.TMS(
                    "Hike & Bike Map",
	             "http://toolserver.org/tiles/hikebike/",
                    {type: 'png', getURL: osm_getTileURL,
                            displayOutsideMaxExtent: true, isBaseLayer: true,
                            attribution: 'Map Data from <a href="http://www.openstreetmap.org/">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-by-SA 2.0</a>)'
                        }
                    );	
		

                 map.addLayers([ mapnik,cyclemap,hikebike,hill,lonvia ] );
 
		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); 
 }
 
 function osm_getTileURL(bounds) {
        var res = this.map.getResolution();
        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
        var z = this.map.getZoom();
        var limit = Math.pow(2, z);

        if (y < 0 || y >= limit) {
          return OpenLayers.Util.getImagesLocation() + "404.png";
        } else {
          x = ((x % limit) + limit) % limit;
          return this.url + z + "/" + x + "/" + y + "." + this.type;
        }
      }
 
</script>
</head>
 
<body onload="init();">
 <span style="font-family: Arial; font-weight: bold;">OSM Mapnik, Osmarender, CycleMap, Hillshade e Hiking Map</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

Vedi anche

IT:OpenLayers
IT:OpenLayers Simple Example - Semplici esempi di layers OSM
IT:OpenLayers Marker Example - Aggiungere un semplice marker
IT:Openlayers POI layer example - Aggiungere alcuni POI marker in overlay alla mappa.
IT:Openlayers Track example - Visualizzare un file traccia .gpx in overlay sulla mappa
IT:OpenLayers osm file example - Visualizzare un file .osm in overlay
IT:OpenLayers Google Bing layers - Aggiungere Google Maps, Bing Maps e Yahoo Maps alla mappa.
IT:OpenLayers Local Tiles e Maperitive - Visualizzare sulla mappa le tiles generate con Maperitive.
IT:OpenLayers Local Tiles Example - Visualizza le tiles di OpenStreetMap in locale

IT:OpenLayers Hillshade e Hiking Map

Hillshade e Hiking Map

Il file HTML

Vedi anche

Navigation menu

IT:OpenLayers Hillshade e Hiking Map

Hillshade e Hiking Map

Il file HTML

Vedi anche

Navigation menu

Search