[GIS] OpenLayers Combines Rules and StyleMap/SelectFeature

openlayers-2symbologywfs

I'm using GeoServer, OpenLayers and WFS features. For one layer, I managed to set either rules to display according to a field or SelectFeature with a styleMap to highlight features when the mouse is over.

I would like to combine both, that's to say display features according to its rules but also being able to highlight features when the mouse is over.

Is that possible?

Best Answer

My answer is a bit late, but it might help others. I just had the same problem and I managed to find a solution.

Here is an image of the result:

enter image description here

This is my code:

var style1 = new OpenLayers.Style();

var risk1 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "1"
  }),
  symbolizer: {
    fillColor: "#00FF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk2 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "2"
  }),
  symbolizer: {
    fillColor: "#7FFF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk3 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "3"
  }),
  symbolizer: {
    fillColor: "#FFFF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk4 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "4"
  }),
  symbolizer: {
    fillColor: "#FC7F00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk5 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "5"
  }),
  symbolizer: {
    fillColor: "#FA0000",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

style1.addRules([risk1, risk2, risk3, risk4, risk5]);

var onselect = new OpenLayers.Style({
  'fillColor':'blue',
  'fillOpacity':0.9,
  'strokeColor':'black',
  'strokeWidth':4,
  'strokeDashstyle': "solid"
});


var StyleMap = new OpenLayers.StyleMap({'default': style1,'select': onselect});

The «property» value will be your attribute and the «value» is the value of the attribute on which wou will want to do your classification.

Then the variable «StyleMap» will be the styleMap of your WFS layer.

  crime = new OpenLayers.Layer.Vector("crime",
    {
      styleMap: StyleMap,
      rendererOptions: {zIndexing: true},
      protocol : new OpenLayers.Protocol.WFS({
        version:       "1.1.0",
        url:           "http://localhost:8080/geoserver/Risk/wms",
        srsName:       "EPSG:900913",
        featureType:   "crime"
      }),
      strategies: [new OpenLayers.Strategy.BBOX({
        // only load features for the visible extent
        ratio: 1,
        // fetch features after every resolution change
        resFactor: 1
      })]
    }
  );
Related Question