User Tools

Site Tools


tecnica:gps_cartografia_gis:openlayers_900913

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
tecnica:gps_cartografia_gis:openlayers_900913 [2009/06/19 13:18] niccolotecnica:gps_cartografia_gis:openlayers_900913 [2010/11/05 14:47] (current) niccolo
Line 1: Line 1:
-====== OpenLayers with OpenStreetMap ======+====== OpenStreetMap con OpenLayers ======
  
 Le mappe di **[[http://www.openstreetmap.org|OpenStreetMap]]** (ma anche quelle di **[[http://maps.google.com/|Google Maps]]** e di **[[http://www.microsoft.com/VIRTUALEARTH/|Virtual Earth]]**) utilizzano una proiezione **[[http://crschmidt.net/~crschmidt/spherical_mercator.html|Spherical Mercator]]**. Tale proiezione ha codice **EPSG:900913**, che purtroppo non è compresa tra le proiezioni di PROJ. Le mappe di **[[http://www.openstreetmap.org|OpenStreetMap]]** (ma anche quelle di **[[http://maps.google.com/|Google Maps]]** e di **[[http://www.microsoft.com/VIRTUALEARTH/|Virtual Earth]]**) utilizzano una proiezione **[[http://crschmidt.net/~crschmidt/spherical_mercator.html|Spherical Mercator]]**. Tale proiezione ha codice **EPSG:900913**, che purtroppo non è compresa tra le proiezioni di PROJ.
Line 12: Line 12:
 Vedere la FAQ a proposito di **[[http://proj.maptools.org/faq.html#sphere_as_wgs84|PROJ.4 e Virtual Earth]]**. Vedere la FAQ a proposito di **[[http://proj.maptools.org/faq.html#sphere_as_wgs84|PROJ.4 e Virtual Earth]]**.
  
-===== Mostrare un mark sulla mappa OSM =====+===== Il codice JavaScript =====
  
-Fare zoom e pan quanto basta per mettere il punto desiderato al centro della mappa, quindi cliccare su **Permalink** in basso a destra. A questo punto basta modificare l'URL, sostituendo ''lat'' e ''lon'' rispettivamente con **''mlat''** e **''mlon''**. Un esempio:+OpenLayers supporta attualmente le mappe OpenStreetMap tramite l'oggetto **''OpenLayers.Layer.OSM()''** sebbene nella documentazione ufficiale (versione 2.10) questo non sia ancora documentato.
  
-[[http://www.openstreetmap.org/?mlat=43.8200&mlon=11.13311&zoom=16&layers=0B00FTF]]+Esiste la possibilità di caricare una piccola libreria JavaScript che estende l'oggetto **''OpenLayers.Layer.OSM()''** e permette di avere le sotto-classi **''Mapnik''**, **''Osmarender''** e **''CycleMap''**.
  
-Questo trucco funziona sul sito di OpenStreetMap, purtroppo non funziona su altri simili che usano sempre OpenLayers, ad esempio http://www.informationfreeway.org/.+Il codice JavaScript è disponibile al seguente indirizzo: [[http://www.openstreetmap.org/openlayers/OpenStreetMap.js]].
  
-===== Layer supportati da OpenLayers =====+Alcuni esempi basici si trovano qui: **[[http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example|OpenLayers Simple Example]]**.
  
-**[[http://dev.openlayers.org/docs/files/OpenLayers-js.html|OpenLayers documentation]]** +Ecco ad esempio un estratto di codice JavaScript:
- +
-^ OSM  | OpenStreetMap, l'uso di questo layer richiede il caricamento di **''OpenLayers.js''**. Gestisce le tile, il caricamento asincrono e la proiezione EPSG:900913. +
-^ Markers  | Visualizza delle icone, è possibile attivare un pop-up al click sull'icona. Ogni feature può avere un'icona diversa. I marker vengono aggiunti o rimossi da programma. +
-^ Text  | Del tutto simile al ''Marker'', ma carica le feature, i nomi delle icone e il contenuto del pop-up da un file di testo. Carica il layer una sola volta, per aggiornarne il contenuto bisogna svuotarlo e forzare la funzione **''loadText()''**. +
-^ GeoRSS  | Carica un elenco di features da un file XML, ogni feature viene mostrata con un simbolo eventualmente personalizzto con un uno stile. Lo stile può dipendere dagli attributi della singola feature, non può essere un'icona bitmap. Carica il file .xml una sola volta, per aggiornarne il contenuto bisogna svuotarlo e forzare la funzione **''loadRSSt()''**. +
-^ GML  | Carica una gemoetria da un file GML (XML geografico). La vestizione può essere fatta con uno stile, non si possono usare icone bitmap. Il file viene caricato con un protocollo specificato (es. HTTP) e con delle strategie specificate (ad esempio al variare della bounding box). La strategia **''BBOX''** fa uso di richieste XMLHttpRequest per caricare nuovi dati in modo asincrono, al cambiare della bounding box. Per forzare l'aggiornamento da programma si modifica l'URL di origine con **''setUrl()''** aggiungendo un parametro univoco (ad esempio un ''t=timestamp''), in tal modo si invalida la cache. +
-^ WFS  |  | +
-^ TMS  |  | +
- +
-Esempi:+
  
 <code javascript> <code javascript>
-var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)"); +// Define the map object. 
-</code>+map = new OpenLayers.Map('map',
 +    maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), 
 +    controls: [ 
 +        new OpenLayers.Control.Navigation(), 
 +        new OpenLayers.Control.PanZoomBar()
 +        new OpenLayers.Control.LayerSwitcher(), 
 +        new OpenLayers.Control.KeyboardDefaults(), 
 +        new OpenLayers.Control.Scale() 
 +    ], 
 +    scales: [500000, 200000, 100000, 50000, 25000, 10000, 5000], 
 +    units: 'm', 
 +    projection: new OpenLayers.Projection("EPSG:900913"), 
 +    displayProjection: new OpenLayers.Projection("EPSG:4326"
 +});
  
-<code javascript> +// Add OpenStreetMap Mapnik layer. 
-var markers = new OpenLayers.Layer.Markers("Markers");+var layerMapnik = new OpenLayers.Layer.OSM("OpenStreetMap"); 
 +layerMapnik.transitionEffect = "resize"; 
 +layerMapnik.isBaseLayer = true; 
 +map.addLayer(layerMapnik);
 </code> </code>
  
-<code javascript> +===== Mostrare un mark sulla mappa OSM =====
-var pois new OpenLayers.Layer.Text("My Points",+
-    location:"./textfile.txt", projection: map.displayProjection }); +
-</code>+
  
-<code javascript> +Fare zoom e pan quanto basta per mettere il punto desiderato al centro della mappaquindi cliccare su **Permalink** in basso a destraA questo punto basta modificare l'URLsostituendo ''lat'' e ''lon'' rispettivamente con **''mlat''** e **''mlon''**Un esempio:
-var track_style = new OpenLayers.Style(); +
-track_style.strokeColor = "#6636e1"; +
-track_style.strokeWidth = 7; +
-track_style.strokeOpacity = 0.7; +
-var object_trk = new OpenLayers.Layer.GML("GPX Track""track.gpx"+
-    format: OpenLayers.Format.GPX, +
-    styletrack_style, +
-    projection: map.displayProjection}); +
-map.addLayer(object_trk); +
-</code>+
  
-<code javascript> +[[http://www.openstreetmap.org/?mlat=43.8200&mlon=11.13311&zoom=16&layers=0B00FTF]]
-var gsat = new OpenLayers.Layer.Google( +
-    "Google Satellite", {typeG_SATELLITE_MAP, numZoomLevels: 20}); +
-</code> +
- +
-===== Dynamic layer update ===== +
- +
-We want to refresh the contents of a layer using a timer, every time we want to fetch new data from the server. +
- +
-==== OpenLayers.Layer.GeoRSS ==== +
- +
-This is an example of a **GeoRSS** layer, updated every 120 seconds. Every point is drawn with the same icon, a pop-up will appear when the icon is clicked. +
- +
-<code javascript> +
-var friends; +
- +
-function init() { +
-    ... +
-    // Add tangoGPS friends layer. +
-    friends = new OpenLayers.Layer.GeoRSS("Friends", "tangogps-friend.php",+
-        projection: map.displayProjection +
-    }); +
-    friends.icon = new OpenLayers.Icon( +
-        "icons/tangogps-friend.png"); +
-    map.addLayer(friends); +
-    ... +
-    var tim setInterval ("updateFriends()", 120000); +
-+
- +
-function updateFriends() { +
-    friends.clearMarkers(); +
-    friends.clearFeatures(); +
-    friends.loaded = false; +
-    friends.loadRSS(); +
-+
-</code> +
- +
-The code **''tangogps-friend.php''** should return GeoRSS formatted text (like **{{.openlayers:georss.xml|this example}}**), with proper expire and no cache headers: +
- +
-<code php> +
-header("Cache-Control: no-cache, must-revalidate"); +
-header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); +
-header("Content-Type: text/xml"); +
-... +
-</code> +
- +
-==== OpenLayers.Layer.GML ==== +
- +
-This is a more complex example, using a **GML** layer in GML format. The GML geometry is drawn with the default style. The layer is reloaded by a timer every 120 seconds. We use a BBOX strategy, so that the layer is reloaded also when the bounding box changes. Layer is loaded via HTTP protocol. +
- +
-<code javascript> +
-var friends; +
- +
-function init() { +
-    ... +
-    // Add tangoGPS friends layer. +
-    friends = new OpenLayers.Layer.GML("GML", "friends-gml.php",+
-        strategies: [new OpenLayers.Strategy.BBOX()], +
-        projection: map.displayProjection, +
-        protocol: new OpenLayers.Protocol.HTTP({ +
-            url: "friends-gml.php", +
-            format: new OpenLayers.Format.GML() +
-        }), +
-    }); +
-    map.addLayer(friends); +
-    ... +
-    var tim = setInterval ("updateFriends()", 120000); +
-+
- +
-function updateFriends() { +
-    var now = new Date().valueOf(); +
-    var bbox = map.getExtent().toBBOX(); +
-    friends.setUrl("friends-gml.php?bbox=" + bbox + "&time=" + now); +
-+
-</code> +
- +
-The **''friends-gml.php''** should return a valid GML file (like **{{.openlayers:gml.xml|this example}}**) and it should be non cacheable (using the same headers of GeoRSS layer above). The script will be called with the following arguments: +
- +
-<file> +
-friends-gml.php +
-</file> +
-The first call (without query parameters) is triggered by the second argument of the layer constructor. To optimize memory usage in the browser, the script **''friends-gml.php''** should honor the **''bbox''** request and return only the relevant features. Called without the parameter, it can return no features. +
- +
-<file> +
-friends-gml.php?bbox=-10.77,41.32,11.72,52.57 +
-</file> +
-Immediately after the layer creation, a new call is triggered by the BBOX strategy. This time the **bbox** parameter is automatically appended to the **''url''** declared with **''OpenLayers.Protocol.HTTP''**. A similar call is performed whenever a bounding box change event is detected. +
- +
-<file> +
-friends-gml.php?bbox=-15.15,44.13,16.12,49.75&time=1232668479793 +
-</file> +
-Every timer interval, the layer is refreshed. Reading new data is forced by setting a new and unique **''time''** parameter. In this case ''bbox'' is not automatically added (it was the timer which trigger the call, not the BBOX strategy), so we have to add it programmatically. +
- +
-==== OpenLayers.Layer.Text ==== +
- +
-This is a very versatile example: every point can be represented by a different icon, a pop-up appears when you click an icon. The disadvantage is that all the layer features are loaded at every timer interval, no bounding box limit is enforced. +
- +
-<code javascript> +
-var friends; +
- +
-function init() { +
-    ... +
-    // Add tangoGPS friends layer. +
-    friends = new OpenLayers.Layer.Text("Friends",+
-        location:"friends-text.php", +
-        projection: map.displayProjection}); +
-    map.addLayer(friends); +
-    ... +
-    var tim = setInterval ("updateFriends()", 120000); +
-+
- +
-function updateFriends() { +
-    // Remove markers and features. +
-    friends.clearMarkers(); +
-    friends.clearFeatures(); +
-    // Pretend the layers is not yet loaded. +
-    friends.loaded false; +
-    friends.location = "friends-text.php"; +
-    friends.loadText(); +
-+
-</code> +
- +
-The text returned by **''friends-text.php''** should be non cacheable as always and contains a tab separated text, like **{{.openlayers:layertext.txt|this example}}**. +
- +
-This recipe can be improved by adding a ''bbox'' parameter (calculated at runtime) to the location of the layer, and forcing a call to ''updateFriends()'' whenever the viewport of the map changes. +
- +
-===== Using Blue Marble imagery with OpenLayers ===== +
- +
-==== Raster datasets from NASA ==== +
- +
-Several imagery sets exists from NASA, among them: +
- +
-  * **[[http://earthobservatory.nasa.gov/Features/BlueMarble/|Blue Marble next generation]]** (1 pixel = 500x500 m) +
-  * **[[http://onearth.jpl.nasa.gov/|Land Sat 7]]** (1 pixel = 15x15 m) +
- +
-The original Blue Marble images came from **[[http://modis.gsfc.nasa.gov/|MODIS]]**, the spectroradiometer aboard of **[[http://terra.nasa.gov/|Terra]]** and **[[http://aqua.nasa.gov/|Aqua]]** satellites. //Blue Marble Next Generation// added more spatial resolution. +
- +
-==== Blue Marble WMS ==== +
- +
-**[[http://onearth.jpl.nasa.gov/]]** +
- +
-OnEarth WMS server by NASA offers a standard WMS service plus a "Tiled WMS" (prerendered tiles). +
- +
-  * http://onearth.jpl.nasa.gov/wms.cgi?request=GetCapabilities +
-  * http://onearth.jpl.nasa.gov/wms.cgi?request=GetTileService +
- +
-==== World Wind ==== +
- +
-**[[http://worldwind.arc.nasa.gov/index.html|NASA World Wind]]** +
- +
-**World Wind** is a software (open source but MS-Windows only) developed by NASA which allows to pan and zoom into several raster datasets offered by NASA servers. World Wind uses (among others) Blue Marble imagery. +
- +
-The same imagery server can be used by other software, e.g. OpenLayers via the ''OpenLayers.Layer.WorldWind()'' function. +
- +
-==== Blue Marble WMS Tiled Server ==== +
- +
-  * **[[http://onearth.jpl.nasa.gov/tiled.html|Tiled WMS]]** +
- +
-This is an extension to the standard WMS protocol, the capabilities of such services are exposed at: +
- +
-  * [[http://onearth.jpl.nasa.gov/wms.cgi?request=GetTileService]] +
- +
-Some of the tags announced by the service are: +
- +
-^ OnlineResource     | Server prefix (%%http://...%%)   | +
-^ LatLonBoundingBox  | Covered area    | +
-^ width, height      | Tile size       | +
-^ format             | Tile format ()  | +
-^ bbox               | Tile coverage   | +
-^ Name                               | +
-^ Title              |                 | +
-^ Abstract                           |+
  
 +Questo trucco funziona sul sito di OpenStreetMap, purtroppo non funziona su altri simili che usano sempre OpenLayers, ad esempio http://www.informationfreeway.org/.
tecnica/gps_cartografia_gis/openlayers_900913.1245410337.txt.gz · Last modified: 2009/06/19 13:18 by niccolo