tecnica:gps_cartografia_gis:openlayers_tips
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
tecnica:gps_cartografia_gis:openlayers_tips [2010/11/05 14:12] – niccolo | tecnica:gps_cartografia_gis:openlayers_tips [2011/09/22 16:30] – [Problema con Layer.Markers e pop-up] niccolo | ||
---|---|---|---|
Line 6: | Line 6: | ||
* [[http:// | * [[http:// | ||
* [[http:// | * [[http:// | ||
+ | |||
+ | ===== Layer supportati da OpenLayers ===== | ||
+ | |||
+ | ^ OSM | OpenStreetMap, | ||
+ | ^ Markers | ||
+ | ^ Text | Del tutto simile al '' | ||
+ | ^ GeoRSS | ||
+ | ^ Vector | ||
+ | ^ KML | Layer vettoriale. Supporta diverse strategie di caricamento, | ||
+ | ^ WFS | | | ||
+ | ^ TMS | | | ||
+ | |||
+ | Esempi: | ||
+ | |||
+ | <code javascript> | ||
+ | var layerMapnik = new OpenLayers.Layer.OSM.Mapnik(" | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | var markers = new OpenLayers.Layer.Markers(" | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | var pois = new OpenLayers.Layer.Text(" | ||
+ | location:" | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | var track_style = new OpenLayers.Style(); | ||
+ | track_style.strokeColor = "# | ||
+ | track_style.strokeWidth = 7; | ||
+ | track_style.strokeOpacity = 0.7; | ||
+ | var object_trk = new OpenLayers.Layer.GML(" | ||
+ | format: OpenLayers.Format.GPX, | ||
+ | style: track_style, | ||
+ | projection: map.displayProjection}); | ||
+ | map.addLayer(object_trk); | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | var gsat = new OpenLayers.Layer.Google( | ||
+ | " | ||
+ | </ | ||
+ | |||
+ | ===== Using Blue Marble imagery with OpenLayers ===== | ||
+ | |||
+ | ==== Raster datasets from NASA ==== | ||
+ | |||
+ | Several imagery sets exists from NASA, among them: | ||
+ | |||
+ | * **[[http:// | ||
+ | * **[[http:// | ||
+ | |||
+ | The original Blue Marble images came from **[[http:// | ||
+ | |||
+ | ==== Blue Marble WMS Server ==== | ||
+ | |||
+ | **[[http:// | ||
+ | |||
+ | OnEarth WMS server by NASA offers a standard WMS service plus a "Tiled WMS" (prerendered tiles). | ||
+ | |||
+ | * http:// | ||
+ | * http:// | ||
+ | |||
+ | ==== World Wind ==== | ||
+ | |||
+ | **[[http:// | ||
+ | |||
+ | **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 '' | ||
+ | |||
+ | ==== Blue Marble WMS Tiled Server ==== | ||
+ | |||
+ | * **[[http:// | ||
+ | |||
+ | This is an extension to the standard WMS protocol, the capabilities of such services are exposed at: | ||
+ | |||
+ | * [[http:// | ||
+ | |||
+ | Some of the tags announced by the service are: | ||
+ | |||
+ | ^ OnlineResource | ||
+ | ^ LatLonBoundingBox | ||
+ | ^ width, height | ||
+ | ^ format | ||
+ | ^ bbox | Tile coverage | ||
+ | ^ Name | ||
+ | ^ Title | | | ||
+ | ^ Abstract | ||
+ | |||
+ | ===== 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(" | ||
+ | projection: map.displayProjection | ||
+ | }); | ||
+ | friends.icon = new OpenLayers.Icon( | ||
+ | " | ||
+ | map.addLayer(friends); | ||
+ | ... | ||
+ | var tim = setInterval (" | ||
+ | } | ||
+ | |||
+ | function updateFriends() { | ||
+ | friends.clearMarkers(); | ||
+ | friends.clearFeatures(); | ||
+ | friends.loaded = false; | ||
+ | friends.loadRSS(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | The code **'' | ||
+ | |||
+ | <code php> | ||
+ | header(" | ||
+ | header(" | ||
+ | header(" | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | ==== 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(" | ||
+ | strategies: [new OpenLayers.Strategy.BBOX()], | ||
+ | projection: map.displayProjection, | ||
+ | protocol: new OpenLayers.Protocol.HTTP({ | ||
+ | url: " | ||
+ | format: new OpenLayers.Format.GML() | ||
+ | }), | ||
+ | }); | ||
+ | map.addLayer(friends); | ||
+ | ... | ||
+ | var tim = setInterval (" | ||
+ | } | ||
+ | |||
+ | function updateFriends() { | ||
+ | var now = new Date().valueOf(); | ||
+ | var bbox = map.getExtent().toBBOX(); | ||
+ | friends.setUrl(" | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | The **'' | ||
+ | |||
+ | < | ||
+ | friends-gml.php | ||
+ | </ | ||
+ | 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? | ||
+ | </ | ||
+ | Immediately after the layer creation, a new call is triggered by the BBOX strategy. This time the **bbox** parameter is automatically appended to the **'' | ||
+ | |||
+ | < | ||
+ | friends-gml.php? | ||
+ | </ | ||
+ | Every timer interval, the layer is refreshed. Reading new data is forced by setting a new and unique **'' | ||
+ | |||
+ | ==== 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(" | ||
+ | location:" | ||
+ | projection: map.displayProjection}); | ||
+ | map.addLayer(friends); | ||
+ | ... | ||
+ | var tim = setInterval (" | ||
+ | } | ||
+ | |||
+ | function updateFriends() { | ||
+ | // Remove markers and features. | ||
+ | friends.clearMarkers(); | ||
+ | friends.clearFeatures(); | ||
+ | // Pretend the layers is not yet loaded. | ||
+ | friends.loaded = false; | ||
+ | friends.location = " | ||
+ | friends.loadText(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | The text returned by **'' | ||
+ | |||
+ | This recipe can be improved by adding a '' | ||
===== Overview mappa ===== | ===== Overview mappa ===== | ||
Line 24: | Line 235: | ||
il **rettangolo che evidenzia l' | il **rettangolo che evidenzia l' | ||
+ | ===== Sistemi di riferimento extra ===== | ||
+ | |||
+ | OpenLayers supporta alcuni sistemi di riferimento, | ||
+ | |||
+ | * EPSG:900913 | ||
+ | * EPSG:4326 | ||
+ | |||
+ | Per supportare altri sistemi di riferimento è possibile utilizzare la **[[http:// | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | |||
+ | In teoria OpenLayers dovrebbe scoprire automaticamente che è disponibile la libreria proj4js, senza bisogno di includere lo script. ma non è chiaro come. | ||
+ | |||
+ | Sistemi di riferimento aggiuntivi vengono definiti con la stessa sintassi di PROJ.4, aggiungendo dei file nella directory **'' | ||
+ | |||
+ | Ecco ad esempio il file **'' | ||
+ | |||
+ | <code javascript> | ||
+ | Proj4js.defs[" | ||
+ | +proj=tmerc +lat_0=0 +lon_0=9 +k=0.999600 +x_0=1500000 +y_0=0 \ | ||
+ | +ellps=intl +units=m +no_defs"; | ||
+ | </ | ||
+ | |||
+ | Dopo aver incluso il JavaScript di cui sopra, diventa possibile fare operazioni del tipo: | ||
+ | |||
+ | <code javascript> | ||
+ | var lonLat = new OpenLayers.LonLat(1554000, | ||
+ | alert(" | ||
+ | lonLat.transform(new OpenLayers.Projection(' | ||
+ | alert(" | ||
+ | </ | ||
+ | |||
+ | :!: **ATTENZIONE!** Se non si aggiunge manualmente la definizione del sistema di riferimento (inline nel codice o tramite un file in **'' | ||
+ | |||
+ | ===== i18n ===== | ||
+ | |||
+ | OpenLayers offre supporto per la internazionalizzazione (i18n) delle applicazioni tramite la classe **[[http:// | ||
+ | |||
+ | Ecco un esempio di come usarla: | ||
+ | |||
+ | <code javascript> | ||
+ | OpenLayers.Lang.it = { | ||
+ | ' | ||
+ | ' | ||
+ | }; | ||
+ | |||
+ | OpenLayers.Lang.setCode(' | ||
+ | alert(OpenLayers.i18n(' | ||
+ | </ | ||
+ | |||
+ | ===== Click destro ===== | ||
+ | |||
+ | Per gestire il click destro sulla mappa bisogna anzitutto disabilitare il //context menu// che presenta il browser al click destro. Ci sono due metodi. | ||
+ | |||
+ | Con questa istruzione si disabilita il context menu nel <div> della mappa: | ||
+ | |||
+ | <code javascript> | ||
+ | map.div.oncontextmenu = function noContextMenu(e) {return false;}; | ||
+ | </ | ||
+ | |||
+ | In alternativa si fa in modo che il '' | ||
+ | |||
+ | <code javascript> | ||
+ | map = new OpenLayers.Map(" | ||
+ | controls: [ | ||
+ | new OpenLayers.Control.Navigation({handleRightClicks: | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | |||
+ | Infine si registra la funzione handler per l' | ||
+ | |||
+ | Per vedere gli eventi supportati dalla mappa basta vedere la proprietà **'' | ||
+ | |||
+ | <code javascript> | ||
+ | function mousedown_handler(e) { | ||
+ | if (OpenLayers.Event.isRightClick(e)) { | ||
+ | alert(" | ||
+ | OpenLayers.Event.stop(e); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | map.events.register(' | ||
+ | map.events.register(' | ||
+ | </ | ||
+ | |||
+ | ===== Problema con Layer.Markers e pop-up ===== | ||
+ | |||
+ | Se si disegna un layer di tipo **'' | ||
+ | |||
+ | È possibile anche usare il metodo **'' | ||
+ | |||
+ | <code javascript> | ||
+ | map.addLayer(vectorLayer); | ||
+ | map.raiseLayer(vectorLayer, | ||
+ | </ | ||
+ | |||
+ | Si decrementa di 2 per tenere in conto il layer stesso e un solo baselayer, di 3 se i baselayer sono due, ecc. |
tecnica/gps_cartografia_gis/openlayers_tips.txt · Last modified: 2013/03/18 16:25 by niccolo