Differences

This shows you the differences between two versions of the page.

--- tecnica:gps_cartografia_gis:openlayers_tips [2010/11/05 15:13] – niccolo
+++ tecnica:gps_cartografia_gis:openlayers_tips [2013/03/18 16:25] (current) – [Layer supportati da OpenLayers] niccolo
@@ Line 6: / Line 6: @@
   * [[http://trac.osgeo.org/openlayers/wiki/Documentation|More documentation]]
   * [[http://openlayers.org/dev/examples/|Examples gallery]]
+  * [[http://ole.geops.de/|OpenLayers Editor]] extend OpenLayers functionality
 ===== Layer supportati da OpenLayers =====
@@ Line 12: / Line 12: @@
 ^ Markers  | Visualizza delle icone, è possibile attivare un pop-up al click sull'icona. Ogni feature può avere un'icona diversa. I marker vengono aggiunti o rimossi da programma.  |
 ^ Text  | Del tutto simile al ''Marker'', ma carica le feature, i nomi delle icone e il contenuto del pop-up da un file di testo. Carica il layer una sola volta, per aggiornarne il contenuto bisogna svuotarlo e forzare la funzione **''loadText()''**.  |
-^ GeoRSS  | Carica un elenco di features da un file XML, ogni feature viene mostrata con un simbolo eventualmente personalizzto con un uno stile. Lo stile può dipendere dagli attributi della singola feature, non può essere un'icona bitmap. Carica il file .xml una sola volta, per aggiornarne il contenuto bisogna svuotarlo e forzare la funzione **''loadRSSt()''**.  |
+^ GeoRSS  | Carica un elenco di features da un file XML, ogni feature viene mostrata con un simbolo eventualmente personalizzato con un uno stile. Lo stile può dipendere dagli attributi della singola feature, non può essere un'icona bitmap. Carica il file .xml una sola volta, per aggiornarne il contenuto bisogna svuotarlo e forzare la funzione **''loadRSSt()''**.  |
-^ Vector  | Carica una gemoetria con un dato protocollo (es. HTTP) in un dato formato (es. GPX, GML, KML, ecc). 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 **''BBOX''** fa uso di richieste XMLHttpRequest per caricare nuovi dati in modo asincrono, al cambiare della bounding box. Per forzare l'aggiornamento da programma si modifica l'URL di origine con **''setUrl()''** aggiungendo un parametro univoco (ad esempio un ''t=timestamp''), in tal modo si invalida la cache.  |
+^ Vector  | Carica una geometria con un dato protocollo (es. HTTP) in un dato formato (es. GPX, GML, KML, ecc). 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 **''BBOX''** fa uso di richieste XMLHttpRequest per caricare nuovi dati in modo asincrono, al cambiare della bounding box. Per forzare l'aggiornamento da programma si modifica l'URL di origine con **''setUrl()''** aggiungendo un parametro univoco (ad esempio un ''t=timestamp''), in tal modo si invalida la cache.  |
 ^ KML  | Layer vettoriale. Supporta diverse strategie di caricamento, in generale si richiede via HTTP e può essere circoscritto alla BBOX inquadrata in quel momento. I vari attributi inclusi nello standandard KML possono essere utilizzati da OpenLayers per definire lo stile, ecc.   |
 ^ WFS  |  |
@@ Line 235: / Line 235: @@
 il **rettangolo che evidenzia l'estensione** nella overview potrà variare dalla **metà** dell'estensione dell'overview fino a **un decimo**. Oltre questi limiti l'overview viene zoommata opportunamente.
-===== Sistemi di riferimento =====
+===== Sistemi di riferimento extra =====
-OpenLayers supporta nativamente alcuni sistemi di riferimento, per cui è posibile fare la riproiezione al volo di layer vettoriali. Tra i sistemi supportati notiamo:
+OpenLayers supporta alcuni sistemi di riferimento, di questi è posibile fare la riproiezione al volo (layer vettoriali). Tra i sistemi supportati nativamente ci sono:
   * EPSG:900913
   * EPSG:4326
-Per supportare altri sistemi di riferimento è possibile definirli nel codice JavaScript, ad esempio (FIXME da verificare):
+Per supportare altri sistemi di riferimento è possibile utilizzare la **[[http://trac.osgeo.org/proj4js/|libreria proj4js]]**. Basta scompattare l'archivio nella DocumentRoot e includere il codice nel progetto web (oltre a quello di OpenLayers) con qualcosa del genere:
+<code html>
+<script type="text/javascript" src="libs/proj4js/lib/proj4js-compressed.js"></script>
+<script type="text/javascript" src="libs/proj4js/lib/defs/EPSG3003.js"></script>
+<script type="text/javascript" src="libs/proj4js/lib/defs/EPSG23032.js"></script>
+<script type="text/javascript" src="libs/openlayers/OpenLayers.js"></script>
+</code>
+In teoria OpenLayers dovrebbe scoprire automaticamente che è disponibile la libreria proj4js, senza bisogno di includere lo script. ma non è chiaro come.
+Sistemi di riferimento aggiuntivi vengono definiti con la stessa sintassi di PROJ.4, aggiungendo dei file nella directory **''proj4js/lib/defs/''**, nell'esempio sopra sono stati inclusi ''EPSG:3003'' e ''EPSG:23032''.
+Ecco ad esempio il file **''EPSG3003.js''**:
 <code javascript>
-Proj4js.defs["EPSG:40000"] = "+proj=tmerc +lat_0=0 +lon_0=9 +k=0.999600 +x_0=1500000 +y_0=0 +ellps=intl
+Proj4js.defs["EPSG:3003"] = "+title=Monte Mario / Italy zone 1 \
-+units=m +no_defs +towgs84=-104.1,-49.1,-9.9,0.971,-2.917,0.714,-11.68";
+    +proj=tmerc +lat_0=0 +lon_0=9 +k=0.999600 +x_0=1500000 +y_0=0 \
-var my_srs = new Proj4js.Proj('EPSG:40000');
+    +ellps=intl +units=m +no_defs";
 </code>
+Dopo aver incluso il JavaScript di cui sopra, diventa possibile fare operazioni del tipo:
+<code javascript>
+var lonLat = new OpenLayers.LonLat(1554000, 4678000);
+alert("lonLat = " + lonLat);
+lonLat.transform(new OpenLayers.Projection('EPSG:3003'), new OpenLayers.Projection('EPSG:23032'));
+alert("lonLat = " + lonLat);
+</code>
+:!: **ATTENZIONE!** Se non si aggiunge manualmente la definizione del sistema di riferimento (inline nel codice o tramite un file in **''lib/defs/''**) proj4js tenta di scaricarla da spatialreference.org. L'operazione **viene effettuata a runtime e in modo asincorno**, quindi potrebbe causare **problemi difficili da risolvere**. Un sintomo è che l'oprazione ''transform()'' pare non avere effetto sull'oggetto, in quanto il JavaScript non ha fatto in tempo a recuperare la definizione del sistema di riferimento.
+===== i18n =====
+OpenLayers offre supporto per la internazionalizzazione (i18n) delle applicazioni tramite la classe **[[http://dev.openlayers.org/apidocs/files/OpenLayers/Lang-js.html|OpenLayers.Lang]]**.
+Ecco un esempio di come usarla:
+<code javascript>
+OpenLayers.Lang.it = {
+    'string1': 'Traduzione di string1',
+    'string2': 'Traduzione di string2'
+};
+OpenLayers.Lang.setCode('it');
+alert(OpenLayers.i18n('string1'));
+</code>
+===== Click destro =====
+Per gestire il click destro sulla mappa bisogna anzitutto disabilitare il //context menu// che presenta il browser al click destro. Ci sono due metodi.
+Con questa istruzione si disabilita il context menu nel <div> della mappa:
+<code javascript>
+map.div.oncontextmenu = function noContextMenu(e) {return false;};
+</code>
+In alternativa si fa in modo che il ''OpenLayers.Control.Navigation'' lo intercetti (ad esempio con il doppio click destro si esegue uno zoom indietro):
+<code javascript>
+map = new OpenLayers.Map("map", {
+    controls: [
+        new OpenLayers.Control.Navigation({handleRightClicks: true}),
+        ...
+</code>
+Infine si registra la funzione handler per l'evento.
+Per vedere gli eventi supportati dalla mappa basta vedere la proprietà **''map.events.eventTypes''**. Stranamente l'evento **''rightclick''** esiste, ma non si riesce ad agganciarlo. Per aggirare il problema ci si registra per l'evento **''mousedown''** e nell'handler si verifica quale pulsante lo ha scatenato:
+<code javascript>
+function mousedown_handler(e) {
+    if (OpenLayers.Event.isRightClick(e)) {
+        alert("mouse right click event!");
+        OpenLayers.Event.stop(e);
+        return false;
+    }
+}
+map.events.register('click', map, click_handler);
+map.events.register('mousedown', map, mousedown_handler);
+</code>
+===== Problema con Layer.Markers e pop-up =====
+Se si disegna un layer di tipo **''OpenLayers.Layer.Markers()''** che contiene delle **''OpenLayers.Feature()''** con il relativo attributo **''popupClass''**, bisogna fare in modo che questi layer siano aggiunti alla mappa per ultimi, altrimenti si rischia che un altro layer (es. un **''OpenLayers.Layer.Vector()''**) aggiunto sopra intercetti il clik e impedisca la comparsa del popup.
+È possibile anche usare il metodo **''raiseLayer()''** per abbassare di livello un layer, in modo che venga messo in fondo e non intercetti il clik che fa apparire il popup:
+<code javascript>
+map.addLayer(vectorLayer);
+map.raiseLayer(vectorLayer, 2 - map.getNumLayers());
+</code>
+Si decrementa di 2 per tenere in conto il layer stesso e un solo baselayer, di 3 se i baselayer sono due, ecc.