ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

* Style and Rule now have separate context properties

Browse Source 
* new convenience method addUniqueValueRules in OL.!StyleMap. This can actually be used to achieve what I was trying to show in the example of this ticket's description.
 * some refactoring of OL.Style to remove duplicate code (with tests)
 * a new example showing how to add a "unique value" legend to a point layer using the new addUniqueValueRules method
 * Rule.symbolizer can now also be just a symbolizer, instead of a hash of symbolizers keyed by "Point", "Line", "Polygon". This will make things even simpler (as can be seen in the styles-unique.html example)

r=tschaub (closes #1373)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@6396 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2008-02-28 17:57:37 +00:00
parent d3294e73fd
commit 2f0382e6f6
6 changed files with 187 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
examples/styles-unique.html Normal file
View File

@@ -0,0 +1,72 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Styles Unique Value Styles Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 800px;
height: 400px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map('map', {maxResolution:'auto'});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
// create 20 random features with a random type attribute. The
// type attribute is a value between 0 and 2.
var features = new Array(20);
for (var i=0; i<20; i++) {
features[i] = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
{type: parseInt(Math.random()*3)}
);
}
// create a styleMap with a custom default symbolizer
var styleMap = new OpenLayers.StyleMap({
fillOpacity: 1,
pointRadius: 10
});
// create a lookup table with different symbolizers for 0, 1 and 2
var lookup = {
0: {externalGraphic: "../img/marker-blue.png"},
1: {externalGraphic: "../img/marker-green.png"},
2: {externalGraphic: "../img/marker-gold.png"}
}
// add rules from the above lookup table, with the keyes mapped to
// the "type" property of the features, for the "default" intent
styleMap.addUniqueValueRules("default", "type", lookup);
layer = new OpenLayers.Layer.Vector('Points', {
styleMap: styleMap
});
layer.addFeatures(features);
map.addLayer(layer);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Unique Value Styles Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows how to create a style based on unique feature attribute values.
</p>
<div id="map"></div>
<div id="docs"></div>
</body>
</html>

10
lib/OpenLayers/Rule.js
View File

