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 [2010/10/08 22:37] – niccolo | tecnica:gps_cartografia_gis:openlayers_900913 [2010/11/05 14: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 | + | |
- | ^ Vector | + | |
- | ^ 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 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 | + | |
+ | Questo trucco funziona sul sito di OpenStreetMap, |
tecnica/gps_cartografia_gis/openlayers_900913.txt · Last modified: 2010/11/05 14:47 by niccolo