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/11/05 14:21] – niccolo | tecnica:gps_cartografia_gis:openlayers_900913 [2010/11/05 14:47] (current) – niccolo | ||
---|---|---|---|
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/ |
+ | Alcuni esempi basici si trovano qui: **[[http:// | ||
- | + | Ecco ad esempio un estratto di codice JavaScript: | |
- | ===== 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> | <code javascript> | ||
- | var friends; | + | // Define the map object. |
+ | map = new OpenLayers.Map(' | ||
+ | maxExtent: new OpenLayers.Bounds(-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(" | ||
+ | displayProjection: | ||
+ | }); | ||
- | function init() { | + | // Add OpenStreetMap Mapnik |
- | ... | + | var layerMapnik |
- | | + | layerMapnik.transitionEffect |
- | | + | layerMapnik.isBaseLayer |
- | projection: map.displayProjection | + | map.addLayer(layerMapnik); |
- | }); | + | |
- | | + | |
- | | + | |
- | map.addLayer(friends); | + | |
- | ... | + | |
- | var tim = setInterval (" | + | |
- | } | + | |
- | + | ||
- | function updateFriends() { | + | |
- | friends.clearMarkers(); | + | |
- | friends.clearFeatures(); | + | |
- | friends.loaded = false; | + | |
- | friends.loadRSS(); | + | |
- | } | + | |
</ | </ | ||
- | The code **'' | + | ===== Mostrare un mark sulla mappa OSM ===== |
- | <code php> | + | 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 '' |
- | header(" | + | |
- | header(" | + | |
- | header(" | + | |
- | ... | + | |
- | </ | + | |
- | ==== OpenLayers.Layer.GML ==== | + | [[http://www.openstreetmap.org/?mlat=43.8200& |
- | + | ||
- | 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: | + | |
- | 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(" | + | |
- | } | + | |
- | </code> | + | |
- | + | ||
- | The **'' | + | |
- | + | ||
- | < | + | |
- | 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?bbox=-10.77,41.32,11.72,52.57 | + | |
- | </ | + | |
- | 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 '' | + | |
+ | Questo trucco funziona sul sito di OpenStreetMap, |
tecnica/gps_cartografia_gis/openlayers_900913.txt · Last modified: 2010/11/05 14:47 by niccolo