Add support for the extremely awesomely super-comprehensive rule based styling
that Andreas has been working so hard on. I think this is the single most awesome commit I've ever had the pleasure of committing. The results of this commit are described on http://trac.openlayers.org/wiki/Styles: essentially, this makes it possible to style features in all kinds of fun ways based on rules, and will also form the underlying basis for #533. Things this patch adds: * OL.Rule classes. These classes allow you to do tests against the propertie of a feature, and set a style based on these properties -- so you can compare the 'speedlimit' property of a line, and test if it is > 60, and if it is greater than 60, render it in a different color. You can also test combinations of rules using the OL.Rule.Logical class, and test featureids with the FeatureID class. * OL.Style class: The OL.Style class lets you wrap up Rules into styles that can be used with drawFeature to draw the feature in the selected style. * OL.Layer.Vector.drawFeature will check if the given style is an OL.Style object, and if so, it will draw the feature accordingly. examples/georss-flickr.html shows usage of these classes. Many, many thanks go to Andreas for all his hard work on this: this code really is very pretty, and includes unit tests for all the classes (and we know that I am a big fan of tests.) Three cheers for Andreas: Hip hip, hooray! hip hip, hooray! hip hip, hooray! git-svn-id: http://svn.openlayers.org/trunk/openlayers@5429 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
function test_Style_constructor(t) {
|
||||
t.plan(3);
|
||||
|
||||
var options = {'foo': 'bar'};
|
||||
var style = new OpenLayers.Style(null, options);
|
||||
t.ok(style instanceof OpenLayers.Style,
|
||||
"new OpenLayers.Style returns object" );
|
||||
t.eq(style.foo, "bar", "constructor sets options correctly");
|
||||
t.eq(typeof style.createStyle, "function", "style has a createStyle function");
|
||||
}
|
||||
|
||||
function test_Style_create(t) {
|
||||
t.plan(5);
|
||||
|
||||
var map = new OpenLayers.Map("map");
|
||||
|
||||
var layer = new OpenLayers.Layer.Vector("layer");
|
||||
|
||||
var baseStyle = {externalGraphic: "bar${foo}.png"};
|
||||
|
||||
var style = new OpenLayers.Style(baseStyle);
|
||||
|
||||
var rule = new OpenLayers.Rule.FeatureId({
|
||||
fids: ["1"],
|
||||
symbolizer: {"Point": {fillColor: "green"}},
|
||||
maxScale: 2000000});
|
||||
style.addRules([rule]);
|
||||
|
||||
var feature = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(3,5),
|
||||
{"foo": "bar"},
|
||||
style);
|
||||
|
||||
feature.fid = "1";
|
||||
// for this fid, the above rule should apply
|
||||
|
||||
layer.addFeatures([feature]);
|
||||
map.addLayer(layer);
|
||||
map.setBaseLayer(layer);
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(3,5), 8);
|
||||
// at this scale, the feature should be visible
|
||||
var createdStyle = style.createStyle(feature);
|
||||
t.eq(createdStyle.externalGraphic, "barbar.png", "Calculated property style correctly.");
|
||||
t.eq(createdStyle.display, "", "Feature is visible at scale "+map.getScale());
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(3,5), 7);
|
||||
// at this scale, the feature should be invisible
|
||||
createdStyle = style.createStyle(feature);
|
||||
t.eq(createdStyle.display, "none", "Feature is invisible at scale "+map.getScale());
|
||||
t.eq(createdStyle.fillColor, "green", "Point symbolizer from rule for fid=\"1\" applied correctly.");
|
||||
|
||||
feature.fid = "2";
|
||||
// now the rule should not apply
|
||||
|
||||
createdStyle = style.createStyle(feature);
|
||||
t.eq(createdStyle.fillColor, undefined, "Correct style for rule that does not apply to fid=\"2\".");
|
||||
|
||||
}
|
||||
|
||||
function test_Style_destroy(t) {
|
||||
t.plan(1);
|
||||
|
||||
var style = new OpenLayers.Style();
|
||||
style.destroy();
|
||||
t.eq(style.rules, null, "rules array nulled properly");
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width:500px;height:500px"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user