Merge vector-2.4 branch back to trunk.
svn merge sandbox/vector-2.4/@2307 sandbox/vector-2.4/@HEAD trunk/openlayers/ git-svn-id: http://svn.openlayers.org/trunk/openlayers@2803 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
@@ -0,0 +1,269 @@
|
||||
/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license.
|
||||
* See http://svn.openlayers.org/trunk/openlayers/repository-license.txt
|
||||
* for the full text of the license. */
|
||||
|
||||
/**
|
||||
* @class
|
||||
*
|
||||
* This is another virtual class in that it should never be instantiated by
|
||||
* itself as a Renderer. It exists because there is *tons* of shared
|
||||
* functionality between different vector libraries which use nodes/elements
|
||||
* as a base for rendering vectors.
|
||||
*
|
||||
* The highlevel bits of code that are implemented here are the adding and
|
||||
* removing of geometries, which is essentially the same for any
|
||||
* element-based renderer. The details of creating each node and drawing the
|
||||
* paths are of course different, but the machinery is the same.
|
||||
*
|
||||
* @requires OpenLayers/Renderer.js
|
||||
*/
|
||||
OpenLayers.Renderer.Elements = OpenLayers.Class.create();
|
||||
OpenLayers.Renderer.Elements.prototype =
|
||||
OpenLayers.Class.inherit(OpenLayers.Renderer, {
|
||||
|
||||
/** @type DOMElement */
|
||||
rendererRoot: null,
|
||||
|
||||
/** @type DOMElement */
|
||||
root: null,
|
||||
|
||||
/** @type String */
|
||||
xmlns: null,
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {String} containerID
|
||||
*/
|
||||
initialize: function(containerID) {
|
||||
OpenLayers.Renderer.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this.rendererRoot = this.createRenderRoot();
|
||||
this.root = this.createRoot();
|
||||
|
||||
this.rendererRoot.appendChild(this.root);
|
||||
this.container.appendChild(this.rendererRoot);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
destroy: function() {
|
||||
|
||||
this.clear();
|
||||
|
||||
this.rendererRoot = null;
|
||||
this.root = null;
|
||||
this.xmlns = null;
|
||||
|
||||
OpenLayers.Renderer.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove all the elements from the root
|
||||
*
|
||||
*/
|
||||
clear: function() {
|
||||
if (this.root) {
|
||||
while (this.root.childNodes.length > 0) {
|
||||
this.root.removeChild(this.root.firstChild);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Cycle through the rendered nodes and reproject them (this should be
|
||||
* called when the extent or size has changed);
|
||||
*
|
||||
* @param {OpenLayers.Bounds} extent
|
||||
*/
|
||||
reproject: function(extent) {
|
||||
|
||||
for (var i = 0; i < this.root.childNodes.length; i++) {
|
||||
var node = this.root.childNodes[i];
|
||||
//reproject node
|
||||
// for the moment, this only really happens so as to reset
|
||||
// the heaviness of the line relative to the resolution and
|
||||
// the size of the circle for the Point object
|
||||
this.reprojectNode(node);
|
||||
}
|
||||
},
|
||||
|
||||
/** This function is in charge of asking the specific renderer which type
|
||||
* of node to create for the given geometry. All geometries in an
|
||||
* Elements-based renderer consist of one node and some attributes. We
|
||||
* have the nodeFactory() function which creates a node for us, but it
|
||||
* takes a 'type' as input, and that is precisely what this function
|
||||
* tells us.
|
||||
*
|
||||
* @param geometry {OpenLayers.Geometry}
|
||||
*
|
||||
* @returns The corresponding node type for the specified geometry
|
||||
* @type String
|
||||
*/
|
||||
getNodeType: function(geometry) { },
|
||||
|
||||
/**
|
||||
* Draw the geometry on the specified layer, creating new nodes,
|
||||
* setting paths, setting style.
|
||||
*
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
* @param {Object} style
|
||||
*/
|
||||
drawGeometry: function(geometry, style) {
|
||||
|
||||
if ((geometry.CLASS_NAME == "OpenLayers.Geometry.MultiPoint") ||
|
||||
(geometry.CLASS_NAME == "OpenLayers.Geometry.MultiLineString") ||
|
||||
(geometry.CLASS_NAME == "OpenLayers.Geometry.MultiPolygon")) {
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
this.drawGeometry(geometry.components[i], style);
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
//first we create the basic node and add it to the root
|
||||
var nodeType = this.getNodeType(geometry);
|
||||
var node = this.nodeFactory(geometry.id, nodeType, geometry);
|
||||
node.geometry = geometry;
|
||||
node.olStyle = style;
|
||||
this.root.appendChild(node);
|
||||
|
||||
//now actually draw the node, and style it
|
||||
this.drawGeometryNode(node);
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a node, draw a geometry on the specified layer.
|
||||
*
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
* @param {Object} style
|
||||
*/
|
||||
drawGeometryNode: function(node, geometry, style) {
|
||||
geometry = geometry || node.geometry;
|
||||
style = style || node.olStyle;
|
||||
|
||||
var options = {
|
||||
'isFilled': true,
|
||||
'isStroked': true
|
||||
};
|
||||
switch (geometry.CLASS_NAME) {
|
||||
case "OpenLayers.Geometry.Point":
|
||||
this.drawPoint(node, geometry);
|
||||
break;
|
||||
case "OpenLayers.Geometry.Curve":
|
||||
options.isFilled = false;
|
||||
this.drawCurve(node, geometry);
|
||||
break;
|
||||
case "OpenLayers.Geometry.LineString":
|
||||
options.isFilled = false;
|
||||
this.drawLineString(node, geometry);
|
||||
break;
|
||||
case "OpenLayers.Geometry.LinearRing":
|
||||
this.drawLinearRing(node, geometry);
|
||||
break;
|
||||
case "OpenLayers.Geometry.Polygon":
|
||||
this.drawPolygon(node, geometry);
|
||||
break;
|
||||
case "OpenLayers.Geometry.Surface":
|
||||
this.drawSurface(node, geometry);
|
||||
break;
|
||||
case "OpenLayers.Geometry.Rectangle":
|
||||
this.drawRectangle(node, geometry);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
node.olStyle = style;
|
||||
node.olOptions = options;
|
||||
|
||||
//set style
|
||||
this.setStyle(node);
|
||||
},
|
||||
|
||||
/**
|
||||
* virtual functions for drawing different Geometries.
|
||||
* These should all be implemented by subclasses.
|
||||
*
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawPoint: function(node, geometry) {},
|
||||
drawLineString: function(node, geometry) {},
|
||||
drawLinearRing: function(node, geometry) {},
|
||||
drawPolygon: function(node, geometry) {},
|
||||
drawRectangle: function(node, geometry) {},
|
||||
drawCircle: function(node, geometry) {},
|
||||
drawCurve: function(node, geometry) {},
|
||||
drawSurface: function(node, geometry) {},
|
||||
|
||||
/**
|
||||
* @param evt {Object} an OpenLayers.Event object
|
||||
*
|
||||
* @returns A geometry from an event that happened on a layer
|
||||
* @type OpenLayers.Geometry
|
||||
*/
|
||||
getGeometryFromEvent: function(evt) {
|
||||
var node = evt.target || evt.srcElement;
|
||||
var geometry = node.geometry ? node.geometry : null
|
||||
return geometry;
|
||||
},
|
||||
|
||||
/** Erase a geometry from the renderer. In the case of a multi-geometry,
|
||||
* we cycle through and recurse on ourselves. Otherwise, we look for a
|
||||
* node with the geometry.id, destroy its geometry, and remove it from
|
||||
* the DOM.
|
||||
*
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
eraseGeometry: function(geometry) {
|
||||
if ((geometry.CLASS_NAME == "OpenLayers.Geometry.MultiPoint") ||
|
||||
(geometry.CLASS_NAME == "OpenLayers.Geometry.MultiLineString") ||
|
||||
(geometry.CLASS_NAME == "OpenLayers.Geometry.MultiPolygon")) {
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
this.eraseGeometry(geometry.components[i]);
|
||||
}
|
||||
} else {
|
||||
var element = $(geometry.id);
|
||||
if (element && element.parentNode) {
|
||||
if (element.geometry) {
|
||||
element.geometry.destroy();
|
||||
element.geometry = null;
|
||||
}
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* Create new node of the specified type, with the (optional) specified id.
|
||||
*
|
||||
* If node already exists with same ID and type, we remove it and then
|
||||
* call ourselves again to recreate it.
|
||||
*
|
||||
* @param {String} id
|
||||
* @param {String} type Kind of node to draw
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*
|
||||
* @returns A new node of the given type and id
|
||||
* @type DOMElement
|
||||
*/
|
||||
nodeFactory: function(id, type, geometry) {
|
||||
var node = $(id);
|
||||
if (node) {
|
||||
if (!this.nodeTypeCompare(node, type)) {
|
||||
node.parentNode.removeChild(node);
|
||||
node = this.nodeFactory(id, type, geometry);
|
||||
}
|
||||
} else {
|
||||
node = this.createNode(type, id);
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
/** @final @type String */
|
||||
CLASS_NAME: "OpenLayers.Renderer.Elements"
|
||||
});
|
||||
@@ -0,0 +1,327 @@
|
||||
/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license.
|
||||
* See http://svn.openlayers.org/trunk/openlayers/repository-license.txt
|
||||
* for the full text of the license. */
|
||||
|
||||
/**
|
||||
* @class
|
||||
*
|
||||
* @requires OpenLayers/Renderer/Elements.js
|
||||
*/
|
||||
OpenLayers.Renderer.SVG = OpenLayers.Class.create();
|
||||
OpenLayers.Renderer.SVG.prototype =
|
||||
OpenLayers.Class.inherit(OpenLayers.Renderer.Elements, {
|
||||
|
||||
/** @type String */
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {String} containerID
|
||||
*/
|
||||
initialize: function(containerID) {
|
||||
if (!this.supported()) {
|
||||
return;
|
||||
}
|
||||
OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
|
||||
arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
destroy: function() {
|
||||
OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns Whether or not the browser supports the VML renderer
|
||||
* @type Boolean
|
||||
*/
|
||||
supported: function() {
|
||||
var svgFeature = "http://www.w3.org/TR/SVG11/feature#SVG";
|
||||
var supported = document.implementation.hasFeature(svgFeature, "1.1");
|
||||
return supported;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Bounds} extent
|
||||
*/
|
||||
setExtent: function(extent) {
|
||||
OpenLayers.Renderer.Elements.prototype.setExtent.apply(this,
|
||||
arguments);
|
||||
var extentString = extent.left + " " + -extent.top + " " +
|
||||
extent.getWidth() + " " + extent.getHeight();
|
||||
this.rendererRoot.setAttributeNS(null, "viewBox", extentString);
|
||||
},
|
||||
|
||||
/**
|
||||
* function
|
||||
*
|
||||
* sets the size of the drawing surface
|
||||
*
|
||||
* @param size {OpenLayers.Size} the size of the drawing surface
|
||||
*/
|
||||
setSize: function(size) {
|
||||
OpenLayers.Renderer.prototype.setSize.apply(this, arguments);
|
||||
|
||||
this.rendererRoot.setAttributeNS(null, "width", this.size.w);
|
||||
this.rendererRoot.setAttributeNS(null, "height", this.size.h);
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @param geometry {OpenLayers.Geometry}
|
||||
*
|
||||
* @returns The corresponding node type for the specified geometry
|
||||
* @type String
|
||||
*/
|
||||
getNodeType: function(geometry) {
|
||||
var nodeType = null;
|
||||
switch (geometry.CLASS_NAME) {
|
||||
case "OpenLayers.Geometry.Point":
|
||||
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;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
*/
|
||||
reprojectNode: function(node) {
|
||||
//just reset style (stroke width and point radius), since coord
|
||||
// system has not changed
|
||||
this.setStyle(node);
|
||||
},
|
||||
|
||||
/**
|
||||
* Use to set all the style attributes to a SVG node.
|
||||
*
|
||||
* Note: takes care to adjust stroke width and point radius
|
||||
* to be resolution-relative
|
||||
*
|
||||
* @param node {SVGDomElement} an SVG element to decorate
|
||||
* @param {Object} style
|
||||
* @param {Object} options
|
||||
* @option isFilled {boolean}
|
||||
* @option isStroked {boolean}
|
||||
*/
|
||||
setStyle: function(node, style, options) {
|
||||
style = style || node.olStyle;
|
||||
options = options || node.olOptions;
|
||||
|
||||
if (node.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
||||
var newRadius = style.pointRadius * this.getResolution();
|
||||
node.setAttributeNS(null, "r", newRadius);
|
||||
}
|
||||
|
||||
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);
|
||||
var newStrokeWidth = style.strokeWidth * this.getResolution();
|
||||
node.setAttributeNS(null, "stroke-width", newStrokeWidth);
|
||||
} else {
|
||||
node.setAttributeNS(null, "stroke", "none");
|
||||
}
|
||||
|
||||
if (style.pointerEvents) {
|
||||
node.setAttributeNS(null, "pointer-events", style.pointerEvents);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* @param {String} type Kind of node to draw
|
||||
* @param {String} id Id for node
|
||||
*
|
||||
* @returns A new node of the given type and id
|
||||
* @type DOMElement
|
||||
*/
|
||||
createNode: function(type, id) {
|
||||
var node = document.createElementNS(this.xmlns, type);
|
||||
if (id) {
|
||||
node.setAttributeNS(null, "id", id);
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* @param {String} type Kind of node to draw
|
||||
* @param {String} id Id for node
|
||||
*
|
||||
* @returns Whether or not the specified node is of the specified type
|
||||
* @type Boolean
|
||||
*/
|
||||
nodeTypeCompare: function(node, type) {
|
||||
return (type == node.nodeName);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns The specific render engine's root element
|
||||
* @type DOMElement
|
||||
*/
|
||||
createRenderRoot: function() {
|
||||
var id = this.container.id + "_svgRoot";
|
||||
var rendererRoot = this.nodeFactory(id, "svg");
|
||||
return rendererRoot;
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns The main root element to which we'll add vectors
|
||||
* @type DOMElement
|
||||
*/
|
||||
createRoot: function() {
|
||||
var id = this.container.id + "_root";
|
||||
|
||||
var root = this.nodeFactory(id, "g");
|
||||
|
||||
// flip the SVG display Y axis upside down so it
|
||||
// matches the display Y axis of the map
|
||||
root.setAttributeNS(null, "transform", "scale(1, -1)");
|
||||
|
||||
return root;
|
||||
},
|
||||
|
||||
/**************************************
|
||||
* *
|
||||
* GEOMETRY DRAWING FUNCTIONS *
|
||||
* *
|
||||
**************************************/
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawPoint: function(node, geometry) {
|
||||
this.drawCircle(node, geometry, 1);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
* @param {float} radius
|
||||
*/
|
||||
drawCircle: function(node, geometry, radius) {
|
||||
node.setAttributeNS(null, "cx", geometry.x);
|
||||
node.setAttributeNS(null, "cy", geometry.y);
|
||||
node.setAttributeNS(null, "r", radius);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawLineString: function(node, geometry) {
|
||||
node.setAttributeNS(null, "points", geometry.getComponentsString());
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawLinearRing: function(node, geometry) {
|
||||
node.setAttributeNS(null, "points", geometry.getComponentsString());
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawPolygon: function(node, geometry) {
|
||||
var d = "";
|
||||
for (var j = 0; j < geometry.components.length; j++) {
|
||||
var linearRing = geometry.components[j];
|
||||
d += " M";
|
||||
for (var i = 0; i < linearRing.components.length; i++) {
|
||||
d += " " + linearRing.components[i].toShortString();
|
||||
}
|
||||
}
|
||||
d += " z";
|
||||
|
||||
node.setAttributeNS(null, "d", d);
|
||||
node.setAttributeNS(null, "fill-rule", "evenodd");
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
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);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawCurve: function(node, geometry) {
|
||||
var d = null;
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
if ((i%3) == 0 && (i/3) == 0) {
|
||||
d = "M " + geometry.components[i].toShortString();
|
||||
} else if ((i%3) == 1) {
|
||||
d += " C " + geometry.components[i].toShortString();
|
||||
} else {
|
||||
d += " " + geometry.components[i].toShortString();
|
||||
}
|
||||
}
|
||||
node.setAttributeNS(null, "d", d);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawSurface: function(node, geometry) {
|
||||
|
||||
// create the svg path string representation
|
||||
var d = null;
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
if ((i%3) == 0 && (i/3) == 0) {
|
||||
d = "M " + geometry.components[i].toShortString();
|
||||
} else if ((i%3) == 1) {
|
||||
d += " C " + geometry.components[i].toShortString();
|
||||
} else {
|
||||
d += " " + geometry.components[i].toShortString();
|
||||
}
|
||||
}
|
||||
d += " Z";
|
||||
node.setAttributeNS(null, "d", d);
|
||||
},
|
||||
|
||||
/** @final @type String */
|
||||
CLASS_NAME: "OpenLayers.Renderer.SVG"
|
||||
});
|
||||
@@ -0,0 +1,444 @@
|
||||
/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license.
|
||||
* See http://svn.openlayers.org/trunk/openlayers/repository-license.txt
|
||||
* for the full text of the license. */
|
||||
|
||||
/**
|
||||
* @class
|
||||
*
|
||||
* Note that for all calculations in this class, we use toFixed() to round a
|
||||
* float value to an integer. This is done because it seems that VML doesn't
|
||||
* support float values.
|
||||
*
|
||||
* @requires OpenLayers/Renderer/Elements.js
|
||||
*/
|
||||
OpenLayers.Renderer.VML = OpenLayers.Class.create();
|
||||
OpenLayers.Renderer.VML.prototype =
|
||||
OpenLayers.Class.inherit(OpenLayers.Renderer.Elements, {
|
||||
|
||||
/** @type String */
|
||||
xmlns: "urn:schemas-microsoft-com:vml",
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {String} containerID
|
||||
*/
|
||||
initialize: function(containerID) {
|
||||
if (!this.supported()) {
|
||||
return;
|
||||
}
|
||||
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
|
||||
var style = document.createStyleSheet();
|
||||
style.addRule('v\\:*', "behavior: url(#default#VML);");
|
||||
|
||||
OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
|
||||
arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
destroy: function() {
|
||||
OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns Whether or not the browser supports the VML renderer
|
||||
* @type Boolean
|
||||
*/
|
||||
supported: function() {
|
||||
var supported = document.namespaces;
|
||||
return supported;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Bounds} extent
|
||||
*/
|
||||
setExtent: function(extent) {
|
||||
OpenLayers.Renderer.Elements.prototype.setExtent.apply(this,
|
||||
arguments);
|
||||
var resolution = this.getResolution();
|
||||
|
||||
var org = extent.left/resolution + " " +
|
||||
extent.top/resolution;
|
||||
this.root.setAttribute("coordorigin", org);
|
||||
|
||||
var size = extent.getWidth()/resolution + " " +
|
||||
-extent.getHeight()/resolution;
|
||||
this.root.setAttribute("coordsize", size);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Set the size of the drawing surface
|
||||
*
|
||||
* @param size {OpenLayers.Size} the size of the drawing surface
|
||||
*/
|
||||
setSize: function(size) {
|
||||
OpenLayers.Renderer.prototype.setSize.apply(this, arguments);
|
||||
|
||||
this.rendererRoot.style.width = this.size.w;
|
||||
this.rendererRoot.style.height = this.size.h;
|
||||
|
||||
this.root.style.width = this.size.w;
|
||||
this.root.style.height = this.size.h
|
||||
},
|
||||
|
||||
/**
|
||||
* @param geometry {OpenLayers.Geometry}
|
||||
*
|
||||
* @returns The corresponding node type for the specified geometry
|
||||
* @type String
|
||||
*/
|
||||
getNodeType: function(geometry) {
|
||||
var nodeType = null;
|
||||
switch (geometry.CLASS_NAME) {
|
||||
case "OpenLayers.Geometry.Point":
|
||||
nodeType = "v:oval";
|
||||
break;
|
||||
case "OpenLayers.Geometry.Rectangle":
|
||||
nodeType = "v:rect";
|
||||
break;
|
||||
case "OpenLayers.Geometry.LineString":
|
||||
case "OpenLayers.Geometry.LinearRing":
|
||||
case "OpenLayers.Geometry.Polygon":
|
||||
case "OpenLayers.Geometry.Curve":
|
||||
case "OpenLayers.Geometry.Surface":
|
||||
nodeType = "v:shape";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return nodeType;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
*/
|
||||
reprojectNode: function(node) {
|
||||
//we have to reprojectNode the entire node since the coordinates
|
||||
// system has changed
|
||||
this.drawGeometryNode(node);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Use to set all the style attributes to a VML node.
|
||||
*
|
||||
* @param {DOMElement} node
|
||||
* @param {Object} style
|
||||
* @param {Object} options
|
||||
* @option isFilled {boolean}
|
||||
* @option isStroked {boolean}
|
||||
*/
|
||||
setStyle: function(node, style, options) {
|
||||
style = style || node.olStyle;
|
||||
options = options || node.olOptions;
|
||||
|
||||
if (node.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
||||
this.drawCircle(node, node.geometry, style.pointRadius);
|
||||
}
|
||||
|
||||
//fill
|
||||
var fillColor = (options.isFilled) ? style.fillColor : "none";
|
||||
node.setAttribute("fillcolor", fillColor);
|
||||
var fills = node.getElementsByTagName("fill");
|
||||
var fill = (fills.length == 0) ? null : fills[0];
|
||||
if (!options.isFilled) {
|
||||
if (fill) {
|
||||
node.removeChild(fill);
|
||||
}
|
||||
} else {
|
||||
if (!fill) {
|
||||
fill = this.createNode('v:fill', node.id + "_fill");
|
||||
node.appendChild(fill);
|
||||
}
|
||||
fill.setAttribute("opacity", style.fillOpacity);
|
||||
}
|
||||
|
||||
|
||||
//stroke
|
||||
var strokeColor = (options.isStroked) ? style.strokeColor : "none";
|
||||
node.setAttribute("strokecolor", strokeColor);
|
||||
node.setAttribute("strokeweight", style.strokeWidth);
|
||||
var strokes = node.getElementsByTagName("stroke");
|
||||
var stroke = (strokes.length == 0) ? null : strokes[0];
|
||||
if (!options.isStroked) {
|
||||
if (stroke) {
|
||||
node.removeChild(stroke);
|
||||
}
|
||||
} else {
|
||||
if (!stroke) {
|
||||
stroke = this.createNode('v:stroke', node.id + "_stroke");
|
||||
node.appendChild(stroke);
|
||||
}
|
||||
stroke.setAttribute("opacity", style.strokeOpacity);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/** Get the geometry's bounds, convert it to our vml coordinate system,
|
||||
* then set the node's position, size, and local coordinate system.
|
||||
*
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
setNodeDimension: function(node, geometry) {
|
||||
|
||||
var bbox = geometry.getBounds();
|
||||
|
||||
var resolution = this.getResolution();
|
||||
|
||||
var scaledBox =
|
||||
new OpenLayers.Bounds((bbox.left/resolution).toFixed(),
|
||||
(bbox.bottom/resolution).toFixed(),
|
||||
(bbox.right/resolution).toFixed(),
|
||||
(bbox.top/resolution).toFixed());
|
||||
|
||||
// Set the internal coordinate system to draw the path
|
||||
node.style.left = scaledBox.left;
|
||||
node.style.top = scaledBox.top;
|
||||
node.style.width = scaledBox.getWidth();
|
||||
node.style.height = scaledBox.getHeight();
|
||||
|
||||
node.coordorigin = scaledBox.left + " " + scaledBox.top;
|
||||
node.coordsize = scaledBox.getWidth()+ " " + scaledBox.getHeight();
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* @param {String} type Kind of node to draw
|
||||
* @param {String} id Id for node
|
||||
*
|
||||
* @returns A new node of the given type and id
|
||||
* @type DOMElement
|
||||
*/
|
||||
createNode: function(type, id) {
|
||||
var node = document.createElement(type);
|
||||
if (id) {
|
||||
node.setAttribute('id', id);
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*
|
||||
* @param {String} type Kind of node to draw
|
||||
* @param {String} id Id for node
|
||||
*
|
||||
* @returns Whether or not the specified node is of the specified type
|
||||
* @type Boolean
|
||||
*/
|
||||
nodeTypeCompare: function(node, type) {
|
||||
|
||||
//split type
|
||||
var subType = type;
|
||||
var splitIndex = subType.indexOf(":");
|
||||
if (splitIndex != -1) {
|
||||
subType = subType.substr(splitIndex+1);
|
||||
}
|
||||
|
||||
//split nodeName
|
||||
var nodeName = node.nodeName;
|
||||
splitIndex = nodeName.indexOf(":");
|
||||
if (splitIndex != -1) {
|
||||
nodeName = nodeName.substr(splitIndex+1);
|
||||
}
|
||||
|
||||
return (subType == nodeName);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns The specific render engine's root element
|
||||
* @type DOMElement
|
||||
*/
|
||||
createRenderRoot: function() {
|
||||
var id = this.container.id + "_vmlRoot";
|
||||
var rendererRoot = this.nodeFactory(id, "div");
|
||||
return rendererRoot;
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns The main root element to which we'll add vectors
|
||||
* @type DOMElement
|
||||
*/
|
||||
createRoot: function() {
|
||||
var id = this.container.id + "_root";
|
||||
var root = this.nodeFactory(id, "v:group");
|
||||
return root;
|
||||
},
|
||||
|
||||
/**************************************
|
||||
* *
|
||||
* GEOMETRY DRAWING FUNCTIONS *
|
||||
* *
|
||||
**************************************/
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawPoint: function(node, geometry) {
|
||||
this.drawCircle(node, node.geometry, 1);
|
||||
},
|
||||
|
||||
/** Size and Center a circle given geometry (x,y center) and radius
|
||||
*
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
* @param {float} radius
|
||||
*/
|
||||
drawCircle: function(node, geometry, radius) {
|
||||
|
||||
var resolution = this.getResolution();
|
||||
|
||||
node.style.left = (geometry.x /resolution).toFixed() - radius;
|
||||
node.style.top = (geometry.y /resolution).toFixed() - radius;
|
||||
|
||||
var diameter = radius * 2;
|
||||
|
||||
node.style.width = diameter;
|
||||
node.style.height = diameter;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawLineString: function(node, geometry) {
|
||||
this.drawLine(node, geometry, false);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawLinearRing: function(node, geometry) {
|
||||
this.drawLine(node, geometry, true);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
* @param {Boolean} closeLine Close the line? (make it a ring?)
|
||||
*/
|
||||
drawLine: function(node, geometry, closeLine) {
|
||||
|
||||
this.setNodeDimension(node, geometry);
|
||||
|
||||
var resolution = this.getResolution();
|
||||
|
||||
var path = "m";
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
var x = (geometry.components[i].getX()/resolution);
|
||||
var y = (geometry.components[i].getY()/resolution);
|
||||
path += " " + x.toFixed() + "," + y.toFixed() + " l ";
|
||||
}
|
||||
if (closeLine) {
|
||||
path += " x";
|
||||
}
|
||||
path += " e";
|
||||
|
||||
node.path = path;
|
||||
},
|
||||
|
||||
/**
|
||||
* @parm {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawPolygon: function(node, geometry) {
|
||||
this.setNodeDimension(node, geometry);
|
||||
|
||||
var resolution = this.getResolution();
|
||||
|
||||
var path = "";
|
||||
for (var j = 0; j < geometry.components.length; j++) {
|
||||
var linearRing = geometry.components[j];
|
||||
|
||||
path += "m";
|
||||
for (var i = 0; i < linearRing.components.length; i++) {
|
||||
var x = linearRing.components[i].getX() / resolution;
|
||||
var y = linearRing.components[i].getY() / resolution;
|
||||
path += " " + x.toFixed() + "," + y.toFixed();
|
||||
if (i==0) {
|
||||
path += " l";
|
||||
}
|
||||
}
|
||||
path += " x ";
|
||||
}
|
||||
path += "e";
|
||||
node.path = path;
|
||||
},
|
||||
|
||||
/**
|
||||
* @parm {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawRectangle: function(node, geometry) {
|
||||
var resolution = this.getResolution();
|
||||
|
||||
node.style.left = geometry.x/resolution;
|
||||
node.style.top = geometry.y/resolution;
|
||||
node.style.width = geometry.width/resolution;
|
||||
node.style.height = geometry.height/resolution;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @parm {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawCurve: function(node, geometry) {
|
||||
this.setNodeDimension(node, geometry);
|
||||
|
||||
var resolution = this.getResolution();
|
||||
|
||||
var path = "";
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
var x = geometry.components[i].getX() / resolution;
|
||||
var y = geometry.components[i].getY() / resolution;
|
||||
|
||||
if ((i%3)==0 && (i/3)==0) {
|
||||
path += "m"
|
||||
} else if ((i%3)==1) {
|
||||
path += " c"
|
||||
}
|
||||
path += " " + x + "," + y;
|
||||
}
|
||||
path += " x e";
|
||||
|
||||
node.path = path;
|
||||
},
|
||||
|
||||
/**
|
||||
* @parm {DOMElement} node
|
||||
* @param {OpenLayers.Geometry} geometry
|
||||
*/
|
||||
drawSurface: function(node, geometry) {
|
||||
|
||||
this.setNodeDimension(node, geometry);
|
||||
|
||||
var resolution = this.getResolution();
|
||||
|
||||
var path = "";
|
||||
for (var i = 0; i < geometry.components.length; i++) {
|
||||
var x = geometry.components[i].getX() / resolution;
|
||||
var y = geometry.components[i].getY() / resolution;
|
||||
if ((i%3)==0 && (i/3)==0) {
|
||||
path += "m";
|
||||
} else if ((i%3)==1) {
|
||||
path += " c";
|
||||
}
|
||||
path += " " + x + "," + y;
|
||||
}
|
||||
path += " x e";
|
||||
|
||||
node.path = path;
|
||||
},
|
||||
|
||||
CLASS_NAME: "OpenLayers.Renderer.VML"
|
||||
});
|
||||
Reference in New Issue
Block a user