Changeset 7634

Timestamp:

07/31/08 13:02:10 (4 months ago)

Author:

ahocevar

Message:

added new graphicName symbolizer property, which allows to render well-known graphic symbols named "square", "cross", "x" and "triangle", in addition to the existing "circle". Thanks Tim for the tweaks and the example. r=tschaub,elemoine (closes #1398)

Files:

• trunk/openlayers/examples/graphic-name.html (added)
• trunk/openlayers/examples/tasmania/TasmaniaCities.xml (modified) (1 diff)
• trunk/openlayers/examples/tasmania/sld-tasmania.xml (modified) (2 diffs)
• trunk/openlayers/examples/vector-features.html (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Feature/Vector.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Format/SLD/v1.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Renderer/Elements.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Renderer/SVG.js (modified) (8 diffs)
• trunk/openlayers/lib/OpenLayers/Renderer/VML.js (modified) (7 diffs)
• trunk/openlayers/tests/Renderer/SVG.html (modified) (1 diff)
• trunk/openlayers/tests/Renderer/VML.html (modified) (1 diff)

trunk/openlayers/examples/tasmania/TasmaniaCities.xml

@@ -24 +24 @@
-    </topp:tasmania_cities>
-  </gml:featureMember>
+  <gml:featureMember>
+    <topp:tasmania_cities fid="tasmania_cities.2">
+      <topp:the_geom>
+        <gml:MultiPoint srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
+          <gml:pointMember>
+            <gml:Point>
+              <gml:coordinates xmlns:gml="http://www.opengis.net/gml" decimal="." cs="," ts=" ">147,-41.1</gml:coordinates>
+            </gml:Point>
+          </gml:pointMember>
+        </gml:MultiPoint>
+      </topp:the_geom>
+      <topp:CNTRY_NAME>Australia</topp:CNTRY_NAME>
+    </topp:tasmania_cities>
+  </gml:featureMember>
-</wfs:FeatureCollection>

trunk/openlayers/examples/tasmania/sld-tasmania.xml

@@ -529 +529 @@
-      <sld:FeatureTypeStyle>
-        <sld:Rule>
+          <ogc:Filter>
+            <ogc:FeatureId fid="tasmania_cities.1"/>
+          </ogc:Filter>
-          <sld:PointSymbolizer>
-            <sld:Graphic>
@@ -535 +538 @@
-                <sld:Format>image/png</sld:Format>
-              </sld:ExternalGraphic>
-
+
+
+
+
+
+
+
+
+
+
+
+
-              <sld:Size>10</sld:Size>
-            </sld:Graphic>

trunk/openlayers/examples/vector-features.html

@@ -27 +27 @@
-            style_blue.strokeColor = "blue";
-            style_blue.fillColor = "blue";
+            style_blue.graphicName = "star";
+            style_blue.pointRadius = 10;
+            style_blue.strokeWidth = 3;
+            style_blue.rotation = 45;
+            style_blue.strokeLinecap = "butt";
-
-            /*

trunk/openlayers/lib/OpenLayers/Feature/Vector.js

@@ -324 +324 @@
- *  - graphicWidth,
- *  - graphicHeight,
-
-
-
+
+
+
+
- *  - display
- */ 

trunk/openlayers/lib/OpenLayers/Format/SLD/v1.js

@@ -53 +53 @@
-        strokeOpacity: 1,
-        strokeWidth: 1,
-
+
+
-    },
-    

trunk/openlayers/lib/OpenLayers/Renderer/Elements.js

@@ -372 +372 @@
-        return node;
-    },
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    CLASS_NAME: "OpenLayers.Renderer.Elements"
-});
+
+
+/**
+ * Constant: OpenLayers.Renderer.symbol
+ * Coordinate arrays for well known (named) symbols.
+ */
+OpenLayers.Renderer.symbol = {
+    "star": [350,75, 379,161, 469,161, 397,215, 423,301, 350,250, 277,301,
+            303,215, 231,161, 321,161, 350,75],
+    "cross": [4,0, 6,0, 6,4, 10,4, 10,6, 6,6, 6,10, 4,10, 4,6, 0,6, 0,4, 4,4,
+            4,0],
+    "x": [0,0, 25,0, 50,35, 75,0, 100,0, 65,50, 100,100, 75,100, 50,65, 25,100, 0,100, 35,50, 0,0],
+    "square": [0,0, 0,1, 1,1, 1,0, 0,0],
+    "triangle": [0,10, 10,10, 5,0, 0,10]
+}

