[GIS] OpenLayers Rule is not working as expected

openlayers-2style

I'm trying to add a rule to paint some roads of my GeoJSON file with a different style using OpenLayers.

The problem is that even after adding a property "featureType" to the feature in response to the event "featureadded", the rule doesn't seem to be working.

Any ideas why this happens?

This if a feature example in GeoJSON format after changing the "featureType":

{
    "type": "Feature",
    "properties": {
        "id": "42",
        "state": "texto",
        "featureType": "segmento_logradouro"
    },
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                574951.47711036,
                9673700.3858644
            ],
            [
                574954.47530982,
                9673558.2712099
            ],
            [
                574814.15957496,
                9673551.0755312
            ]
        ]
    },
    "crs": {
        "type": "name",
        "properties": {
            "name": "EPSG:29193"
        }
    }
}

And this is the code I used to add the rules:

var ruleSegmentoLogradouroStyle = OpenLayers.Util.applyDefaults({
    fillColor : "#0000FF",
    fillOpacity : 0.9,
    strokeColor : "#FF0000",
    strokeOpacity : 0.9,
    strokeWidth : 5
}, OpenLayers.Feature.Vector.style["default"]);

var ruleSegmentoLogradouro = new OpenLayers.Rule({
    filter : new OpenLayers.Filter.Comparison({
        type : OpenLayers.Filter.Comparison.EQUAL_TO,
        property : "featureType",
        value : "segmento_logradouro",
    }),
    symbolizer : ruleSegmentoLogradouroStyle
});

var ruleDefault = new OpenLayers.Rule({
    symbolizer : OpenLayers.Util.applyDefaults({},
            OpenLayers.Feature.Vector.style["default"]),
    elseFilter : true
});

defaultStyle = OpenLayers.Util.applyDefaults({
    fillColor : "green",
    fillOpacity : 0.4
}, OpenLayers.Feature.Vector.style["default"]);

MapControl.editLayer.styleMap = new OpenLayers.StyleMap(defaultStyle);
MapControl.editLayer.styleMap.styles['default'].addRules([ ruleSegmentoLogradouro,
ruleDefault ]);

Best Answer

it seems that you have an extra comma in the first part of the code, try this:

var ruleSegmentoLogradouroStyle = OpenLayers.Util.applyDefaults({
    fillColor: "#0000FF",
    fillOpacity: 0.9,
    strokeColor: "#FF0000",
    strokeOpacity: 0.9,
    strokeWidth: 5
}, OpenLayers.Feature.Vector.style["default"]);

var ruleSegmentoLogradouro = new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "featureType",
        value: "segmento_logradouro"
    }),
    symbolizer: ruleSegmentoLogradouroStyle
});

var ruleDefault = new OpenLayers.Rule({
    symbolizer: OpenLayers.Util.applyDefaults({},
        OpenLayers.Feature.Vector.style["default"]),
    elseFilter: true
});

defaultStyle = OpenLayers.Util.applyDefaults({
    fillColor: "green",
    fillOpacity: 0.4
}, OpenLayers.Feature.Vector.style["default"]);

MapControl.editLayer.styleMap = new OpenLayers.StyleMap(defaultStyle);
MapControl.editLayer.styleMap.styles['default'].addRules([ruleSegmentoLogradouro,
ruleDefault]);

even though I haven't tested your code, it looks like that it could be reduced, what would you get if instead you use the code below?

new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "class",
        value: "someClass"
    }),
    symbolizer: {
        fillColor: "blue",
        strokeWidth: 1,
        strokeColor: "olive"
    }
})

that one will paint all features with class equal to ‘someClass’ using a 1px olive stroke and blue fill. However, if you want all features to be colored red except for those that have a class attribute with the value of "someClass" (and you want those features colored blue with an 1px olive stroke), you would create a style that looked like the following:

var myStyle = new OpenLayers.Style({
    // this is the base symbolizer
    fillColor: "red"
}, {
    rules: [
        new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "class",
                value: "someClass"
            }),
            symbolizer: {
                fillColor: "blue",
                strokeWidth: 1,
                strokeColor: "olive"
            }
        }),
        new OpenLayers.Rule({elseFilter: true})
    ]
});

check here to have some additional tips.

Hope this helps,

Related Question