IT:OpenLayers Hillshade e Hiking Map
Jump to navigation
Jump to search
It has been proposed that this page be deleted or replaced by a redirect.
See the discussion page for further information.
The given reason is: his page contains an example with the outdated (for years) OpenLayers version 2. There are plenty of tutorials elsewhere. Nobody has bothered to update this page. Using Leaflet for simple maps is easier than OpenLayers. I don't see the use of keeping this page. Therefore, I propose its deletion. --Nakaner (talk) 09:32, 31 March 2026 (UTC).
See the discussion page for further information.The given reason is: his page contains an example with the outdated (for years) OpenLayers version 2. There are plenty of tutorials elsewhere. Nobody has bothered to update this page. Using Leaflet for simple maps is easier than OpenLayers. I don't see the use of keeping this page. Therefore, I propose its deletion. --Nakaner (talk) 09:32, 31 March 2026 (UTC).
(Pages that link to this page.)
This page was last edited by Nakaner; 09:32, 10 April 2026 (UTC) (21 giorni fa).
)
This page was last edited by
Nakaner; 09:32, 10 April 2026 (UTC) (21 giorni fa).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 © <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 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.