Open Layers: applicare stili agli elementi di layers vettoriali

Con OpenLayers è possibile visualizzare overlays vettoriali sopra alle mappe per mostrare ad esempio informazioni aggiuntive di un punto / zona.

Ai vettori aggiunti è possibile applicare degli stili differenti (dimensioni, colori, icone, …) in base alle proprietà di ciascun oggetto (feature) tramite la classe OpenLayers.Rule() .
Un insieme di “features” sono descritte in formato GeoJSON nel seguente modo:

{	"type": "FeatureCollection",
	"features":
	[
		{
		"type":"Feature",
		"id":"OpenLayers.Feature.Vector_1",
		"properties":{
			"colore":"1"
		},
		"geometry":{
			"type":"Point",
			"coordinates":["13.38920500", "45.67558400"]
		},
		"crs":{
			"type":"name",
			"properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}
		}
	},
		{
		"type":"Feature",
		"id":"OpenLayers.Feature.Vector_2",
		"properties":{
			"colore":"2",
		},
		"geometry":{
			"type":"Point",
			"coordinates":["13.38921800", "45.67546900"]
		},
		"crs":{
			"type":"name",
			"properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}
		}
	},
		{
		"type":"Feature",
		"id":"OpenLayers.Feature.Vector_3",
		"properties":{
			"colore":"3",
		},
		"geometry":{
			"type":"Point",
			"coordinates":["13.38917800", "45.67540000"]
		},
		"crs":{
			"type":"name",
			"properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}
		}
	}
   ]
}

Ogni feature presenta una serie di parametri per identificare univocamente l’oggetto (id), la posizione (geometry) e  il sistema di riferimento (crs) , i quali vengono automaticamente interpretati da OpenLayers.
All’interno di  ”properties” è invece possibile definire una serie di parametri custom (nell’esempio c’è solo il colore ma se ne possono aggiungere altri in base alle necessità).

Nel codice seguente è possibile vedere come vengono definiti gli stili nel metodo addLayers() tramite la creazione di regole personalizzate in base al parametro “colore” delle features. Successivamente nel metodo showElements() le features vengono aggiunte al layer vettoriale.
E’ possibile visualizzare il codice completo nel codice sorgente della pagina DEMO.

function Mappa ( options ) {

	//codice INIZIALIZZAZIONE

	// World Geodetic System 1984 projection
	this.WGS84 = new OpenLayers.Projection("EPSG:4326");
	// WGS84 Google Mercator projection
	this.WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");
	//layers
	this.near_elements_layer = null;

	//codice AGGIUNTA MAPPE BASE

	/**
	* Aggiunge layer vettoriale
	*/
	this.addLayers = function(){
		//stile base dei punti vettoriali
		var style = new OpenLayers.Style({
			fillOpacity : 0.8,
			pointRadius : 5,
			strokeWidth : 0,
			graphicName : "circle",
			cursor: 'pointer'
		});
		//stili personalizzati in base alla proprietà "colore"
		var rA = new OpenLayers.Rule({
			filter: new OpenLayers.Filter.Comparison({
				property: "colore",type: OpenLayers.Filter.Comparison.EQUAL_TO,value: 1
			}),
			symbolizer: {fillColor: "#00ff00"}
		});
		var rB = new OpenLayers.Rule({
			filter: new OpenLayers.Filter.Comparison({
				property: "colore",type: OpenLayers.Filter.Comparison.EQUAL_TO,value: 2
			}),
			symbolizer: {fillColor: "#0000ff"}
		});
		var rC = new OpenLayers.Rule({
			filter: new OpenLayers.Filter.Comparison({
				property: "colore",type: OpenLayers.Filter.Comparison.EQUAL_TO,value: 3
			}),
			symbolizer: {fillColor: "#ff0000"}
		});
		var rD = new OpenLayers.Rule({
			filter: new OpenLayers.Filter.Comparison({
				property: "colore",type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,value: 4
			}),
			symbolizer: {fillColor: "#000000"}
		});

		style.addRules([rA,rB,rC,rD]);
		//creazione del layer
		this.near_elements_layer = new OpenLayers.Layer.Vector("Elementi vicini", {
			displayInLayerSwitcher:false,
			name:'near_elements_layer',
			projection: this.WGS84,
			styleMap: style //stili da applicare al layer
		});

		//aggiunge layer alla mappa
		this.map.addLayers([this.near_elements_layer]);
	}
	/**
	* Visualizzazione degli elementi
	*/
	this.showElements = function(){
		//ricava lista features da una textarea (possono essere ricavate anche tramite AJAX o altri metodi)
		var data = $('.input_data').val();
		$this = this;
		//eliminazione features aggiunte in precedenza (se presenti)
		$this.near_elements_layer.destroyFeatures();
		//inizializzazione del formato di lettura GeoJSON:
		//i punti della features sono in formato WGS84
		var geojson_format = new OpenLayers.Format.GeoJSON({
			'internalProjection': $this.map.baseLayer.projection,
			'externalProjection': $this.WGS84
		});
		//lettura delle features
		var features = geojson_format.read(data);
		//aggiunte degli elementi sul layer vettoriale
		if(features.length > 0){
			$this.near_elements_layer.addFeatures(features);
		}
	}

	//codice GESTIONE MAPPA
}

I tipi di comparazione previsti dai filtri sono:

• OpenLayers.Filter.Comparison.EQUAL_TO = “==”;
• OpenLayers.Filter.Comparison.NOT_EQUAL_TO = “!=”;
• OpenLayers.Filter.Comparison.LESS_THAN = “<”;
• OpenLayers.Filter.Comparison.GREATER_THAN = “>”;
• OpenLayers.Filter.Comparison.LESS_THAN_OR_EQUAL_TO = “<=”;
• OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO = “>=”;
• OpenLayers.Filter.Comparison.BETWEEN = “..”;
• OpenLayers.Filter.Comparison.LIKE = “~”;

Links:

• DEMO
• OpenLayers
• Documentazione OpenLayers.Filter.Comparison