User Tools

Site Tools


Sidebar

No ai soldati italiani all'estero

Indice

Eventi

Energia

Rigacci.Org usa energia elettrica da fonti rinnovabili, grazie al gruppo di acquisto Merci Dolci.

Merci Dolci - Energia Rinnovabile

Software libero!

Petizione contro i brevetti software

Faunalia: Soluzioni GIS professionali

Debian

www.gnu.org www.kernel.org

tecnica:gps_cartografia_gis:openlayers_style

This is an old revision of the document!


OpenLayers: modificare gli stili

Foglio di stile

Nel codice HTML si include un foglio di stile dopo aver incluso OpenLayers:

<script src="js/OpenLayers.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">

Solo alcuni stili possono essere modificati, ad esempio:

#layerswitcher {
    /* This will work: */
    width: 250px;
    /* Does not work: overridden by the JavaScript constructor. */
    color: yellow;
    float: left;
}

Non funziona quando lo stile viene definito dinamicamente dal JavaScript di OpenLayers, si vede chiaramente con Firebug.

JavaScript

Si possono passare dei parametri al costruttore di un oggetto oppure modificare delle proprietà all'oggetto stesso. Ad esempio:

var layerswitcher = new OpenLayers.Control.LayerSwitcher({
        'div':OpenLayers.Util.getElement('layerswitcher'),
        activeColor:'darkgreen'
    });
map.addControl(layerswitcher);
layerswitcher.div.style.position = 'fixed';
layerswitcher.div.style.top      = '0';
layerswitcher.div.style.right    = '0';
layerswitcher.div.style.width    = '180px';
layerswitcher.div.style.height   = '400px';

Non funziona quando il costruttore non prevede il parametro oppure se l'oggetto non espone la proprietà. Altro problema è la poca documentazione, conviene vedere i sorgenti e cercare la stringa “style”.

Modificare il JavaScript originale

Il codice di OpenLayers è organizzato in diversi file sorgente. In produzione - per motivi di performance - viene compattato e incluso nell'unico file OpenLayers.js. Per effettuare piccole modifiche è conveniente prendere il singolo file sorgente, modificarlo e includerlo separatamente.

Se si desidera ad esempio modificare un OpenLayers.Control, si copia il sorgente dello stesso dalla directory dei sorgenti (es. lib/OpenLayers/Control/LayerSwitcher.js) e lo si include nell'HTML come script dopo aver incluso OpenLayers.js:

<script src="js/OpenLayers.js" type="text/javascript"></script>
<script src="js/lib/OpenLayers/Control/LayerSwitcher.js" type="text/javascript"></script>

In questo modo si può eliminare la posizione hard-coded del layer switcher (e definirla in un foglio di stile):

this.div.style.position = "absolute";

Utilizzare l'oggetto StyleMap

Esempio:

{{{
var styleMap = new OpenLayers.StyleMap({
    "default": {
        strokeWidth: 1,
        strokeColor: "black",
        fillColor: "red"},
    "select": {
        fillColor: "yellow"}
});
}}}
tecnica/gps_cartografia_gis/openlayers_style.1253197886.txt.gz · Last modified: 2009/09/17 16:31 by niccolo