Adding an example of rule based style.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10143 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2010-03-24 18:27:57 +00:00
parent 3de62b703a
commit e7d3e64908
2 changed files with 142 additions and 0 deletions
--- a/examples/style-rules.html
+++ b/examples/style-rules.html
@@ -0,0 +1,43 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers Rule Based Style</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="style-rules.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Rule Based Style</h1>
+        
+        <p id="shortdesc">
+            Use rule based styling to use different symbolizers for different
+            feature groups.
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+        
+        <div id="docs">
+            <p>
+                This example uses four rules to render features.  Rules are
+                based on a feature attribute and determine which symbolizer
+                is applied when rendering a feature.  The rules in this example
+                change which marker is used by providing an externalGraphic
+                property in the symbolizer.
+            </p>
+                The features are labeled with the same attribute that determines
+                the symbolizer used.  You should be able to confirm that the
+                graphic color corresponds to the range of numbers given below.
+            </p>
+            <ul>
+                <li>0 &lt;= blue &lt; 25
+                <li>25 &lt;= green &lt; 50
+                <li>50 &lt;= gold &lt;= 75
+                <li>75 &lt; red &lt;= 100
+            </ul>
+            <p>
+                See the <a href="style-rules.js" target="_blank">
+                style-rules.js source</a> to see how this is done.
+            </p>
+        </div>
+    </body>
+</html>
--- a/examples/style-rules.js
+++ b/examples/style-rules.js
@@ -0,0 +1,99 @@
+var map;
+
+function init() {
+    map = new OpenLayers.Map("map");
+
+    var wms = new OpenLayers.Layer.WMS(
+        "OpenLayers WMS",
+        "http://labs.metacarta.com/wms/vmap0",
+        {layers: "basic"}
+    );
+    
+    /**
+     * Create 50 vector features.  Your features would typically be fetched
+     * from the server.  These are created here to demonstrate a rule based
+     * style.  The features are given an attribute named "foo".  The value
+     * of this attribute is an integer that ranges from 0 to 100.
+     */   
+    var features = new Array(25);
+    for (var i=0; i<features.length; i++) {
+        features[i] = new OpenLayers.Feature.Vector(
+            new OpenLayers.Geometry.Point(
+                (340 * Math.random()) - 170,
+                (160 * Math.random()) - 80
+            ), {
+                foo: 100 * Math.random() | 0
+            }
+        );
+    }
+    
+    /**
+     * Here we create a new style object with rules that determine
+     * which symbolizer will be used to render each feature.
+     */
+    var style = new OpenLayers.Style(
+        // the first argument is a base symbolizer
+        // all other symbolizers in rules will extend this one
+        {
+            graphicWidth: 21,
+            graphicHeight: 25,
+            graphicYOffset: -28, // shift graphic up 28 pixels
+            label: "${foo}" // label will be foo attribute value
+        },
+        // the second argument will include all rules
+        {
+            rules: [
+                new OpenLayers.Rule({
+                    // a rule contains an optional filter
+                    filter: new OpenLayers.Filter.Comparison({
+                        type: OpenLayers.Filter.Comparison.LESS_THAN,
+                        property: "foo", // the "foo" feature attribute
+                        value: 25
+                    }),
+                    // if a feature matches the above filter, use this symbolizer
+                    symbolizer: {
+                        externalGraphic: "../img/marker-blue.png"
+                    }
+                }),
+                new OpenLayers.Rule({
+                    filter: new OpenLayers.Filter.Comparison({
+                        type: OpenLayers.Filter.Comparison.BETWEEN,
+                        property: "foo",
+                        lowerBoundary: 25,
+                        upperBoundary: 50
+                    }),
+                    symbolizer: {
+                        externalGraphic: "../img/marker-green.png"
+                    }
+                }),
+                new OpenLayers.Rule({
+                    filter: new OpenLayers.Filter.Comparison({
+                        type: OpenLayers.Filter.Comparison.BETWEEN,
+                        property: "foo",
+                        lowerBoundary: 50,
+                        upperBoundary: 75
+                    }),
+                    symbolizer: {
+                        externalGraphic: "../img/marker-gold.png"
+                    }
+                }),
+                new OpenLayers.Rule({
+                    // apply this rule if no others apply
+                    elseFilter: true,
+                    symbolizer: {
+                        externalGraphic: "../img/marker.png"
+                    }
+                })
+            ]
+        }
+    );
+    
+    // create the layer styleMap that uses the above style for all render intents
+    var vector = new OpenLayers.Layer.Vector("Points", {
+        styleMap: new OpenLayers.StyleMap(style)
+    });
+    vector.addFeatures(features);
+
+    map.addLayers([wms, vector]);
+    map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+}