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
@@ -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>
@@ -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);
 }