@@ -22,9 +22,9 @@ OpenLayers.Rule = OpenLayers.Class({
/**
* Property: context
* {Object} An optional object with properties that the rule and its
* symbolizers' property values should be evaluatad against. If no
* context is specified, feature.attributes will be used
* {Object} An optional object with properties that the rule should be
* evaluatad against. If no context is specified, feature.attributes will
* be used.
*/
context: null,
@@ -40,8 +40,8 @@ OpenLayers.Rule = OpenLayers.Class({
/**
* Property: symbolizer
* {Object} Hash of styles for this rule. Contains hashes of feature
* styles. Keys are one or more of ["Point", "Line", "Polygon"]
* {Object} Symbolizer or hash of symbolizers for this rule. If hash of
* symbolizers, keys are one or more of ["Point", "Line", "Polygon"]
*/
symbolizer: null,

69
lib/OpenLayers/Style.js
View File

@@ -40,6 +40,14 @@ OpenLayers.Style = OpenLayers.Class({
*/
rules: null,
/**
* Property: context
* {Object} An optional object with properties that symbolizers' property
* values should be evaluatad against. If no context is specified,
* feature.attributes will be used
*/
context: null,
/**
* Property: defaultStyle
* {Object} hash of style properties to use as default for merging
@@ -116,10 +124,6 @@ OpenLayers.Style = OpenLayers.Class({
var appliedRules = false;
for(var i=0; i<rules.length; i++) {
rule = rules[i];
context = rule.context;
if (!context) {
context = feature.attributes || feature.data;
}
// does the rule apply?
var applies = rule.evaluate(feature);
@@ -128,7 +132,7 @@ OpenLayers.Style = OpenLayers.Class({
elseRules.push(rule);
} else {
appliedRules = true;
this.applySymbolizer(rule, style, feature, context);
this.applySymbolizer(rule, style, feature);
}
}
}
@@ -137,7 +141,7 @@ OpenLayers.Style = OpenLayers.Class({
if(appliedRules == false && elseRules.length > 0) {
appliedRules = true;
for(var i=0; i<elseRules.length; i++) {
this.applySymbolizer(elseRules[i], style, feature, context);
this.applySymbolizer(elseRules[i], style, feature);
}
}
@@ -158,17 +162,18 @@ OpenLayers.Style = OpenLayers.Class({
* rule - {OpenLayers.Rule}
* style - {Object}
* feature - {<OpenLayer.Feature.Vector>}
* context - {Object}
*
* Returns:
* {Object} A style with new symbolizer applied.
*/
applySymbolizer: function(rule, style, feature, context) {
applySymbolizer: function(rule, style, feature) {
var symbolizerPrefix = feature.geometry ?
this.getSymbolizerPrefix(feature.geometry) :
OpenLayers.Style.SYMBOLIZER_PREFIXES[0];
var symbolizer = rule.symbolizer[symbolizerPrefix];
var symbolizer = rule.symbolizer[symbolizerPrefix] || rule.symbolizer;
var context = this.context || feature.attributes || feature.data;
// merge the style with the current style
return this.createLiterals(
@@ -212,25 +217,47 @@ OpenLayers.Style = OpenLayers.Class({
// check the default style
var style = this.defaultStyle;
for (var i in style) {
if (typeof style[i] == "string" && style[i].match(/\$\{\w+\}/)) {
propertyStyles[i] = true;
}
}
this.addPropertyStyles(propertyStyles, style);
// walk through all rules to check for properties in their symbolizer
var rules = this.rules;
var prefixes = OpenLayers.Style.SYMBOLIZER_PREFIXES;
var symbolizer, value;
for (var i=0; i<rules.length; i++) {
for (var s=0; s<prefixes.length; s++) {
style = rules[i].symbolizer[prefixes[s]];
for (var j in style) {
if (typeof style[j] == "string" &&
style[j].match(/\$\{\w+\}/)) {
propertyStyles[j] = true;
var symbolizer = rules[i].symbolizer;
for (var key in symbolizer) {
value = symbolizer[key];
if (typeof value == "object") {
// symbolizer key is "Point", "Line" or "Polygon"
this.addPropertyStyles(propertyStyles, value);
} else {
// symbolizer is a hash of style properties
this.addPropertyStyles(propertyStyles, symbolizer);
break;
}
}
}
return propertyStyles;
},
/**
* Method: addPropertyStyles
*
* Parameters:
* propertyStyles - {Object} hash to add new property styles to. Will be
* modified inline
* symbolizer - {Object} search this symbolizer for property styles
*
* Returns:
* {Object} propertyStyles hash
*/
addPropertyStyles: function(propertyStyles, symbolizer) {
var property;
for (var key in symbolizer) {
property = symbolizer[key];
if (typeof property == "string" &&
property.match(/\$\{\w+\}/)) {
propertyStyles[key] = true;
}
}
return propertyStyles;
},

26
lib/OpenLayers/StyleMap.js
View File

@@ -111,5 +111,31 @@ OpenLayers.StyleMap = OpenLayers.Class({
this.styles[intent].createSymbolizer(feature));
},
/**
* Method: addUniqueValueRules
* Convenience method to create comparison rules for unique values of a
* property. The rules will be added to the style object for a specified
* rendering intent. This method is a shortcut for creating something like
* the "unique value legends" familiar from well known desktop GIS systems
*
* Parameters:
* renderIntent - {String} rendering intent to add the rules to
* property - {String} values of feature attributes to create the
* rules for
* symbolizers - {Object} Hash of symbolizers, keyed by the desired
* property values
*/
addUniqueValueRules: function(renderIntent, property, symbolizers) {
var rules = [];
for (var value in symbolizers) {
rules.push(new OpenLayers.Rule.Comparison({
type: OpenLayers.Rule.Comparison.EQUAL_TO,
property: property,
value: value,
symbolizer: symbolizers[value]}));
}
this.styles[renderIntent].addRules(rules);
},
CLASS_NAME: "OpenLayers.StyleMap"
});

7
tests/Rule/test_Comparison.html
View File

@@ -38,7 +38,7 @@
}
function test_Comparison_evaluate(t) {
t.plan(3);
t.plan(4);
var rule = new OpenLayers.Rule.Comparison({
property: "area",
@@ -62,6 +62,11 @@
t.eq(result, ruleResults[i], "feature "+i+
" evaluates to "+result.toString()+" correctly.");
}
rule.context = {
area: 4998
}
var result = rule.evaluate();
t.eq(result, true, "evaluation against custom rule context works.");
}
</script>
</head>

36
tests/test_Style.html
View File

@@ -116,19 +116,41 @@
function test_Style_context(t) {
t.plan(1);
var context = {
foo: "bar",
size: 10};
var rule = new OpenLayers.Rule.Comparison({
type: OpenLayers.Rule.Comparison.LESS_THAN,
context: context,
property: "size",
value: 11,
symbolizer: {"Point": {externalGraphic: "${foo}.png"}}});
symbolizer: {"Point": {externalGraphic: "${img1}"}}});
var style = new OpenLayers.Style();
style.context = {
"img1": "myImage.png"
};
style.addRules([rule]);
var styleHash = style.createSymbolizer(new OpenLayers.Feature.Vector());
t.eq(styleHash.externalGraphic, "bar.png", "correctly evaluated rule against a custom context");
var feature = new OpenLayers.Feature.Vector();
feature.attributes = {size: 10};
var styleHash = style.createSymbolizer(feature);
t.eq(styleHash.externalGraphic, "myImage.png", "correctly evaluated rule and calculated property styles from a custom context");
}
function test_Style_findPropertyStyles(t) {
t.plan(4);
var rule1 = new OpenLayers.Rule({symbolizer: {
pointRadius: 3,
externalGraphic: "${foo}.bar"
}});
var rule2 = new OpenLayers.Rule({symbolizer: {"Point": {
strokeWidth: "${foo}"
}}});
var style = new OpenLayers.Style({
strokeOpacity: 1,
strokeColor: "${foo}"
});
style.addRules([rule1, rule2]);
var propertyStyles = style.findPropertyStyles();
t.ok(propertyStyles.externalGraphic, "detected externalGraphic from rule correctly");
t.ok(propertyStyles.strokeWidth, "detected strokeWidth from Point symbolizer correctly");
t.ok(propertyStyles.strokeColor, "detected strokeColor from style correctly");
t.eq(typeof propertyStyles.pointRadius, "undefined", "correctly detected pointRadius as non-property style");
}
function test_Style_destroy(t) {