IT:OpenLayers osm file example
Jump to navigation
Jump to search
File .OSM in overlay sulla mappa
OpenLayers supporta i files nel formato OpensStreetMap .osm e convertirà automaticamente il file in un layer vettoriale.
Il risultato è visualizzabile qua
Il file html
Per eseguire l"esempio sotto riportato:
- Copiare il testo del codice in un nuovo file, salvarlo come html con un nome a piacere (display-osm.html ad esempio) .
- Modificare le coordinate in modo da visualizazre una località a vostro piacere.
- Creare un nuovo file in formato .OSM chiamato "myosmfile.osm" usando, ad esempio, JOSM per scaricare un po' di dati dalla zona prescelta.
- Caricare i due files in una stessa directory in un webserver (Sembra che questo sia necessario per caricare il file .osm).
- Se non funziona, provare a rinominare il file "myosmfile.osm" in "myosmfile.txt" modificandi di conseguenza il nome del file all' interno del codice:
url: "myosmfile.osm", //<-- relative or absolute URL to your .osm file
Per qualche strana ragione, questo è necessario in alcuni webserver.
<html>
<head>
<title></title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var lat=51.950;
var lon=7.613;
var zoom=13;
var map;
function init(){
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
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")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
map.setCenter (lonLat, zoom);
//Initialise the vector layer using OpenLayers.Format.OSM
var layer = new OpenLayers.Layer.Vector("Polygon", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "myosmfile.osm", //<-- relative or absolute URL to your .osm file
format: new OpenLayers.Format.OSM()
}),
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayers([layer]);
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</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 Google Bing layers - Aggiungere Google Maps, Bing Maps e Yahoo Maps alla mappa.
- IT:OpenLayers Hillshade e Hiking Map - Aggiungere i layers hillshade e Lonvia alla mappa.
- IT:OpenLayers Foto - Visualizzare le proprie foto sulla 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