4

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?

3 Answers 3

4

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
      })]
    }
  );
3

Definitely possible. See this example: http://openlayers.org/dev/examples/stylemap.html

 var myStyles = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                pointRadius: "${type}", // sized according to type attribute
                fillColor: "#ffcc66",
                strokeColor: "#ff9933",
                strokeWidth: 2,
                graphicZIndex: 1
            }),
            "select": new OpenLayers.Style({
                fillColor: "#66ccff",
                strokeColor: "#3399ff",
                graphicZIndex: 2
            })
        });

Single stylemap includes multiple styles

And here are the different intents that StyleMap supports

http://dev.openlayers.org/docs/files/OpenLayers/StyleMap-js.html#OpenLayers.StyleMap

2
  • 1
    Thanks for your answer. I don't know if it is because I don't understand or because I was not precise in my question, as I don't see how to use Openlayer.Rule to define a rule and then add it to the stylemap like stylemap.addrules. On one side, I find stylemap,to highlight or symbolize according to value and on the other style and addrules to use openlayers.filters.comparison. I don't find stylemap.addrules
    – Olivier
    Mar 24, 2012 at 7:50
  • I found but added point to thank you for your answer.
    – Olivier
    Mar 24, 2012 at 18:18
0

I found. Here is an example add lines 80-112, removing the two "if".

http://trac.geoext.org/browser/sandbox/cmoullet/ux/Redlining/examples/StylingExample.html?rev=1762

80
            var select = new OpenLayers.Control.SelectFeature(vectorLayer, { 

81
                selectStyle: OpenLayers.Util.extend({fill: true, stroke: true}, 

82
                        OpenLayers.Feature.Vector.style["select"]) 

83
            }); 

84
            map.addControl(select); 

85
            select.onBeforeSelect = function(feature) { 

86
                this.selectStyle.fill = true; 

87
                this.selectStyle.stroke = true; 

88
                this.selectStyle.fillColor = '#FF0000'; 

89
                this.selectStyle.pointRadius = 12; 

90
                if (feature.style.label) { 

91
                    this.selectStyle.label = feature.attributes.name; 

92
                } 

93
                if (feature.style.externalGraphic) { 

94
                    this.selectStyle.externalGraphic = feature.style.externalGraphic; 

95
                    this.selectStyle.graphicWidth = feature.style.graphicWidth; 

96
                    this.selectStyle.graphicHeight = feature.style.graphicHeight; 

97
                    this.selectStyle.graphicOpacity = feature.style.graphicOpacity / 2; 

98


99
                } 

100
            }; 

101
            select.onUnselect = function(feature) { 

102
                this.selectStyle.label = null; 

103
                this.selectStyle.externalGraphic = null; 

104
                this.selectStyle.graphicWidth = null; 

105
                this.selectStyle.graphicHeight = null; 

106
                this.selectStyle.graphicOpacity = null; 

107
                this.selectStyle.fillColor = null; 

108
                this.selectStyle.pointRadius = null; 

109
                this.selectStyle.fill = null; 

110
                this.selectStyle.stroke = null; 

111
            }; 

112
            select.activate(); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.