trunk/openlayers/lib/OpenLayers/Renderer/SVG.js

@@ -20 +20 @@
-     */
-    xmlns: "http://www.w3.org/2000/svg",
+    
+    /**
+     * Property: xlinkns
+     * {String}
+     */
+    xlinkns: "http://www.w3.org/1999/xlink",
-
-    /**
@@ -34 +40 @@
-     */
-    localResolution: null,
+    
+    /**
+     * Property: symbolSize
+     * {Object} Cache for symbol sizes according to their svg coordinate space
+     */
+    symbolSize: {},
-
-    /**
@@ -155 +167 @@
-        switch (geometry.CLASS_NAME) {
-            case "OpenLayers.Geometry.Point":
-
+
+
+
+
+
+
+
-                break;
-            case "OpenLayers.Geometry.Rectangle":
@@ -195 +213 @@
-        options = options || node._options;
-        var r = parseFloat(node.getAttributeNS(null, "r"));
+        var widthFactor = 1;
+        var pos;
-        if (node._geometryClass == "OpenLayers.Geometry.Point" && r) {
-            if (style.externalGraphic) {
-
-
+
-                
-                if (style.graphicWidth && style.graphicHeight) {
@@ -214 +233 @@
-                var opacity = style.graphicOpacity || style.fillOpacity;
-                
-
-
+pos.
+pos.
-                node.setAttributeNS(null, "width", width);
-                node.setAttributeNS(null, "height", height);
-"http://www.w3.org/1999/xlink"
+this.xlinkns
-                node.setAttributeNS(null, "style", "opacity: "+opacity);
+            } else if (this.isComplexSymbol(style.graphicName)) {
+                // the symbol viewBox is three times as large as the symbol
+                var offset = style.pointRadius * 3;
+                var size = offset * 2;
+                var id = this.importSymbol(style.graphicName);
+                pos = this.getPosition(node);
+                widthFactor = this.symbolSize[id] / size;
+                node.setAttributeNS(this.xlinkns, "href", "#" + id);
+                node.setAttributeNS(null, "width", size);
+                node.setAttributeNS(null, "height", size);
+                node.setAttributeNS(null, "x", pos.x - offset);
+                node.setAttributeNS(null, "y", pos.y - offset);
-            } else {
-                node.setAttributeNS(null, "r", style.pointRadius);
-            }
-
-
+ && pos
-                var rotation = OpenLayers.String.format(
-x, 
+pos.x, pos.
-                node.setAttributeNS(null, "transform", rotation);
-            }
@@ -241 +272 @@
-            node.setAttributeNS(null, "stroke", style.strokeColor);
-            node.setAttributeNS(null, "stroke-opacity", style.strokeOpacity);
-
+ * widthFactor
-            node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap);
-        } else {
@@ -307 +338 @@
-    createRoot: function() {
-        return this.nodeFactory(this.container.id + "_root", "g");
+    },
+
+    /**
+     * Method: createDefs
+     *
+     * Returns:
+     * {DOMElement} The element to which we'll add the symbol definitions
+     */
+    createDefs: function() {
+        var defs = this.nodeFactory("ol-renderer-defs", "defs");
+        this.rendererRoot.appendChild(defs);
+        return defs;
-    },
-
@@ -511 +554 @@
-        }
-    },
+    
+    /**
+     * Method: getPosition
+     * Finds the position of an svg node.
+     * 
+     * Parameters:
+     * node - {DOMElement}
+     * 
+     * Returns:
+     * {Object} hash with x and y properties, representing the coordinates
+     *     within the svg coordinate system
+     */
+    getPosition: function(node) {
+        return({
+            x: parseFloat(node.getAttributeNS(null, "cx")),
+            y: parseFloat(node.getAttributeNS(null, "cy"))
+        });
+    },
+
+    /**
+     * Method: importSymbol
+     * add a new symbol definition from the rendererer's symbol hash
+     * 
+     * Parameters:
+     * graphicName - {String} name of the symbol to import
+     * 
+     * Returns:
+     * {String} - id of the imported symbol
+     */      
+    importSymbol: function (graphicName)  {
+        if (!this.defs) {
+            // create svg defs tag
+            this.defs = this.createDefs();
+        }
+        var id = this.container.id + "-" + graphicName;
+        
+        // check if symbol already exists in the defs
+        if (document.getElementById(id) != null) {
+            return id;
+        }
+        
+        var symbol = OpenLayers.Renderer.symbol[graphicName];
+        if (!symbol) {
+            throw new Error(graphicName + ' is not a valid symbol name');
+            return;
+        }
+
+        var symbolNode = this.nodeFactory(id, "symbol");
+        var node = this.nodeFactory(null, "polygon");
+        symbolNode.appendChild(node);
+        var symbolExtent = new OpenLayers.Bounds(
+                                    Number.MAX_VALUE, Number.MAX_VALUE, 0, 0);
+
+        var points = "";
+        var x,y;
+        for (var i=0; i<symbol.length; i=i+2) {
+            x = symbol[i];
+            y = symbol[i+1];
+            symbolExtent.left = Math.min(symbolExtent.left, x);
+            symbolExtent.bottom = Math.min(symbolExtent.bottom, y);
+            symbolExtent.right = Math.max(symbolExtent.right, x);
+            symbolExtent.top = Math.max(symbolExtent.top, y);
+            points += " " + x + "," + y;
+        }
+        
+        node.setAttributeNS(null, "points", points);
+        // Hard-coded linejoin for now, to make it look the same as in VML.
+        // There is no strokeLinejoin property yet for symbolizers.
+        node.setAttributeNS(null, "stroke-linejoin", "round");
+        
+        var width = symbolExtent.getWidth();
+        var height = symbolExtent.getHeight();
+        // create a viewBox three times as large as the symbol itself,
+        // to allow for strokeWidth being displayed correctly at the corners.
+        var viewBox = [symbolExtent.left - width,
+                        symbolExtent.bottom - height, width * 3, height * 3];
+        symbolNode.setAttributeNS(null, "viewBox", viewBox.join(" "));
+        this.symbolSize[id] = Math.max(width, height) * 3;
+        
+        this.defs.appendChild(symbolNode);
+        return symbolNode.id;
+    },
-
-    CLASS_NAME: "OpenLayers.Renderer.SVG"

