IT:Openlayers POI layer example

From OpenStreetMap Wiki
Jump to: navigation, search
Help
Lingue disponibili
• English • Français • Italiano • 日本語
Altre lingue — Aiutaci a tradurre questo wiki
• Afrikaans • አማርኛ • العربية • অসমীয়া • Asturianu • Azərbaycanca • Български • বাংলা • Brezhoneg • Bosanski • Català • Corsu • Česky • Dansk • Deutsch • ދިވެހިބަސް • Ελληνικά • Esperanto • Español • Eesti • Euskara • فارسی • Suomi • Frysk • Gaeilge • Kréyòl gwadloupéyen • Gàidhlig • Galego • Alemannisch • ગુજરાતી • هَوُسَ • עברית • हिन्दी • Hrvatski • Kreyòl ayisyen • Magyar • Հայերեն • Interlingua • Bahasa Indonesia • Igbo • Íslenska • Basa Jawa • ქართული • Қазақша • ភាសាខ្មែរ • ಕನ್ನಡ • 한국어 • Kurdî • Lëtzebuergesch • ລາວ • Lietuvių • Latviešu • Malagasy • Македонски • മലയാളം • मराठी • Bahasa Melayu • Malti • မြန်မာဘာသာ • नेपाली • Nederlands • ‪Norsk (nynorsk)‬ • ‪Norsk (bokmål)‬ • Occitan • Oromoo • ଓଡ଼ିଆ • ਪੰਜਾਬੀ • Polski • پښتو • Português • Português do Brasil • Română • Română (Moldova) • Русский • سنڌي • සිංහල • Slovenčina • Slovenščina • Soomaaliga • Shqip • Српски / Srpski • Svenska • தமிழ் • తెలుగు • Тоҷикӣ • ไทย • Türkçe • Українська • اردو • O'zbek • Tiếng Việt • Wolof • isiXhosa • Yorùbá • ‪中文(简体)‬ • ‪中文(繁體)‬ • isiZulu

Contents

Aggiungere POI con testo alla mappa

L' esempio seguente mostrerà come visualizzare alcuni markers che contrassegnano POIs sulla mappa OSM Slippy Map.

Screenshot of the result

Il risultato è visualizzabile qua

Files da creare

Il file html

Il codice del file è simile agli esempi precedenti, da notare: 

var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });

che crea il layer "pois" in grado di visualizzare testo sulla mappa, definito dal file "textfile.txt"

Questo metodo può essere utile per mostrare testo associato a markers sulla mappa.

Copiare il codice seguente in un nuovo file di testo e salvarlo con un nome a piacere, index.html ad esempio. 

<html>
<head>
<title>layer OSM </title>
 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
 
// Posizione iniziale della mappa
    var lat=48.9773;
    var lon=9.5788;
    var zoom=11;
 
    function init() {
 
        map = new OpenLayers.Map ("map", {
            controls:[ 
			new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanZoomBar(),
                       new OpenLayers.Control.ScaleLine(),
                       new OpenLayers.Control.Permalink('permalink'),
                       new OpenLayers.Control.MousePosition(),                    
                       new OpenLayers.Control.Attribution()
				      ],
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
		var mapnik = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
 
		map.addLayer(mapnik);
 
	var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
 
		map.addLayer(pois);
 
	map.addControl(new OpenLayers.Control.LayerSwitcher());
 
        var lonLat = new OpenLayers.LonLat( lon ,lat )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
		map.setCenter (lonLat, zoom);
 
 }
 
</script>
</head>
 
<body onload="init();">
 <span style="font-family: Arial; font-weight: bold;">POI marker</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

textfile.txt

Ora creare un secondo file chiamato textfile.txt.

Deve essere un file di testo con colonne separate da tab, ciascuna colonna viene definita dalla prima riga del file.

Un esempio di questo file : 

lat	lon	title	description	icon	iconSize	iconOffset
48.9459301	9.6075669	Title One	Description one<br>Second line.<br><br>(click again to close)	Ol_icon_blue_example.png	24,24	0,-24
48.9899851	9.5382032	Title Two	Description two.	Ol_icon_red_example.png	16,16	-8,-8

Il file richiama anche le icone che devono essere visualizzate sulla mappa, chiamate "Ol_icon_blue_example.png" e " Ol_icon_red_example.png", ne definisce la grandezza e l'offset dal punto di coordinata.

Attenzione: assicuratevi di immettere enter dopo l'ultimo carattere dell' ultima riga, altrimenti l' ultimo POI non funzionerà.

Vedi anche OpenLayers documentation on Layer.Text per maggiori dettagli.

Icone

Si possono scaricare le due icone necessarie nell' esempio :

Risultato

Tutti i quattro files devono essere nella stessa cartella, in locale o sul sito web.

Aprire il browser con l' URL del file inex.html (semplicemente fare doppio click sul file se è in locale).

Mostrerà la mappa OSM (Mapnik) ed in sovrapposizione le due icone le cui posizioni sono definite dal file textfile.txt.

Cliccando sul menu blu contrassegnato dal simbolo "+" nell' angolo in alto a destra nella mappa, sarà possibile rimuovere il layer con le icone.

Estrarre POI da OpenStreetMap

Occorre innanzi tutto ottenere un file .osm aggiornato da cui ricavare i dati, con i metodi qua riportati.

Si può quindi impiegare Osmosis per estrarre dal file solo i dati che ci interessano.

Ad esempio, ilseguente comando: 

osmosis --rx myplanet.osm --tf accept-nodes amenity=restaurant --tf reject-relations --tf reject-ways  --wx ristoranti.osm

estrae dal file myplanet.osm solamente i nodi con tag amenity=restaurant e crea un file chiamato ristoranti.osm contenente i dati desiderati.

Per convertire il file .osm in un file .txt con la formattazione giusta per OpenLayers si può usare GPSBabel usando per la conversione il foglio di stile creato copiando il testo che segue in un file testo e salvandolo con l' estensione .style: 

# gpsbabel XCSV style file
#
# Format: Openlayers.Layer.Text
# Author: vclaw
# Date: 16/01/2010
# based on GPSBabel example styles
#
DESCRIPTION Openlayers.Layer.Text
#
#
# FILE LAYOUT DEFINITIIONS:
#
FIELD_DELIMITER TAB
RECORD_DELIMITER NEWLINE
SHORTLEN 24

PROLOGUE	lat	lon	title	description	icon	iconSize	iconOffset
EPILOGUE  NEWLINE

#
# INDIVIDUAL DATA FIELDS, IN ORDER OF APPEARANCE:
#

OFIELD LAT_DECIMAL, "", "%08.5f"
OFIELD LON_DECIMAL, "", "%08.5f"
OFIELD SHORTNAME, "", "%-.24s"
OFIELD DESCRIPTION, "", "%-.50s"
OFIELD CONSTANT,"icona.png","%s"   # (icon)
OFIELD CONSTANT,"11","%s"   # (icon size)
OFIELD CONSTANT,COMMA,"%s","no_delim_before"
OFIELD CONSTANT,"13","%s","no_delim_before"   # (icon size)
OFIELD CONSTANT,"-8","%s"   # (icon offset)
OFIELD CONSTANT,COMMA,"%s","no_delim_before"
OFIELD CONSTANT,"-8","%s","no_delim_before"   # (icon offset)

GPSBabel effettuerà la conversione ed ilfile TXT così ottenuto potrà essere utilizzato nell' esempio sopra indicato.

Vedi anche

Retrieved from "http://wiki.openstreetmap.org/wiki/IT:Openlayers_POI_layer_example"
Personal tools
Namespaces
Variants
Actions
site
Toolbox