tecnica:gps_cartografia_gis:openlayers_900913
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
tecnica:gps_cartografia_gis:openlayers_900913 [2009/06/19 11:17] – niccolo | tecnica:gps_cartografia_gis:openlayers_900913 [2010/11/05 13:47] (current) – niccolo | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== OpenStreetMap |
Le mappe di **[[http:// | Le mappe di **[[http:// | ||
Line 12: | Line 12: | ||
Vedere la FAQ a proposito di **[[http:// | Vedere la FAQ a proposito di **[[http:// | ||
- | ===== 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 | + | OpenLayers supporta attualmente le mappe OpenStreetMap tramite |
- | [[http:// | + | Esiste la possibilità di caricare una piccola libreria JavaScript che estende l' |
- | Questo trucco funziona sul sito di OpenStreetMap, | + | Il codice JavaScript è disponibile al seguente indirizzo: [[http://www.openstreetmap.org/openlayers/ |
- | ===== Layer supportati da OpenLayers | + | Alcuni esempi basici si trovano qui: **[[http:// |
- | **[[http:// | + | Ecco ad esempio |
- | + | ||
- | ^ OSM | OpenStreetMap, | + | |
- | ^ Markers | + | |
- | ^ Text | Del tutto simile al '' | + | |
- | ^ GeoRSS | + | |
- | ^ 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 | + | |
- | ^ WFS | | | + | |
- | ^ TMS | | | + | |
- | + | ||
- | Esempi: | + | |
<code javascript> | <code javascript> | ||
- | var layerMapnik | + | // Define the map object. |
- | </ | + | map = new OpenLayers.Map(' |
+ | maxExtent: new OpenLayers.Bounds(-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: ' | ||
+ | projection: new OpenLayers.Projection(" | ||
+ | | ||
+ | }); | ||
- | <code javascript> | + | // Add OpenStreetMap Mapnik layer. |
- | var markers | + | var layerMapnik |
+ | layerMapnik.transitionEffect = " | ||
+ | layerMapnik.isBaseLayer = true; | ||
+ | map.addLayer(layerMapnik); | ||
</ | </ | ||
- | <code javascript> | + | ===== Mostrare un mark sulla mappa OSM ===== |
- | var pois = new OpenLayers.Layer.Text(" | + | |
- | location:" | + | |
- | </ | + | |
- | <code 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 '' |
- | 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> | + | [[http://www.openstreetmap.org/?mlat=43.8200&mlon=11.13311& |
- | var gsat = new OpenLayers.Layer.Google( | + | |
- | " | + | |
- | </ | + | |
- | + | ||
- | ===== 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() { | + | |
- | ... | + | |
- | | + | |
- | friends = new OpenLayers.Layer.GeoRSS(" | + | |
- | projection: map.displayProjection | + | |
- | }); | + | |
- | friends.icon = new OpenLayers.Icon( | + | |
- | "icons/tangogps-friend.png" | + | |
- | 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 | + | |
- | friends.loaded | + | |
- | friends.location = " | + | |
- | friends.loadText(); | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | The text returned by **'' | + | |
- | + | ||
- | This recipe can be improved by adding a '' | + | |
- | + | ||
- | ===== 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 ==== | + | |
- | + | ||
- | **[[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 '' | + | |
- | + | ||
- | ==== WMS Tiled ==== | + | |
- | + | ||
- | * **[[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 | + | |
+ | Questo trucco funziona sul sito di OpenStreetMap, |
tecnica/gps_cartografia_gis/openlayers_900913.txt · Last modified: 2010/11/05 13:47 by niccolo