tecnica:gps_cartografia_gis:openlayers_900913
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
tecnica:gps_cartografia_gis:openlayers_900913 [2009/01/31 23:29] – external edit 127.0.0.1 | 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 | + | |
- | ^ 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:// |
- | var gsat = new OpenLayers.Layer.Google( | + | |
- | " | + | |
- | </code> | + | |
- | ===== Dynamic layer update ===== | + | Questo trucco funziona sul sito di OpenStreetMap, purtroppo |
- | + | ||
- | 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() { | + | |
- | ... | + | |
- | | + | |
- | friends = new OpenLayers.Layer.Text(" | + | |
- | location:" | + | |
- | projection: map.displayProjection}); | + | |
- | map.addLayer(friends); | + | |
- | ... | + | |
- | var tim = setInterval (" | + | |
- | } | + | |
- | + | ||
- | function updateFriends() { | + | |
- | | + | |
- | 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 '' | + |
tecnica/gps_cartografia_gis/openlayers_900913.1233440946.txt.gz · Last modified: 2009/06/19 13:14 (external edit)