ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11616 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-03-05 21:17:02 +00:00
parent 72f2ce5d0e
commit e3d137754c
14 changed files with 1552 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/marker-shadow.html
View File

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

7
examples/ordering.html
View File

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

7
examples/snap-split.html
View File

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

9
examples/vector-features.html
View File

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

7
examples/wfs-states.js
View File

@@ -10,13 +10,18 @@ function init() {
);
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);

2
lib/OpenLayers.js
View File

@@ -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",

58
lib/OpenLayers/Layer/Vector.js
View File

@@ -472,34 +472,38 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
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 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
}
},
/**
* 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

141
lib/OpenLayers/Renderer/NG.js Normal file
View File

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

769
lib/OpenLayers/Renderer/SVG2.js Normal file
View File

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

53
tests/Layer/Vector.html
View File

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

424
tests/Renderer/SVG2.html Normal file
View File

@@ -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>

1
tests/list-tests.html
View File

@@ -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>

25
tests/speed/vector-renderers.html Normal file
View File

@@ -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>

70
tests/speed/vector-renderers.js Normal file
View File

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