[OpenLayers-Commits] r11616 - in trunk/openlayers: examples lib
lib/OpenLayers/Layer lib/OpenLayers/Renderer tests
tests/Layer tests/Renderer tests/speed
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Sat Mar 5 16:17:05 EST 2011
Author: ahocevar
Date: 2011-03-05 13:17:02 -0800 (Sat, 05 Mar 2011)
New Revision: 11616
Added:
trunk/openlayers/lib/OpenLayers/Renderer/NG.js
trunk/openlayers/lib/OpenLayers/Renderer/SVG2.js
trunk/openlayers/tests/Renderer/SVG2.html
trunk/openlayers/tests/speed/vector-renderers.html
trunk/openlayers/tests/speed/vector-renderers.js
Modified:
trunk/openlayers/examples/marker-shadow.html
trunk/openlayers/examples/ordering.html
trunk/openlayers/examples/snap-split.html
trunk/openlayers/examples/vector-features.html
trunk/openlayers/examples/wfs-states.js
trunk/openlayers/lib/OpenLayers.js
trunk/openlayers/lib/OpenLayers/Layer/Vector.js
trunk/openlayers/tests/Layer/Vector.html
trunk/openlayers/tests/list-tests.html
Log:
New SVG2 renderer for increased performance and smaller library size. Not enabled by default. To use, include 'SVG2' in the renderers array of your OpenLayers.Layer.Vector instance. r=crschmidt (closes #2802)
Modified: trunk/openlayers/examples/marker-shadow.html
===================================================================
--- trunk/openlayers/examples/marker-shadow.html 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/examples/marker-shadow.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -33,6 +33,10 @@
function init() {
map = new OpenLayers.Map("map");
+ // 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;
+
layer = new OpenLayers.Layer.Vector(
"Marker Drop Shadows",
{
@@ -55,7 +59,8 @@
pointRadius: 10
}),
isBaseLayer: true,
- rendererOptions: {yOrdering: true}
+ rendererOptions: {yOrdering: true},
+ renderers: renderer
}
);
Modified: trunk/openlayers/examples/ordering.html
===================================================================
--- trunk/openlayers/examples/ordering.html 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/examples/ordering.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -32,6 +32,10 @@
function initYOrderMap() {
var map = new OpenLayers.Map("yorder");
+ // 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 layer = new OpenLayers.Layer.Vector(
"Y-Order",
{
@@ -41,7 +45,8 @@
graphicZIndex: GOLD_Z_INDEX
}),
isBaseLayer: true,
- rendererOptions: {yOrdering: true}
+ rendererOptions: {yOrdering: true},
+ renderers: renderer
}
);
Modified: trunk/openlayers/examples/snap-split.html
===================================================================
--- trunk/openlayers/examples/snap-split.html 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/examples/snap-split.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -92,6 +92,10 @@
})
});
+ // 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;
+
// create three vector layers
vectors = new OpenLayers.Layer.Vector("Lines", {
isBaseLayer: true,
@@ -103,7 +107,8 @@
styleMap: styles,
maxExtent: new OpenLayers.Bounds(
1549471.9221, 6403610.94, 1550001.32545, 6404015.8
- )
+ ),
+ renderers: renderer
});
map.addLayer(vectors);
Modified: trunk/openlayers/examples/vector-features.html
===================================================================
--- trunk/openlayers/examples/vector-features.html 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/examples/vector-features.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -16,6 +16,10 @@
"http://vmap0.tiles.osgeo.org/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;
+
/*
* Layer style
*/
@@ -68,7 +72,10 @@
// graphicTitle only works in Firefox and Internet Explorer
style_mark.graphicTitle = "this is a test tooltip";
- var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
+ var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
+ style: layer_style,
+ renderers: renderer
+ });
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
Modified: trunk/openlayers/examples/wfs-states.js
===================================================================
--- trunk/openlayers/examples/wfs-states.js 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/examples/wfs-states.js 2011-03-05 21:17:02 UTC (rev 11616)
@@ -10,13 +10,18 @@
);
map.addLayer(base);
+ // 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 wfs = new OpenLayers.Layer.Vector("States", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://demo.opengeo.org/geoserver/wfs",
featureType: "states",
featureNS: "http://www.openplans.org/topp"
- })
+ }),
+ renderers: renderer
});
map.addLayer(wfs);
Modified: trunk/openlayers/lib/OpenLayers/Layer/Vector.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Layer/Vector.js 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/lib/OpenLayers/Layer/Vector.js 2011-03-05 21:17:02 UTC (rev 11616)
@@ -472,34 +472,38 @@
moveTo: function(bounds, zoomChanged, dragging) {
OpenLayers.Layer.prototype.moveTo.apply(this, arguments);
- var coordSysUnchanged = true;
+ var ng = (this.renderer instanceof OpenLayers.Renderer.NG);
+ if (ng) {
+ zoomChanged && this.renderer.updateDimensions();
+ } else {
+ var coordSysUnchanged = true;
- if (!dragging) {
- this.renderer.root.style.visibility = "hidden";
+ if (!dragging) {
+ this.renderer.root.style.visibility = "hidden";
- this.div.style.left = -parseInt(this.map.layerContainerDiv.style.left) + "px";
- this.div.style.top = -parseInt(this.map.layerContainerDiv.style.top) + "px";
- var extent = this.map.getExtent();
- coordSysUnchanged = this.renderer.setExtent(extent, zoomChanged);
+ this.div.style.left = -parseInt(this.map.layerContainerDiv.style.left) + "px";
+ this.div.style.top = -parseInt(this.map.layerContainerDiv.style.top) + "px";
+ var extent = this.map.getExtent();
+ coordSysUnchanged = this.renderer.setExtent(extent, zoomChanged);
- this.renderer.root.style.visibility = "visible";
+ this.renderer.root.style.visibility = "visible";
- // Force a reflow on gecko based browsers to prevent jump/flicker.
- // This seems to happen on only certain configurations; it was originally
- // noticed in FF 2.0 and Linux.
- if (OpenLayers.IS_GECKO === true) {
- this.div.scrollLeft = this.div.scrollLeft;
- }
+ // Force a reflow on gecko based browsers to prevent jump/flicker.
+ // This seems to happen on only certain configurations; it was originally
+ // noticed in FF 2.0 and Linux.
+ if (OpenLayers.IS_GECKO === true) {
+ this.div.scrollLeft = this.div.scrollLeft;
+ }
- if(!zoomChanged && coordSysUnchanged) {
- for(var i in this.unrenderedFeatures) {
- var feature = this.unrenderedFeatures[i];
- this.drawFeature(feature);
+ if(!zoomChanged && coordSysUnchanged) {
+ for(var i in this.unrenderedFeatures) {
+ var feature = this.unrenderedFeatures[i];
+ this.drawFeature(feature);
+ }
}
}
}
-
- if (!this.drawn || zoomChanged || !coordSysUnchanged) {
+ if (!this.drawn || (!ng && (zoomChanged || !coordSysUnchanged))) {
this.drawn = true;
var feature;
for(var i=0, len=this.features.length; i<len; i++) {
@@ -510,6 +514,20 @@
}
},
+ /**
+ * APIMethod: redraw
+ * Redraws the layer. Returns true if the layer was redrawn, false if not.
+ *
+ * Returns:
+ * {Boolean} The layer was redrawn.
+ */
+ redraw: function() {
+ if (this.renderer instanceof OpenLayers.Renderer.NG) {
+ this.drawn = false;
+ }
+ return OpenLayers.Layer.prototype.redraw.apply(this, arguments);
+ },
+
/**
* APIMethod: display
* Hide or show the Layer
Added: trunk/openlayers/lib/OpenLayers/Renderer/NG.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Renderer/NG.js (rev 0)
+++ trunk/openlayers/lib/OpenLayers/Renderer/NG.js 2011-03-05 21:17:02 UTC (rev 11616)
@@ -0,0 +1,141 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Renderer/Elements.js
+ */
+
+/**
+ * Class: OpenLayers.Renderer.NG
+ *
+ * Inherits from:
+ * - <OpenLayers.Renderer.Elements>
+ */
+OpenLayers.Renderer.NG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
+
+ /**
+ * Constant: labelNodeType
+ * {String} The node type for text label containers. To be defined by
+ * subclasses.
+ */
+ labelNodeType: null,
+
+ /**
+ * Constructor: OpenLayers.Renderer.NG
+ *
+ * Parameters:
+ * containerID - {String}
+ * options - {Object} options for this renderer. Supported options are:
+ * * yOrdering - {Boolean} Whether to use y-ordering
+ * * zIndexing - {Boolean} Whether to use z-indexing. Will be ignored
+ * if yOrdering is set to true.
+ */
+ initialize: function(containerID, options) {
+ OpenLayers.Renderer.Elements.prototype.initialize.apply(this, arguments);
+ },
+
+ /**
+ * Method: destroy
+ */
+ destroy: function() {
+ OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
+ },
+
+ /**
+ * Method: updateDimensions
+ * To be extended by subclasses - here we set positioning related styles
+ * on HTML elements, subclasses have to do the same for renderer specific
+ * elements (e.g. viesBox, width and height of the rendererRoot)
+ */
+ updateDimensions: function() {
+ var mapExtent = this.map.getExtent();
+ var renderExtent = this.map.getMaxExtent();
+ this.setExtent(renderExtent, true);
+ var res = this.getResolution();
+ var div = this.rendererRoot.parentNode;
+ var layerLeft = parseFloat(div.parentNode.style.left);
+ var layerTop = parseFloat(div.parentNode.style.top);
+ div.style.left = ((renderExtent.left - mapExtent.left) / res - layerLeft) + "px";
+ div.style.top = ((mapExtent.top - renderExtent.top) / res - layerTop) + "px";
+ },
+
+ /**
+ * Method: resize
+ */
+ setSize: function() {
+ this.map.getExtent() && this.updateDimensions();
+ },
+
+ /**
+ * Method: drawFeature
+ * Draw the feature. The optional style argument can be used
+ * to override the feature's own style. This method should only
+ * be called from layer.drawFeature().
+ *
+ * Parameters:
+ * feature - {<OpenLayers.Feature.Vector>}
+ * style - {<Object>}
+ *
+ * Returns:
+ * {Boolean} true if the feature has been drawn completely, false if not,
+ * undefined if the feature had no geometry
+ */
+ drawFeature: function(feature, style) {
+ if(style == null) {
+ style = feature.style;
+ }
+ if (feature.geometry) {
+ var rendered = this.drawGeometry(feature.geometry, style, feature.id);
+ if(rendered !== false && style.label) {
+ var location = feature.geometry.getCentroid();
+ this.drawText(feature.id, style, location);
+ } else {
+ this.removeText(feature.id);
+ }
+ return rendered;
+ }
+ },
+
+ /**
+ * Method: drawText
+ * Function for drawing text labels.
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * featureId - {String|DOMElement}
+ * style - {Object}
+ * location - {<OpenLayers.Geometry.Point>}, will be modified inline
+ *
+ * Returns:
+ * {DOMElement} container holding the text label (to be populated by
+ * subclasses)
+ */
+ drawText: function(featureId, style, location) {
+ var label;
+ if (typeof featureId !== "string") {
+ label = featureId;
+ } else {
+ label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, this.labelNodeType);
+ label._featureId = featureId;
+ }
+ label._style = style;
+ label._x = location.x;
+ label._y = location.y;
+ if(style.labelXOffset || style.labelYOffset) {
+ xOffset = isNaN(style.labelXOffset) ? 0 : style.labelXOffset;
+ yOffset = isNaN(style.labelYOffset) ? 0 : style.labelYOffset;
+ var res = this.getResolution();
+ location.move(xOffset*res, yOffset*res);
+ }
+
+ if(label.parentNode !== this.textRoot) {
+ this.textRoot.appendChild(label);
+ }
+
+ return label;
+ },
+
+ CLASS_NAME: "OpenLayers.Renderer.NG"
+});
\ No newline at end of file
Added: trunk/openlayers/lib/OpenLayers/Renderer/SVG2.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Renderer/SVG2.js (rev 0)
+++ trunk/openlayers/lib/OpenLayers/Renderer/SVG2.js 2011-03-05 21:17:02 UTC (rev 11616)
@@ -0,0 +1,769 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Renderer/NG.js
+ */
+
+/**
+ * Class: OpenLayers.Renderer.SVG2
+ *
+ * Inherits from:
+ * - <OpenLayers.Renderer.NG>
+ */
+OpenLayers.Renderer.SVG2 = OpenLayers.Class(OpenLayers.Renderer.NG, {
+
+ /**
+ * Property: xmlns
+ * {String}
+ */
+ xmlns: "http://www.w3.org/2000/svg",
+
+ /**
+ * Property: xlinkns
+ * {String}
+ */
+ xlinkns: "http://www.w3.org/1999/xlink",
+
+ /**
+ * Property: symbolMetrics
+ * {Object} Cache for symbol metrics according to their svg coordinate
+ * space. This is an object keyed by the symbol's id, and values are
+ * an object with size, x and y properties.
+ */
+ symbolMetrics: null,
+
+ /**
+ * Constant: labelNodeType
+ * {String} The node type for text label containers.
+ */
+ labelNodeType: "g",
+
+ /**
+ * Constructor: OpenLayers.Renderer.SVG
+ *
+ * Parameters:
+ * containerID - {String}
+ */
+ initialize: function(containerID) {
+ if (!this.supported()) {
+ return;
+ }
+ OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
+ arguments);
+
+ this.symbolMetrics = {};
+ },
+
+ /**
+ * APIMethod: destroy
+ */
+ destroy: function() {
+ OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
+ },
+
+ /**
+ * APIMethod: supported
+ *
+ * Returns:
+ * {Boolean} Whether or not the browser supports the SVG renderer
+ */
+ supported: function() {
+ var svgFeature = "http://www.w3.org/TR/SVG11/feature#";
+ return (document.implementation &&
+ (document.implementation.hasFeature("org.w3c.svg", "1.0") ||
+ document.implementation.hasFeature(svgFeature + "SVG", "1.1") ||
+ document.implementation.hasFeature(svgFeature + "BasicStructure", "1.1") ));
+ },
+
+ /**
+ * Method: updateDimensions
+ */
+ updateDimensions: function() {
+ OpenLayers.Renderer.NG.prototype.updateDimensions.apply(this, arguments);
+
+ var res = this.getResolution();
+
+ var width = this.extent.getWidth();
+ var height = this.extent.getHeight();
+
+ var extentString = [
+ this.extent.left,
+ -this.extent.top,
+ width,
+ height
+ ].join(" ");
+ this.rendererRoot.setAttributeNS(null, "viewBox", extentString);
+ this.rendererRoot.setAttributeNS(null, "width", width / res);
+ this.rendererRoot.setAttributeNS(null, "height", height / res);
+
+ // update styles for the new resolution
+ var nodes = this.vectorRoot.childNodes;
+ for (var i=0, len=nodes.length; i<len; ++i) {
+ this.setStyle(nodes[i]);
+ }
+ var textNodes = this.textRoot.childNodes;
+ var label;
+ for (var i=0, len=textNodes.length; i<len; ++i) {
+ var label = textNodes[i];
+ this.drawText(label, label._style,
+ new OpenLayers.Geometry.Point(label._x, label._y)
+ );
+ }
+ },
+
+ /**
+ * Method: getNodeType
+ *
+ * Parameters:
+ * geometry - {<OpenLayers.Geometry>}
+ * style - {Object}
+ *
+ * Returns:
+ * {String} The corresponding node type for the specified geometry
+ */
+ getNodeType: function(geometry, style) {
+ var nodeType = null;
+ switch (geometry.CLASS_NAME) {
+ case "OpenLayers.Geometry.Point":
+ if (style.externalGraphic) {
+ nodeType = "image";
+ } else if (this.isComplexSymbol(style.graphicName)) {
+ nodeType = "svg";
+ } else {
+ nodeType = "circle";
+ }
+ break;
+ case "OpenLayers.Geometry.Rectangle":
+ nodeType = "rect";
+ break;
+ case "OpenLayers.Geometry.LineString":
+ nodeType = "polyline";
+ break;
+ case "OpenLayers.Geometry.LinearRing":
+ nodeType = "polygon";
+ break;
+ case "OpenLayers.Geometry.Polygon":
+ case "OpenLayers.Geometry.Curve":
+ case "OpenLayers.Geometry.Surface":
+ nodeType = "path";
+ break;
+ default:
+ break;
+ }
+ return nodeType;
+ },
+
+ /**
+ * Method: setStyle
+ * Use to set all the style attributes to a SVG node.
+ *
+ * Takes care to adjust stroke width and point radius to be
+ * resolution-relative
+ *
+ * Parameters:
+ * node - {SVGDomElement} An SVG element to decorate
+ * style - {Object}
+ * options - {Object} Currently supported options include
+ * 'isFilled' {Boolean} and
+ * 'isStroked' {Boolean}
+ */
+ setStyle: function(node, style, options) {
+ style = style || node._style;
+ options = options || node._options;
+ var resolution = this.getResolution();
+ var r = node._radius;
+ var widthFactor = resolution;
+ if (node._geometryClass == "OpenLayers.Geometry.Point" && r) {
+ node.style.visibility = "";
+ if (style.graphic === false) {
+ node.style.visibility = "hidden";
+ } else if (style.externalGraphic) {
+
+ if (style.graphicTitle) {
+ node.setAttributeNS(null, "title", style.graphicTitle);
+ //Standards-conformant SVG
+ var label = this.nodeFactory(null, "title");
+ label.textContent = style.graphicTitle;
+ node.appendChild(label);
+ }
+ if (style.graphicWidth && style.graphicHeight) {
+ node.setAttributeNS(null, "preserveAspectRatio", "none");
+ }
+ var width = style.graphicWidth || style.graphicHeight;
+ var height = style.graphicHeight || style.graphicWidth;
+ width = width ? width : style.pointRadius*2;
+ height = height ? height : style.pointRadius*2;
+ width *= resolution;
+ height *= resolution;
+
+ var xOffset = (style.graphicXOffset != undefined) ?
+ style.graphicXOffset * resolution : -(0.5 * width);
+ var yOffset = (style.graphicYOffset != undefined) ?
+ style.graphicYOffset * resolution : -(0.5 * height);
+
+ var opacity = style.graphicOpacity || style.fillOpacity;
+
+ node.setAttributeNS(null, "x", node._x + xOffset);
+ node.setAttributeNS(null, "y", node._y + yOffset);
+ node.setAttributeNS(null, "width", width);
+ node.setAttributeNS(null, "height", height);
+ node.setAttributeNS(this.xlinkns, "href", style.externalGraphic);
+ node.setAttributeNS(null, "style", "opacity: "+opacity);
+ node.onclick = OpenLayers.Renderer.SVG2.preventDefault;
+ } else if (this.isComplexSymbol(style.graphicName)) {
+ // the symbol viewBox is three times as large as the symbol
+ var offset = style.pointRadius * 3 * resolution;
+ var size = offset * 2;
+ var id = this.importSymbol(style.graphicName);
+ widthFactor = this.symbolMetrics[id].size * 3 / size * resolution;
+
+ // remove the node from the dom before we modify it. This
+ // prevents various rendering issues in Safari and FF
+ var parent = node.parentNode;
+ var nextSibling = node.nextSibling;
+ if(parent) {
+ parent.removeChild(node);
+ }
+
+ // The more appropriate way to implement this would be use/defs,
+ // but due to various issues in several browsers, it is safer to
+ // copy the symbols instead of referencing them.
+ // See e.g. ticket http://trac.osgeo.org/openlayers/ticket/2985
+ // and this email thread
+ // http://osgeo-org.1803224.n2.nabble.com/Select-Control-Ctrl-click-on-Feature-with-a-graphicName-opens-new-browser-window-tc5846039.html
+ var src = document.getElementById(id);
+ node.firstChild && node.removeChild(node.firstChild);
+ node.appendChild(src.firstChild.cloneNode(true));
+ node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox"));
+
+ node.setAttributeNS(null, "width", size);
+ node.setAttributeNS(null, "height", size);
+ node.setAttributeNS(null, "x", node._x - offset);
+ node.setAttributeNS(null, "y", node._y - offset);
+
+ // now that the node has all its new properties, insert it
+ // back into the dom where it was
+ if(nextSibling) {
+ parent.insertBefore(node, nextSibling);
+ } else if(parent) {
+ parent.appendChild(node);
+ }
+ } else {
+ node.setAttributeNS(null, "r", style.pointRadius * resolution);
+ }
+
+ var rotation = style.rotation;
+ if (rotation !== undefined || node._rotation !== undefined) {
+ node._rotation = rotation;
+ rotation |= 0;
+ if (node.nodeName !== "svg") {
+ node.setAttributeNS(null, "transform",
+ ["rotate(", rotation, node._x, node._y, ")"].join(" ")
+ );
+ } else {
+ var metrics = this.symbolMetrics[id];
+ node.firstChild.setAttributeNS(null, "transform",
+ ["rotate(", rotation, metrics.x, metrics.y, ")"].join(" ")
+ );
+ }
+ }
+ }
+
+ if (options.isFilled) {
+ node.setAttributeNS(null, "fill", style.fillColor);
+ node.setAttributeNS(null, "fill-opacity", style.fillOpacity);
+ } else {
+ node.setAttributeNS(null, "fill", "none");
+ }
+
+ if (options.isStroked) {
+ node.setAttributeNS(null, "stroke", style.strokeColor);
+ node.setAttributeNS(null, "stroke-opacity", style.strokeOpacity);
+ node.setAttributeNS(null, "stroke-width", style.strokeWidth * widthFactor);
+ node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap || "round");
+ // 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");
+ style.strokeDashstyle && node.setAttributeNS(null,
+ "stroke-dasharray", this.dashStyle(style, widthFactor));
+ } else {
+ node.setAttributeNS(null, "stroke", "none");
+ }
+
+ if (style.pointerEvents) {
+ node.setAttributeNS(null, "pointer-events", style.pointerEvents);
+ }
+
+ if (style.cursor != null) {
+ node.setAttributeNS(null, "cursor", style.cursor);
+ }
+
+ return node;
+ },
+
+ /**
+ * Method: dashStyle
+ *
+ * Parameters:
+ * style - {Object}
+ * widthFactor - {Number}
+ *
+ * Returns:
+ * {String} A SVG compliant 'stroke-dasharray' value
+ */
+ dashStyle: function(style, widthFactor) {
+ var w = style.strokeWidth * widthFactor;
+ var str = style.strokeDashstyle;
+ switch (str) {
+ case 'solid':
+ return 'none';
+ case 'dot':
+ return [widthFactor, 4 * w].join();
+ case 'dash':
+ return [4 * w, 4 * w].join();
+ case 'dashdot':
+ return [4 * w, 4 * w, widthFactor, 4 * w].join();
+ case 'longdash':
+ return [8 * w, 4 * w].join();
+ case 'longdashdot':
+ return [8 * w, 4 * w, widthFactor, 4 * w].join();
+ default:
+ var parts = OpenLayers.String.trim(str).split(/\s+/g);
+ for (var i=0, ii=parts.length; i<ii; i++) {
+ parts[i] = parts[i] * widthFactor;
+ }
+ return parts.join();
+ }
+ },
+
+ /**
+ * Method: createNode
+ *
+ * Parameters:
+ * type - {String} Kind of node to draw
+ * id - {String} Id for node
+ *
+ * Returns:
+ * {DOMElement} A new node of the given type and id
+ */
+ createNode: function(type, id) {
+ var node = document.createElementNS(this.xmlns, type);
+ if (id) {
+ node.setAttributeNS(null, "id", id);
+ }
+ return node;
+ },
+
+ /**
+ * Method: nodeTypeCompare
+ *
+ * Parameters:
+ * node - {SVGDomElement} An SVG element
+ * type - {String} Kind of node
+ *
+ * Returns:
+ * {Boolean} Whether or not the specified node is of the specified type
+ */
+ nodeTypeCompare: function(node, type) {
+ return (type == node.nodeName);
+ },
+
+ /**
+ * Method: createRenderRoot
+ *
+ * Returns:
+ * {DOMElement} The specific render engine's root element
+ */
+ createRenderRoot: function() {
+ return this.nodeFactory(this.container.id + "_svgRoot", "svg");
+ },
+
+ /**
+ * Method: createRoot
+ *
+ * Parameter:
+ * suffix - {String} suffix to append to the id
+ *
+ * Returns:
+ * {DOMElement}
+ */
+ createRoot: function(suffix) {
+ return this.nodeFactory(this.container.id + suffix, "g");
+ },
+
+ /**
+ * Method: createDefs
+ *
+ * Returns:
+ * {DOMElement} The element to which we'll add the symbol definitions
+ */
+ createDefs: function() {
+ var defs = this.nodeFactory(this.container.id + "_defs", "defs");
+ this.rendererRoot.appendChild(defs);
+ return defs;
+ },
+
+ /**************************************
+ * *
+ * GEOMETRY DRAWING FUNCTIONS *
+ * *
+ **************************************/
+
+ /**
+ * Method: drawPoint
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ *
+ * Returns:
+ * {DOMElement} or false if the renderer could not draw the point
+ */
+ drawPoint: function(node, geometry) {
+ return this.drawCircle(node, geometry, 1);
+ },
+
+ /**
+ * Method: drawCircle
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ * radius - {Float}
+ *
+ * Returns:
+ * {DOMElement} or false if the renderer could not draw the circle
+ */
+ drawCircle: function(node, geometry, radius) {
+ var x = geometry.x;
+ var y = -geometry.y;
+ node.setAttributeNS(null, "cx", x);
+ node.setAttributeNS(null, "cy", y);
+ node._x = x;
+ node._y = y;
+ node._radius = radius;
+ return node;
+ },
+
+ /**
+ * Method: drawLineString
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ *
+ * Returns:
+ * {DOMElement} or null if the renderer could not draw all components of
+ * the linestring, or false if nothing could be drawn
+ */
+ drawLineString: function(node, geometry) {
+ var path = this.getComponentsString(geometry.components);
+ node.setAttributeNS(null, "points", path);
+ return node;
+ },
+
+ /**
+ * Method: drawLinearRing
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ *
+ * Returns:
+ * {DOMElement} or null if the renderer could not draw all components
+ * of the linear ring, or false if nothing could be drawn
+ */
+ drawLinearRing: function(node, geometry) {
+ var path = this.getComponentsString(geometry.components);
+ node.setAttributeNS(null, "points", path);
+ return node;
+ },
+
+ /**
+ * Method: drawPolygon
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ *
+ * Returns:
+ * {DOMElement} or null if the renderer could not draw all components
+ * of the polygon, or false if nothing could be drawn
+ */
+ drawPolygon: function(node, geometry) {
+ var d = [];
+ var draw = true;
+ var complete = true;
+ var linearRingResult, path;
+ for (var j=0, len=geometry.components.length; j<len; j++) {
+ d.push("M");
+ path = this.getComponentsString(
+ geometry.components[j].components, " ");
+ d.push(path);
+ }
+ d.push("z");
+ node.setAttributeNS(null, "d", d.join(" "));
+ node.setAttributeNS(null, "fill-rule", "evenodd");
+ return node;
+ },
+
+ /**
+ * Method: drawRectangle
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ *
+ * Returns:
+ * {DOMElement} or false if the renderer could not draw the rectangle
+ */
+ drawRectangle: function(node, geometry) {
+ node.setAttributeNS(null, "x", geometry.x);
+ node.setAttributeNS(null, "y", -geometry.y);
+ node.setAttributeNS(null, "width", geometry.width);
+ node.setAttributeNS(null, "height", geometry.height);
+ return node;
+ },
+
+ /**
+ * Method: drawSurface
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * node - {DOMElement}
+ * geometry - {<OpenLayers.Geometry>}
+ *
+ * Returns:
+ * {DOMElement} or false if the renderer could not draw the surface
+ */
+ drawSurface: function(node, geometry) {
+
+ // create the svg path string representation
+ var d = [];
+ var draw = true;
+ for (var i=0, len=geometry.components.length; i<len; i++) {
+ if ((i%3) == 0 && (i/3) == 0) {
+ var component = this.getShortString(geometry.components[i]);
+ d.push("M", component);
+ } else if ((i%3) == 1) {
+ var component = this.getShortString(geometry.components[i]);
+ d.push("C", component);
+ } else {
+ var component = this.getShortString(geometry.components[i]);
+ d.push(component);
+ }
+ }
+ d.push("Z");
+ node.setAttributeNS(null, "d", d.join(" "));
+ return node;
+ },
+
+ /**
+ * Method: drawText
+ * Function for drawing text labels.
+ * This method is only called by the renderer itself.
+ *
+ * Parameters:
+ * featureId - {String|DOMElement}
+ * style - {Object}
+ * location - {<OpenLayers.Geometry.Point>}, will be modified inline
+ *
+ * Returns:
+ * {DOMElement} container holding the text label
+ */
+ drawText: function(featureId, style, location) {
+ var g = OpenLayers.Renderer.NG.prototype.drawText.apply(this, arguments);
+ var text = g.firstChild ||
+ this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_text", "text");
+ var tspan = text.firstChild ||
+ this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_tspan", "tspan");
+
+ var res = this.getResolution();
+ text.setAttributeNS(null, "x", location.x / res);
+ text.setAttributeNS(null, "y", - location.y / res);
+ g.setAttributeNS(null, "transform", "scale(" + res + ")");
+
+ if (style.fontColor) {
+ text.setAttributeNS(null, "fill", style.fontColor);
+ }
+ if (style.fontOpacity) {
+ text.setAttributeNS(null, "opacity", style.fontOpacity);
+ }
+ if (style.fontFamily) {
+ text.setAttributeNS(null, "font-family", style.fontFamily);
+ }
+ if (style.fontSize) {
+ text.setAttributeNS(null, "font-size", style.fontSize);
+ }
+ if (style.fontWeight) {
+ text.setAttributeNS(null, "font-weight", style.fontWeight);
+ }
+ if(style.labelSelect === true) {
+ text.setAttributeNS(null, "pointer-events", "visible");
+ text._featureId = featureId;
+ tspan._featureId = featureId;
+ } else {
+ text.setAttributeNS(null, "pointer-events", "none");
+ }
+ var align = style.labelAlign || "cm";
+ text.setAttributeNS(null, "text-anchor",
+ OpenLayers.Renderer.SVG.LABEL_ALIGN[align[0]] || "middle");
+
+ if (OpenLayers.IS_GECKO === true) {
+ text.setAttributeNS(null, "dominant-baseline",
+ OpenLayers.Renderer.SVG.LABEL_ALIGN[align[1]] || "central");
+ } else {
+ tspan.setAttributeNS(null, "baseline-shift",
+ OpenLayers.Renderer.SVG.LABEL_VSHIFT[align[1]] || "-35%");
+ }
+
+ tspan.textContent = style.label;
+
+ if(!text.parentNode) {
+ text.appendChild(tspan);
+ g.appendChild(text);
+ }
+
+ return g;
+ },
+
+ /**
+ * Method: getComponentString
+ *
+ * Parameters:
+ * components - {Array(<OpenLayers.Geometry.Point>)} Array of points
+ * separator - {String} character between coordinate pairs. Defaults to ","
+ *
+ * Returns:
+ * {Object} hash with properties "path" (the string created from the
+ * components and "complete" (false if the renderer was unable to
+ * draw all components)
+ */
+ getComponentsString: function(components, separator) {
+ var len = components.length;
+ var strings = new Array(len);
+ for(var i=0; i<len; i++) {
+ component = components[i];
+ strings[i] = this.getShortString(component);
+ }
+
+ return strings.join(separator || ",");
+ },
+
+ /**
+ * Method: getShortString
+ *
+ * Parameters:
+ * point - {<OpenLayers.Geometry.Point>}
+ *
+ * Returns:
+ * {String} or false if point is outside the valid range
+ */
+ getShortString: function(point) {
+ return point.x + "," + (-point.y);
+ },
+
+ /**
+ * 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');
+ }
+
+ 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, len=symbol.length; i<len; 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.push(x, ",", y);
+ }
+
+ node.setAttributeNS(null, "points", points.join(" "));
+
+ 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.symbolMetrics[id] = {
+ size: Math.max(width, height),
+ x: symbolExtent.getCenterLonLat().lon,
+ y: symbolExtent.getCenterLonLat().lat
+ };
+
+ this.defs.appendChild(symbolNode);
+ return symbolNode.id;
+ },
+
+ /**
+ * Method: getFeatureIdFromEvent
+ *
+ * Parameters:
+ * evt - {Object} An <OpenLayers.Event> object
+ *
+ * Returns:
+ * {<OpenLayers.Geometry>} A geometry from an event that
+ * happened on a layer.
+ */
+ getFeatureIdFromEvent: function(evt) {
+ var featureId = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent.apply(this, arguments);
+ if(!featureId) {
+ var target = evt.target;
+ featureId = target.parentNode && target != this.rendererRoot &&
+ target.parentNode._featureId;
+ }
+ return featureId;
+ },
+
+ CLASS_NAME: "OpenLayers.Renderer.SVG2"
+});
+
+/**
+ * Function: OpenLayers.Renderer.SVG2.preventDefault
+ * Used to prevent default events (especially opening images in a new tab on
+ * ctrl-click) from being executed for externalGraphic and graphicName symbols
+ */
+OpenLayers.Renderer.SVG2.preventDefault = function(e) {
+ e.preventDefault && e.preventDefault();
+};
\ No newline at end of file
Modified: trunk/openlayers/lib/OpenLayers.js
===================================================================
--- trunk/openlayers/lib/OpenLayers.js 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/lib/OpenLayers.js 2011-03-05 21:17:02 UTC (rev 11616)
@@ -223,7 +223,9 @@
"OpenLayers/Geometry/Surface.js",
"OpenLayers/Renderer.js",
"OpenLayers/Renderer/Elements.js",
+ "OpenLayers/Renderer/NG.js",
"OpenLayers/Renderer/SVG.js",
+ "OpenLayers/Renderer/SVG2.js",
"OpenLayers/Renderer/Canvas.js",
"OpenLayers/Renderer/VML.js",
"OpenLayers/Layer/Vector.js",
Modified: trunk/openlayers/tests/Layer/Vector.html
===================================================================
--- trunk/openlayers/tests/Layer/Vector.html 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/tests/Layer/Vector.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -458,9 +458,7 @@
t.plan(9);
var map = new OpenLayers.Map("map");
- var layer = new OpenLayers.Layer.Vector(null, {
- drawn: true
- });
+ var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(10, 10)
@@ -477,6 +475,7 @@
};
// draw feature with no state
+ layer.drawn = true;
layer.drawFeature(feature);
t.ok(log.feature === feature, "[no state] drawFeature called with correct feature");
t.ok(log.style.display !== "none", "[no state] drawFeature called with style display not none");
@@ -707,6 +706,54 @@
(-y + customStyle6.graphicYOffset).toFixed().toString(),
"graphicYOffset correctly set");
}
+ if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG2') {
+ feature.style = customStyle1;
+ layer.drawFeature(feature);
+ var resolution = map.getResolution();
+ t.eq(root.firstChild.getAttributeNS(null, 'width'),
+ (2*customStyle1.pointRadius*resolution).toString(),
+ "given a pointRadius, width equals 2*pointRadius");
+ t.eq(root.firstChild.getAttributeNS(null, 'height'),
+ (2*customStyle1.pointRadius*resolution).toString(),
+ "given a pointRadius, height equals 2*pointRadius");
+ feature.style = customStyle2;
+ layer.drawFeature(feature);
+ t.eq(root.firstChild.getAttributeNS(null, 'width'),
+ root.firstChild.getAttributeNS(null, 'height'),
+ "given a graphicWidth, width equals height");
+ t.eq(root.firstChild.getAttributeNS(null, 'width'),
+ (customStyle2.graphicWidth*resolution).toString(),
+ "width is set correctly");
+ feature.style = customStyle3;
+ layer.drawFeature(feature);
+ t.eq(root.firstChild.getAttributeNS(null, 'height'),
+ root.firstChild.getAttributeNS(null, 'width'),
+ "given a graphicHeight, height equals width");
+ t.eq(root.firstChild.getAttributeNS(null, 'height'),
+ (customStyle3.graphicHeight*resolution).toString(),
+ "height is set correctly");
+ feature.style = customStyle4;
+ layer.drawFeature(feature);
+ t.eq(root.firstChild.getAttributeNS(null, 'height'),
+ (customStyle4.graphicHeight*resolution).toString(),
+ "given graphicHeight and graphicWidth, both are set: height");
+ t.eq(root.firstChild.getAttributeNS(null, 'width'),
+ (customStyle4.graphicWidth*resolution).toString(),
+ "given graphicHeight and graphicWidth, both are set: width");
+ feature.style = customStyle5;
+ layer.drawFeature(feature);
+ t.eq(root.firstChild.getAttributeNS(null, 'style'),
+ 'opacity: '+customStyle5.graphicOpacity.toString()+((OpenLayers.Util.getBrowserName() == "opera" || OpenLayers.Util.getBrowserName() == "safari") ? "" : ';'),
+ "graphicOpacity correctly set");
+ feature.style = customStyle6;
+ layer.drawFeature(feature);
+ t.eq(root.firstChild.getAttributeNS(null, 'x'),
+ (geometryX + customStyle6.graphicXOffset*resolution).toString(),
+ "graphicXOffset correctly set");
+ t.eq(root.firstChild.getAttributeNS(null, 'y'),
+ (-geometryY + customStyle6.graphicYOffset*resolution).toString(),
+ "graphicYOffset correctly set");
+ }
if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
feature.style = customStyle1;
layer.drawFeature(feature);
Added: trunk/openlayers/tests/Renderer/SVG2.html
===================================================================
--- trunk/openlayers/tests/Renderer/SVG2.html (rev 0)
+++ trunk/openlayers/tests/Renderer/SVG2.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -0,0 +1,424 @@
+<html>
+<head>
+<script src="../OLLoader.js"></script>
+ <script type="text/javascript">
+
+ var geometry = null, node = null;
+
+ function test_SVG_constructor(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(1);
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+ t.ok(r instanceof OpenLayers.Renderer.SVG2, "new OpenLayers.Renderer.SVG2 returns SVG object" );
+ }
+
+ function test_SVG_destroy(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(1);
+
+ var g_Destroy = false;
+
+ OpenLayers.Renderer.Elements.prototype._destroy =
+ OpenLayers.Renderer.Elements.prototype.destroy;
+
+ OpenLayers.Renderer.prototype.destroy = function() {
+ g_Destroy = true;
+ }
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+ r.destroy();
+
+ t.eq(g_Destroy, true, "OpenLayers.Renderer.Elements.destroy() called");
+
+ OpenLayers.Renderer.prototype.destroy =
+ OpenLayers.Renderer.prototype._destroy;
+ }
+
+ function test_SVG_updateDimensions(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(5);
+
+ OpenLayers.Renderer.SVG2.prototype._setExtent =
+ OpenLayers.Renderer.SVG2.prototype.setExtent;
+
+ var g_SetExtent = false;
+ OpenLayers.Renderer.SVG2.prototype.setExtent = function() {
+ g_SetExtent = true;
+ OpenLayers.Renderer.SVG2.prototype._setExtent.apply(this, arguments);
+ }
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+ var extent = new OpenLayers.Bounds(1,2,3,4);
+ r.map = {
+ getResolution: function() {
+ return 0.5;
+ },
+ getExtent: function() {
+ return extent;
+ },
+ getMaxExtent: function() {
+ return extent;
+ }
+ }
+ r.updateDimensions();
+
+ t.eq(g_SetExtent, true, "Elements.setExtent() called");
+
+ t.eq(r.rendererRoot.getAttributeNS(null, "width"), "4", "width is correct");
+ t.eq(r.rendererRoot.getAttributeNS(null, "height"), "4", "height is correct");
+ t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "1 -4 2 2", "rendererRoot viewBox is correct");
+
+ // test extent changes
+ extent = new OpenLayers.Bounds(2,3,5,6);
+ r.updateDimensions();
+ t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "2 -6 3 3", "rendererRoot viewBox is correct after a new setExtent");
+
+ OpenLayers.Renderer.SVG2.prototype.setExtent =
+ OpenLayers.Renderer.SVG2.prototype._setExtent;
+ }
+
+ function test_SVG_drawpoint(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(1);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ var properDraw = false;
+ var g_Radius = null;
+ r.drawCircle = function(n, g, r) {
+ properDraw = true;
+ g_Radius = 1;
+ }
+ r.drawPoint();
+
+ t.ok(properDraw && g_Radius == 1, "drawPoint called drawCircle with radius set to 1");
+ }
+
+ function test_SVG_drawcircle(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(5);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+ r.resolution = 0.5;
+ r.left = 0;
+ r.top = 0;
+
+ var node = document.createElement('div');
+
+ var geometry = {
+ x: 1,
+ y: 2
+ }
+
+ r.drawCircle(node, geometry, 3);
+
+ t.eq(node.getAttributeNS(null, 'cx'), '1', "cx is correct");
+ t.eq(node.getAttributeNS(null, 'cy'), '-2', "cy is correct");
+ t.eq(node._radius, 3, "radius preset is correct");
+
+ // #1274: out of bound node fails when first added
+ var geometry = {
+ x: 10000000,
+ y: 200000000,
+ CLASS_NAME: "OpenLayers.Geometry.Point",
+ id: "foo",
+ getBounds: function() {return {bottom: 0}}
+ }
+ node.id = geometry.id;
+ r.root.appendChild(node);
+
+ var drawCircleCalled = false;
+ r.drawCircle = function() {
+ drawCircleCalled = true;
+ return OpenLayers.Renderer.SVG2.prototype.drawCircle.apply(r, arguments);
+ }
+
+ r.drawGeometry(geometry, {pointRadius: 3}, "blah_4000");
+ t.eq(drawCircleCalled, true, "drawCircle called on drawGeometry for a point geometry.")
+ t.ok(node.parentNode != r.root, "circle will not be drawn when coordinates are outside the valid range");
+ }
+
+ function test_SVG_drawlinestring(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(2);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ var node = document.createElement('div');
+
+ var geometry = {
+ components: "foo"
+ }
+ g_GetString = false;
+ g_Components = null;
+ r.getComponentsString = function(c) {
+ g_GetString = true;
+ g_Components = c;
+ return "bar";
+ }
+
+ r.drawLineString(node, geometry);
+
+ t.ok(g_GetString && g_Components == "foo", "getComponentString is called with valid arguments");
+ t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
+ }
+
+ function test_SVG_drawlinearring(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(2);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ var node = document.createElement('div');
+
+ var geometry = {
+ components: "foo"
+ }
+ g_GetString = false;
+ g_Components = null;
+ r.getComponentsString = function(c) {
+ g_GetString = true;
+ g_Components = c;
+ return "bar";
+ }
+
+ r.drawLinearRing(node, geometry);
+
+ t.ok(g_GetString, "getComponentString is called with valid arguments");
+ t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
+ }
+
+ function test_SVG_drawpolygon(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(3);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ var node = document.createElement('div');
+
+ var linearRings = [{
+ components: ["foo"]
+ },{
+ components: ["bar"]
+ }]
+
+ var geometry = {
+ components: linearRings
+ }
+ g_GetString = false;
+ r.getShortString = function(c) {
+ g_GetString = true;
+ return c;
+ }
+
+ r.drawPolygon(node, geometry);
+
+ t.ok(g_GetString, "getShortString is called");
+ t.eq(node.getAttributeNS(null, "d"), "M foo M bar z", "d attribute is correctly set");
+ t.eq(node.getAttributeNS(null, "fill-rule"), "evenodd", "fill-rule attribute is correctly set");
+ }
+
+ function test_SVG_drawrectangle(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(4);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+ r.resolution = 0.5;
+ r.left = 0;
+ r.top = 0;
+
+ var node = document.createElement('div');
+
+ var geometry = {
+ x: 1,
+ y: 2,
+ width: 3,
+ height: 4
+ }
+
+ r.drawRectangle(node, geometry);
+
+ t.eq(node.getAttributeNS(null, "x"), "1", "x attribute is correctly set");
+ t.eq(node.getAttributeNS(null, "y"), "-2", "y attribute is correctly set");
+ t.eq(node.getAttributeNS(null, "width"), "3", "width attribute is correctly set");
+ t.eq(node.getAttributeNS(null, "height"), "4", "height attribute is correctly set");
+ }
+
+ function test_SVG_drawsurface(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(2);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ var node = document.createElement('div');
+
+ var geometry = {
+ components: ['foo', 'bar', 'dude']
+ }
+ g_GetString = false;
+ r.getShortString = function(c) {
+ g_GetString = true;
+ return c;
+ }
+
+ r.drawSurface(node, geometry);
+
+ t.ok(g_GetString, "getShortString is called");
+
+ t.eq(node.getAttributeNS(null, "d"), "M foo C bar dude Z", "d attribute is correctly set");
+ }
+
+ function test_SVG_getcomponentsstring(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(1);
+
+ var components = ['foo', 'bar'];
+
+ OpenLayers.Renderer.SVG2.prototype._getShortString =
+ OpenLayers.Renderer.SVG2.prototype.getShortString;
+
+ OpenLayers.Renderer.SVG2.prototype.getShortString = function(p) {
+ return p;
+ };
+
+ var string = OpenLayers.Renderer.SVG2.prototype.getComponentsString(components);
+ t.eq(string, "foo,bar", "returned string is correct");
+
+ OpenLayers.Renderer.SVG2.prototype.getShortString =
+ OpenLayers.Renderer.SVG2.prototype._getShortString;
+ }
+
+
+
+ function test_SVG_getshortstring(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(1);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+ r.resolution = 0.5;
+ r.left = 0;
+ r.top = 0;
+
+ var point = {
+ x: 1,
+ y: 2
+ };
+
+ var string = r.getShortString(point);
+ t.eq(string, "1,-2", "returned string is correct");
+ }
+
+ function test_svg_getnodetype(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(1);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
+ var s = {graphicName: "square"};
+
+ t.eq(r.getNodeType(g, s), "svg", "Correct node type for well known symbols");
+ }
+
+ function test_svg_importsymbol(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(2);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ r.importSymbol("square");
+
+ var polygon = document.getElementById(r.container.id + "_defs").firstChild.firstChild;
+
+ var pass = false;
+ for (var i = 0; i < polygon.points.numberOfItems; i++) {
+ var p = polygon.points.getItem(i);
+ pass = p.x === OpenLayers.Renderer.symbol.square[2*i] &&
+ p.y === OpenLayers.Renderer.symbol.square[2*i+1];
+ if (!pass) {
+ break;
+ }
+ }
+ t.ok(pass, "Square symbol rendered correctly");
+ t.ok(r.symbolMetrics["-square"], "Symbol metrics cached correctly.");
+ }
+
+ function test_svg_dashstyle(t) {
+ if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+ t.plan(0);
+ return;
+ }
+
+ t.plan(5);
+
+ var r = new OpenLayers.Renderer.SVG2(document.body);
+
+ t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dot"}, 1), "1,4", "dot dasharray created correctly");
+ t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dash"}, 1), "4,4", "dash dasharray created correctly");
+ t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdash"}, 1), "8,4", "longdash dasharray created correctly");
+ t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dashdot"}, 1), "4,4,1,4", "dashdot dasharray created correctly");
+ t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdashdot"}, 1), "8,4,1,4", "dashdot dasharray created correctly");
+ }
+
+ </script>
+</head>
+<body>
+<div id="map" style="width:500px;height:550px"></div>
+</body>
+</html>
Modified: trunk/openlayers/tests/list-tests.html
===================================================================
--- trunk/openlayers/tests/list-tests.html 2011-03-04 21:06:31 UTC (rev 11615)
+++ trunk/openlayers/tests/list-tests.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -185,6 +185,7 @@
<li>Renderer/Canvas.html</li>
<li>Renderer/Elements.html</li>
<li>Renderer/SVG.html</li>
+ <li>Renderer/SVG2.html</li>
<li>Renderer/VML.html</li>
<li>Request.html</li>
<li>Request/XMLHttpRequest.html</li>
Added: trunk/openlayers/tests/speed/vector-renderers.html
===================================================================
--- trunk/openlayers/tests/speed/vector-renderers.html (rev 0)
+++ trunk/openlayers/tests/speed/vector-renderers.html 2011-03-05 21:17:02 UTC (rev 11616)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Vector Features Performance Test</title>
+ <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js#startOpened=true"></script>
+ <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="../../examples/style.css" type="text/css" />
+ </head>
+ <body>
+ <h1 id="title">Vector Rendering Performance</h1>
+ <div id="map" class="smallmap"></div>
+ <p>
+ This is a benchmark for vector rendering performance. Test results are
+ written to the debug console.
+ Select a renderer here:
+ <br/>
+ <select id="renderers"></select>
+ </p><p>
+ The benchmark shows the time needed to render the features, and how long a
+ move (drag or zoom) takes. Drag and zoom around to produce move results.
+ </p>
+ <script src="../../lib/OpenLayers.js"></script>
+ <script src="vector-renderers.js"></script>
+ </body>
+</html>
\ No newline at end of file
Added: trunk/openlayers/tests/speed/vector-renderers.js
===================================================================
--- trunk/openlayers/tests/speed/vector-renderers.js (rev 0)
+++ trunk/openlayers/tests/speed/vector-renderers.js 2011-03-05 21:17:02 UTC (rev 11616)
@@ -0,0 +1,70 @@
+var map, vectorLayer, drawFeature, features
+
+map = new OpenLayers.Map('map', {
+ eventListeners: {
+ movestart: function() {
+ console.time("move");
+ },
+ moveend: function() {
+ console.timeEnd("move");
+ }
+ }
+});
+
+// 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;
+
+vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {
+ isBaseLayer: true,
+ renderers: renderer,
+ eventListeners: {
+ beforefeaturesadded: function() {
+ console.time("addFeatures");
+ },
+ featuresadded: function() {
+ console.timeEnd("addFeatures");
+ }
+ }
+});
+
+map.addLayers([vectorLayer]);
+map.addControl(new OpenLayers.Control.MousePosition());
+map.setCenter(new OpenLayers.LonLat(0, 0), 2);
+
+features = new Array(500);
+var x, y, points
+for (var i = 0; i < 500; i++) {
+ x = 90-Math.random()*180;
+ y = 45-Math.random()*90;
+ var pointList = [];
+ for(var p=0; p<19; ++p) {
+ var a = p * (2 * Math.PI) / 20;
+ var r = Math.random() * 3 + 1;
+ var newPoint = new OpenLayers.Geometry.Point(x + (r * Math.cos(a)),
+ y + (r * Math.sin(a)));
+ pointList.push(newPoint);
+ }
+ pointList.push(pointList[0]);
+ features[i] = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.LinearRing(pointList));
+
+}
+vectorLayer.addFeatures(features);
+
+var select = document.getElementById("renderers");
+var renderers = OpenLayers.Layer.Vector.prototype.renderers;
+var option;
+for (var i=0, len=renderers.length; i<len; i++) {
+ if (OpenLayers.Renderer[renderers[i]].prototype.supported()) {
+ option = document.createElement("option");
+ option.textContent = renderers[i];
+ option.value = renderers[i];
+ option.selected = renderers[i] == vectorLayer.renderer.CLASS_NAME.split(".").pop();
+ select.appendChild(option);
+ }
+}
+select.onchange = function() {
+ window.location.href = window.location.href.split("?")[0] +
+ "?renderer=" + select.options[select.selectedIndex].value;
+}
More information about the Commits
mailing list