trunk/openlayers/lib/OpenLayers/Renderer/VML.js

@@ -26 +26 @@
-     */
-    xmlns: "urn:schemas-microsoft-com:vml",
+    
+    /**
+     * Property: symbolCache
+     * {DOMElement} node holding symbols. This hash is keyed by symbol name,
+     *     and each value is a hash with a "path" and an "extent" property.
+     */
+    symbolCache: {},
-
-    /**
@@ -124 +131 @@
-        switch (geometry.CLASS_NAME) {
-            case "OpenLayers.Geometry.Point":
-
+
+
+
+
+
+
+
-                break;
-            case "OpenLayers.Geometry.Rectangle":
@@ -157 +170 @@
-        style = style  || node._style;
-        options = options || node._options;
+        var widthFactor = 1;
-        
-        if (node._geometryClass == "OpenLayers.Geometry.Point") {
@@ -180 +194 @@
-                style.fillColor = "none";
-                options.isStroked = false;
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-            } else {
-                this.drawCircle(node, geometry, style.pointRadius);
@@ -218 +247 @@
-                  fill.aspect = "atmost";
-                }                
-                         
-                // additional rendering for rotated graphics
-                if (style.rotation) {
-                    this.graphicRotate(node, xOffset, yOffset);
-                    // make the fill fully transparent, because we now have
-                    // the graphic as imagedata element. We cannot just remove
-                    // the fill, because this is part of the hack described
-                    // in graphicRotate
-                    fill.setAttribute("opacity", 0);
-                }
-            }
-            if (fill.parentNode != node) {
@@ -234 +253 @@
-        }
-
+        // additional rendering for rotated graphics or symbols
+        if (style.rotation) {
+            if (style.externalGraphic) {
+                this.graphicRotate(node, xOffset, yOffset);
+                // make the fill fully transparent, because we now have
+                // the graphic as imagedata element. We cannot just remove
+                // the fill, because this is part of the hack described
+                // in graphicRotate
+                fill.setAttribute("opacity", 0);
+            } else {
+                node.style.rotation = style.rotation;
+            }
+        }
-
-        // stroke 
@@ -695 +727 @@
-        node.path = path.join("");
-    },
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    CLASS_NAME: "OpenLayers.Renderer.VML"
-});

trunk/openlayers/tests/Renderer/SVG.html

@@ -372 +372 @@
-    }
-    
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-  </script>
-</head>

trunk/openlayers/tests/Renderer/VML.html

@@ -339 +339 @@
-    }
-    
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-  </script>
-</head>