tecnica:gps_cartografia_gis:openlayers_900913
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revisionLast revisionBoth sides next revision | ||
tecnica:gps_cartografia_gis:openlayers_900913 [2009/01/31 22:29] – external edit 127.0.0.1 | tecnica:gps_cartografia_gis:openlayers_900913 [2010/11/05 13:23] – niccolo | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== OpenStreetMap |
Le mappe di **[[http:// | Le mappe di **[[http:// | ||
Line 19: | Line 19: | ||
Questo trucco funziona sul sito di OpenStreetMap, | Questo trucco funziona sul sito di OpenStreetMap, | ||
- | |||
- | ===== Layer supportati da OpenLayers ===== | ||
- | |||
- | **[[http:// | ||
- | |||
- | ^ 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 al variare della bounding box). La strategia **'' | ||
- | ^ 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( | ||
- | " | ||
- | </ | ||
- | |||
- | ===== 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 '' |
tecnica/gps_cartografia_gis/openlayers_900913.txt · Last modified: 2010/11/05 13:47 by niccolo