IT:OpenLayers osm file example

From OpenStreetMap Wiki
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