IT:Openlayers Track example

From OpenStreetMap Wiki
Jump to: navigation, search
Lingue disponibili — Openlayers Track example
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português português do Brasil română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

Visualizzare file Track in formato GPX sulla mappa

Screenshot of the result

Questo esempio mostra come visualizzare una o più tracce GPX su una mappa utilizzando le librerie OpenLayers.

L' esempio è basato su OpenLayers Simple Example.

Questo esempio mostra la mappa OSM con le sue varianti Mapnik, Osmarender e Cyclemap, un layer con un marker nella posizione indicata come centro della mappa ed un layer con la traccia GPX.

il codice:

var lgpx = new OpenLayers.Layer.GML("Traccia GPX", "traccia.gpx", {
				format: OpenLayers.Format.GPX,
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});

definisce il layer di tipo GML usato per diversi formati vettoriali di dati, in questi caso il formato GPX, e definisce il file dove caricare questi dati, "traccia.gpx".

Da notare che si sarebbe potuto tranquillamente chiamare questo file "traccia.txt" se il server dove è ospitato il vostro sito non permette l' upload di files di tipo .gpx.

In questo esempio i vari layers sono caricati sulla mappa dopo la loro definizione anzichè con una unica istruzione tipo;

map.addLayers( [ layerMapnik,layerTilesAtHome,layerCycleMap,layerMarkers, lgpx )];

Il file HTML

Copiare il codice seguente in un file testo e salvarlo come file HTML nel vostro sito (per ragioni di sicurezza Javascript impedisce il caricamento della traccia se il file HTML è salvato in una cartella locale).

Esempio per OpenLayers 2.12 o seguente:


<html>
<head>
	<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
	<title>Simple OSM GPX Track</title>
	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=44.353
		var lon=11.707
		var zoom=13

		var map; //complex object of type OpenLayers.Map

		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );

			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);

			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Descrizione del layer", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "traccia.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);

			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);

			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>

</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div style="width:100%; height:90%" id="map"></div>
</body>
</html>

il file .gpx

Copiare il codice seguente in un file testo e salvarlo come "traccia.gpx" nella stessa cartella del file HTML.

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.0">
	<name>Example gpx</name>
    <trk>
	<trkseg>
            <trkpt lon="11.707633137702942" lat="44.35309951704362"><ele>51.0</ele><time>2010-12-26T17:07:40.421Z</time></trkpt>
            <trkpt lon="11.70541763305664" lat="44.35334884358864"><ele>50.0</ele><time>2010-12-26T17:07:47.750Z</time></trkpt>
            <trkpt lon="11.704532504081726" lat="44.35360967637735"><ele>50.0</ele><time>2010-12-26T16:07:50.877Z</time></trkpt>
            <trkpt lon="11.703078746795654" lat="44.35413900993877"><ele>50.0</ele><time>2010-12-26T16:07:56.204Z</time></trkpt>
            <trkpt lon="11.701050996780396" lat="44.351427083875"><ele>52.0</ele><time>2010-12-26T16:08:10.219Z</time></trkpt>
            <trkpt lon="11.699634790420532" lat="44.350510294065636"><ele>50.0</ele><time>2010-12-26T16:08:16.451Z</time></trkpt>
            <trkpt lon="11.699248552322388" lat="44.35042206667484"><ele>50.0</ele><time>2010-12-26T16:08:17.775Z</time></trkpt>
            <trkpt lon="11.699146628379822" lat="44.35024561149473"><ele>50.0</ele><time>2010-12-26T16:08:18.644Z</time></trkpt>
            <trkpt lon="11.69867992401123" lat="44.34975460298043"><ele>51.0</ele><time>2010-12-26T16:08:21.347Z</time></trkpt>
            <trkpt lon="11.695396900177002" lat="44.346064235486004"><ele>52.0</ele><time>2010-12-26T16:08:41.258Z</time></trkpt>
            <trkpt lon="11.69371247291565" lat="44.3454734482214"><ele>55.0</ele><time>2010-12-26T16:08:47.376Z</time></trkpt>
            <trkpt lon="11.69244647026062" lat="44.345089816939044"><ele>54.0</ele><time>2010-12-26T16:08:51.860Z</time></trkpt>
            <trkpt lon="11.688272953033447" lat="44.34223552137326"><ele>57.0</ele><time>2010-12-26T16:09:10.671Z</time></trkpt>
            <trkpt lon="11.687886714935303" lat="44.34198231102353"><ele>58.0</ele><time>2010-12-26T16:09:12.377Z</time></trkpt>
            <trkpt lon="11.687532663345337" lat="44.341848032364"><ele>59.0</ele><time>2010-12-26T16:09:13.682Z</time></trkpt>
            <trkpt lon="11.687403917312622" lat="44.341886397726675"><ele>59.0</ele><time>2010-12-26T16:09:14.136Z</time></trkpt>
            <trkpt lon="11.68720543384552" lat="44.34174828230355"><ele>59.0</ele><time>2010-12-26T16:09:15.036Z</time></trkpt>
            <trkpt lon="11.687087416648865" lat="44.34137613634955"><ele>59.0</ele><time>2010-12-26T16:09:16.767Z</time></trkpt>
            <trkpt lon="11.681814193725586" lat="44.33566704462428"><ele>61.0</ele><time>2010-12-26T16:09:47.832Z</time></trkpt>
    </trkseg>
	</trk>
</gpx>

Modificare l' esempio

Se l' esempio sopra riportato ha funzionato, potreste volerlo personalizzare secondo le vostre necessità.

  • Cambiare il punto di partenza della mappa e lo zoom:
  • aprire il file html in un editore di testo e modificare le seguenti linee:
// Start position for the map (hardcoded here for simplicity
// but maybe you want to get this from the URL params)
var lat=47.496792
var lon=7.571726
var zoom=13
  • Cambiare la traccia GPX:
  • aprire il file html in un editore di testo e modificare le seguenti linee:
// Add the Layer with GPX Track
var lgpx = new OpenLayers.Layer.GML("Traccia GPX", "traccia.gpx", {
      format: OpenLayers.Format.GPX,
      style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
      projection: new OpenLayers.Projection("EPSG:4326")
});
    • Traccia GPG è il nome della traccia mostrato nel menu a destra.
    • traccia.gpx è il nome (o la path) del file GPX . NB you cannot call for a file from another domain.
    • style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5} questo controlla come la traccia deve essere visualizzata nella mappa. Vedi OpenLayers documentation per dettagli di come possono essere configurati questi parametri.
  • Se si vuole visualizzare più di una traccia, semplicemente aggiungere un nuovo layer che punta ad un diverso file GPX.

Altre soluzioni al problema

Vedi anche