* added stroke, fill and graphic symbolizer properties (all boolean) to

control whether or not to render a stroke, fill and graphic. * added a defaultsPerSymbolizer property to OpenLayers.Style to allow for extending incomplete symbolizers with defaults for stroke, fill or graphic. This also makes Format.SLD read/write round trips possible without modifying empty or incomplete <Stroke/>, <Fill/> and <Graphic/> constructs. r=tschaub (closes #1876) git-svn-id: http://svn.openlayers.org/trunk/openlayers@9278 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2009-04-13 13:35:13 +00:00
parent 13e42ec59b
commit 2aa7f22926
7 changed files with 327 additions and 45 deletions
--- a/examples/symbolizers-fill-stroke-graphic.html
+++ b/examples/symbolizers-fill-stroke-graphic.html
@@ -0,0 +1,122 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers Fill, Stroke, and Graphic Example</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" type="text/javascript"></script>
+    <script type="text/javascript">
+        var map;
+
+        function init() {
+            map = new OpenLayers.Map('map');
+            
+            var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+            map.addLayer(layer);
+            
+            // allow testing of specific renderers via "?renderer=Canvas", etc
+            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+            
+            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
+                styleMap: new OpenLayers.StyleMap({
+                    'default': new OpenLayers.Style(null, {
+                        rules: [
+                            new OpenLayers.Rule({
+                                symbolizer: {
+                                    graphic: false,
+                                    label: "Label for invisible point"
+                                },
+                                filter: new OpenLayers.Filter.Comparison({
+                                    type: "==",
+                                    property: "topic",
+                                    value: "point_invisible"
+                                })
+                            }),
+                            new OpenLayers.Rule({
+                                symbolizer: {
+                                    stroke: true,
+                                    fill: true,
+                                    label: "Polygon with stroke and fill defaults"
+                                },
+                                filter: new OpenLayers.Filter.Comparison({
+                                    type: "==",
+                                    property: "topic",
+                                    value: "polygon_defaults"
+                                })
+                            }),
+                            new OpenLayers.Rule({
+                                symbolizer: {
+                                    stroke: true,
+                                    fill: false,
+                                    label: "Point without fill",
+                                    labelAlign: "rb"
+                                },
+                                filter: new OpenLayers.Filter.Comparison({
+                                    type: "==",
+                                    property: "topic",
+                                    value: "point_nofill"
+                                })
+                            })
+                        ]
+                    })
+                }),
+                renderers: renderer
+            });
+            
+            // create a point feature
+            var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
+            var pointFeature = new OpenLayers.Feature.Vector(point);
+            pointFeature.attributes = {
+                topic: "point_invisible"
+            };
+            
+            // create a polygon feature from a linear ring of points
+            var pointList = [];
+            for(var p=0; p<6; ++p) {
+                var a = p * (2 * Math.PI) / 7;
+                var r = Math.random(1) + 1;
+                var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
+                                                             point.y + 5 + (r * Math.sin(a)));
+                pointList.push(newPoint);
+            }
+            pointList.push(pointList[0]);
+            
+            var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
+            var polygonFeature = new OpenLayers.Feature.Vector(
+                new OpenLayers.Geometry.Polygon([linearRing]));
+            polygonFeature.attributes = {
+                topic: "polygon_defaults"
+            };
+            
+            multiFeature = new OpenLayers.Feature.Vector(
+                new OpenLayers.Geometry.Collection([
+                    new OpenLayers.Geometry.LineString([
+                        new OpenLayers.Geometry.Point(-105,40),
+                        new OpenLayers.Geometry.Point(-95,45)
+                    ]),
+                    new OpenLayers.Geometry.Point(-105, 40)
+                ]),
+                {
+                    topic: "point_nofill"
+                });
+            
+            map.addLayer(vectorLayer);
+            vectorLayer.drawFeature(multiFeature);
+            map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
+            vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">OpenLayers Example</h1>
+    <div id="tags"></div>
+    <p id="shortdesc">
+        Demonstrate fill, stroke, and graphic property of symbolizers.
+    </p>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+    This example shows how to use symbolizers with defaults for stroke, fill, and graphic.
+    </div>
+  </body>
+</html>
--- a/lib/OpenLayers/Format/SLD/v1.js
+++ b/lib/OpenLayers/Format/SLD/v1.js
@@ -137,7 +137,7 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
                );
            },
            "UserStyle": function(node, layer) {
-                var obj = {rules: []};
+                var obj = {defaultsPerSymbolizer: true, rules: []};
                this.readChildNodes(node, obj);
                var style = new OpenLayers.Style(this.defaultSymbolizer, obj);
                layer.userStyles.push(style);
@@ -232,9 +232,11 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
                rule.symbolizer["Point"] = symbolizer;
            },
            "Stroke": function(node, symbolizer) {
+                symbolizer.stroke = true;
                this.readChildNodes(node, symbolizer);
            },
            "Fill": function(node, symbolizer) {
+                symbolizer.fill = true;
                this.readChildNodes(node, symbolizer);
            },
            "CssParameter": function(node, symbolizer) {
@@ -250,6 +252,7 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
                }
            },
            "Graphic": function(node, symbolizer) {
+                symbolizer.graphic = true;
                var graphic = {};
                // painter's order not respected here, clobber previous with next
                this.readChildNodes(node, graphic);
--- a/lib/OpenLayers/Renderer/Canvas.js
+++ b/lib/OpenLayers/Renderer/Canvas.js
@@ -244,21 +244,27 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
     * style    - {Object}
     */ 
    drawPoint: function(geometry, style) {
-        var pt = this.getLocalXY(geometry);
-        
-        if (style.externalGraphic) {
-            this.drawExternalGraphic(pt, style);
-        } else {
-            this.setCanvasStyle("fill", style);
-            this.canvas.beginPath();
-            this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
-            this.canvas.fill();
+        if(style.graphic !== false) {
+            var pt = this.getLocalXY(geometry);
            
-            this.setCanvasStyle("stroke", style);
-            this.canvas.beginPath();
-            this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
-            this.canvas.stroke();
-            this.setCanvasStyle("reset");
+            if (style.externalGraphic) {
+                this.drawExternalGraphic(pt, style);
+            } else {
+                if(style.fill !== false) {
+                    this.setCanvasStyle("fill", style);
+                    this.canvas.beginPath();
+                    this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
+                    this.canvas.fill();
+                }
+                
+                if(style.stroke !== false) {
+                    this.setCanvasStyle("stroke", style);
+                    this.canvas.beginPath();
+                    this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
+                    this.canvas.stroke();
+                    this.setCanvasStyle("reset");
+                }
+            }
        }
    },

@@ -271,15 +277,17 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
     * style    - {Object}
     */ 
    drawLineString: function(geometry, style) {
-        this.setCanvasStyle("stroke", style);
-        this.canvas.beginPath();
-        var start = this.getLocalXY(geometry.components[0]);
-        this.canvas.moveTo(start[0], start[1]);
-        for(var i = 1; i < geometry.components.length; i++) {
-            var pt = this.getLocalXY(geometry.components[i]);
-            this.canvas.lineTo(pt[0], pt[1]);
+        if(style.stroke !== false) {
+            this.setCanvasStyle("stroke", style);
+            this.canvas.beginPath();
+            var start = this.getLocalXY(geometry.components[0]);
+            this.canvas.moveTo(start[0], start[1]);
+            for(var i = 1; i < geometry.components.length; i++) {
+                var pt = this.getLocalXY(geometry.components[i]);
+                this.canvas.lineTo(pt[0], pt[1]);
+            }
+            this.canvas.stroke();
        }
-        this.canvas.stroke();
        this.setCanvasStyle("reset");
    },    
    
@@ -292,26 +300,30 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
     * style    - {Object}
     */ 
    drawLinearRing: function(geometry, style) {
-        this.setCanvasStyle("fill", style);
-        this.canvas.beginPath();
-        var start = this.getLocalXY(geometry.components[0]);
-        this.canvas.moveTo(start[0], start[1]);
-        for(var i = 1; i < geometry.components.length - 1 ; i++) {
-            var pt = this.getLocalXY(geometry.components[i]);
-            this.canvas.lineTo(pt[0], pt[1]);
+        if(style.fill !== false) {
+            this.setCanvasStyle("fill", style);
+            this.canvas.beginPath();
+            var start = this.getLocalXY(geometry.components[0]);
+            this.canvas.moveTo(start[0], start[1]);
+            for(var i = 1; i < geometry.components.length - 1 ; i++) {
+                var pt = this.getLocalXY(geometry.components[i]);
+                this.canvas.lineTo(pt[0], pt[1]);
+            }
+            this.canvas.fill();
        }
-        this.canvas.fill();
        
-        var oldWidth = this.canvas.lineWidth; 
-        this.setCanvasStyle("stroke", style);
-        this.canvas.beginPath();
-        var start = this.getLocalXY(geometry.components[0]);
-        this.canvas.moveTo(start[0], start[1]);
-        for(var i = 1; i < geometry.components.length; i++) {
-            var pt = this.getLocalXY(geometry.components[i]);
-            this.canvas.lineTo(pt[0], pt[1]);
+        if(style.stroke !== false) {
+            var oldWidth = this.canvas.lineWidth; 
+            this.setCanvasStyle("stroke", style);
+            this.canvas.beginPath();
+            var start = this.getLocalXY(geometry.components[0]);
+            this.canvas.moveTo(start[0], start[1]);
+            for(var i = 1; i < geometry.components.length; i++) {
+                var pt = this.getLocalXY(geometry.components[i]);
+                this.canvas.lineTo(pt[0], pt[1]);
+            }
+            this.canvas.stroke();
        }
-        this.canvas.stroke();
        this.setCanvasStyle("reset");
    },    
    
@@ -345,6 +357,10 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
     * style    - {Object}
     */
    drawText: function(location, style) {
+        style = OpenLayers.Util.extend({
+            fontColor: "#000000",
+            labelAlign: "cm"
+        }, style);
        var pt = this.getLocalXY(location);
        
        this.setCanvasStyle("reset");
--- a/lib/OpenLayers/Renderer/Elements.js
+++ b/lib/OpenLayers/Renderer/Elements.js
@@ -661,12 +661,20 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
        OpenLayers.Util.applyDefaults(style, this.minimumSymbolizer);

        var options = {
-            'isFilled': true,
-            'isStroked': !!style.strokeWidth
+            'isFilled': style.fill === undefined ?
+                true :
+                style.fill,
+            'isStroked': style.stroke === undefined ?
+                !!style.strokeWidth :
+                style.stroke
        };
        var drawn;
        switch (geometry.CLASS_NAME) {
            case "OpenLayers.Geometry.Point":
+                if(style.graphic === false) {
+                    options.isFilled = false;
+                    options.isStroked = false;
+                }
                drawn = this.drawPoint(node, geometry);
                break;
            case "OpenLayers.Geometry.LineString":
--- a/lib/OpenLayers/Renderer/SVG.js
+++ b/lib/OpenLayers/Renderer/SVG.js
@@ -254,7 +254,10 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
        var widthFactor = 1;
        var pos;
        if (node._geometryClass == "OpenLayers.Geometry.Point" && r) {
-            if (style.externalGraphic) {
+            node.style.visibility = "";
+            if (style.graphic === false) {
+                node.style.visibility = "hidden";
+            } else if (style.externalGraphic) {
                pos = this.getPosition(node);
                
        		if (style.graphicTitle) {
--- a/lib/OpenLayers/Style.js
+++ b/lib/OpenLayers/Style.js
@@ -64,10 +64,21 @@ OpenLayers.Style = OpenLayers.Class({
     * Property: defaultStyle
     * {Object} hash of style properties to use as default for merging
     * rule-based style symbolizers onto. If no rules are defined,
-     * createSymbolizer will return this style.
+     * createSymbolizer will return this style. If <defaultsPerSymbolizer> is set to
+     * true, the defaultStyle will only be taken into account if there are
+     * rules defined.
     */
    defaultStyle: null,
    
+    /**
+     * Property: defaultsPerSymbolizer
+     * {Boolean} If set to true, the <defaultStyle> will extend the symbolizer
+     * of every rule. Properties of the <defaultStyle> will also be used to set
+     * missing symbolizer properties if the symbolizer has stroke, fill or
+     * graphic set to true. Default is false.
+     */
+    defaultsPerSymbolizer: false,
+    
    /**
     * Property: propertyStyles
     * {Hash of Boolean} cache of style properties that need to be parsed for
@@ -135,7 +146,7 @@ OpenLayers.Style = OpenLayers.Class({
     * {Object} symbolizer hash
     */
    createSymbolizer: function(feature) {
-        var style = this.createLiterals(
+        var style = this.defaultsPerSymbolizer ? {} : this.createLiterals(
            OpenLayers.Util.extend({}, this.defaultStyle), feature);
        
        var rules = this.rules;
@@ -191,6 +202,40 @@ OpenLayers.Style = OpenLayers.Class({
                OpenLayers.Style.SYMBOLIZER_PREFIXES[0];

        var symbolizer = rule.symbolizer[symbolizerPrefix] || rule.symbolizer;
+        
+        if(this.defaultsPerSymbolizer === true) {
+            var defaults = this.defaultStyle;
+            OpenLayers.Util.applyDefaults(symbolizer, {
+                pointRadius: defaults.pointRadius
+            })
+            if(symbolizer.stroke === true || symbolizer.graphic === true) {
+                OpenLayers.Util.applyDefaults(symbolizer, {
+                    strokeWidth: defaults.strokeWidth,
+                    strokeColor: defaults.strokeColor,
+                    strokeOpacity: defaults.strokeOpacity,
+                    strokeDashstyle: defaults.strokeDashstyle,
+                    strokeLinecap: defaults.strokeLinecap
+                });
+            }
+            if(symbolizer.fill === true || symbolizer.graphic === true) {
+                OpenLayers.Util.applyDefaults(symbolizer, {
+                    fillColor: defaults.fillColor,
+                    fillOpacity: defaults.fillOpacity
+                });
+            }
+            if(symbolizer.graphic === true) {
+                OpenLayers.Util.applyDefaults(symbolizer, {
+                    pointRadius: this.defaultStyle.pointRadius,
+                    externalGraphic: this.defaultStyle.externalGraphic,
+                    graphicName: this.defaultStyle.graphicName,
+                    graphicOpacity: this.defaultStyle.graphicOpacity,
+                    graphicWidth: this.defaultStyle.graphicWidth,
+                    graphicHeight: this.defaultStyle.graphicHeight,
+                    graphicXOffset: this.defaultStyle.graphicXOffset,
+                    graphicYOffset: this.defaultStyle.graphicYOffset
+                });
+            }
+        }

        // merge the style with the current style
        return this.createLiterals(
--- a/tests/Style.html
+++ b/tests/Style.html
@@ -151,6 +151,91 @@
        style.createSymbolizer(new OpenLayers.Feature.Vector());
    }
    
+    function test_Style_applySymbolizer(t) {
+        t.plan(15);
+
+        var feature = new OpenLayers.Feature.Vector();
+        var defaults = OpenLayers.Feature.Vector.style["default"];
+        var style, symbolizer;
+
+        style = new OpenLayers.Style();
+        symbolizer = style.createSymbolizer(feature);
+        t.eq(symbolizer.pointRadius, defaults.pointRadius, "symbolizer has the correct pointRadius");
+        t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
+        t.eq(symbolizer.fillColor, defaults.fillColor, "symbolizer has the correct fillColor");
+        t.eq(symbolizer.graphicName, defaults.graphicName, "symbolizer has the correct graphicName");
+
+        style = new OpenLayers.Style(null, {
+            defaultsPerSymbolizer: true,
+            rules: [
+                new OpenLayers.Rule({
+                    symbolizer: {
+                        stroke: true
+                    }
+                })
+            ]
+        });
+        symbolizer = style.createSymbolizer(feature);
+        t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
+        t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
+
+        style = new OpenLayers.Style(null, {
+            defaultsPerSymbolizer: true,
+            rules: [
+                new OpenLayers.Rule({
+                    symbolizer: {
+                    }
+                })
+            ]
+        });
+        symbolizer = style.createSymbolizer(feature);
+        t.eq(symbolizer.pointRadius, defaults.pointRadius, "symbolizer has the correct pointRadius");
+        t.ok(symbolizer.strokeWidth == undefined, "strokeWidth is undefined");
+        t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
+        t.ok(symbolizer.graphicName == undefined, "graphicName is undefined");
+
+        style = new OpenLayers.Style(null, {
+            defaultsPerSymbolizer: true,
+            rules: [
+                new OpenLayers.Rule({
+                    symbolizer: {
+                        stroke: true
+                    }
+                })
+            ]
+        });
+        symbolizer = style.createSymbolizer(feature);
+        t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
+        t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
+
+        style = new OpenLayers.Style(null, {
+            defaultsPerSymbolizer: true,
+            rules: [
+                new OpenLayers.Rule({
+                    symbolizer: {
+                        fill: true
+                    }
+                })
+            ]
+        });
+        symbolizer = style.createSymbolizer(feature);
+        t.eq(symbolizer.fillColor, defaults.fillColor, "symbolizer has the correct fillColor");
+        t.ok(symbolizer.strokeWidth == undefined, "strokeWidth is undefined");
+
+        style = new OpenLayers.Style(null, {
+            defaultsPerSymbolizer: true,
+            rules: [
+                new OpenLayers.Rule({
+                    symbolizer: {
+                        graphic: true
+                    }
+                })
+            ]
+        });
+        symbolizer = style.createSymbolizer(feature);
+        t.eq(symbolizer.graphicName, defaults.graphicName, "symbolizer has the correct graphicName");
+    }
+    
    function test_Style_context(t) {
        t.plan(2);
        var rule = new OpenLayers.Rule({