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

Fix SVG renderer. Stephen Woodbridge reported problems with this, and it was

Browse Source 
also reported on the users mailing list. The problem appears to be that Firefox
has poor support for circles of very small radius -- below about .0002. Since
units were in geographic units, this just didn't work so well. So: 
  * Change coordinate space to be pixel based.
  * Make all x/y operations divided by resolution
  * add getComponentsString, getShortString helpers
  * Redraw nodes totally on every 'reprojectNode' call


git-svn-id: http://svn.openlayers.org/trunk/openlayers@2960 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2007-04-02 00:15:59 +00:00
parent 79c3ed7d05
commit 7e8605bf0d
1 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
lib/OpenLayers/Renderer/SVG.js
View File

@@ -50,8 +50,11 @@ OpenLayers.Renderer.SVG.prototype =
setExtent: function(extent) {
OpenLayers.Renderer.Elements.prototype.setExtent.apply(this,
arguments);
var extentString = extent.left + " " + -extent.top + " " +
extent.getWidth() + " " + extent.getHeight();
var resolution = this.getResolution();
var extentString = extent.left / resolution + " " + -extent.top / resolution + " " +
extent.getWidth() / resolution + " " + extent.getHeight() / resolution;
this.rendererRoot.setAttributeNS(null, "viewBox", extentString);
},
@@ -108,9 +111,7 @@ OpenLayers.Renderer.SVG.prototype =
* @param {DOMElement} node
*/
reprojectNode: function(node) {
//just reset style (stroke width and point radius), since coord
// system has not changed
this.setStyle(node);
this.drawGeometryNode(node);
},
/**
@@ -130,8 +131,7 @@ OpenLayers.Renderer.SVG.prototype =
options = options || node.olOptions;
if (node.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
var newRadius = style.pointRadius * this.getResolution();
node.setAttributeNS(null, "r", newRadius);
node.setAttributeNS(null, "r", style.pointRadius);
}
if (options.isFilled) {
@@ -144,8 +144,7 @@ OpenLayers.Renderer.SVG.prototype =
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);
node.setAttributeNS(null, "stroke-width", style.strokeWidth);
} else {
node.setAttributeNS(null, "stroke", "none");
}
@@ -231,8 +230,9 @@ OpenLayers.Renderer.SVG.prototype =
* @param {float} radius
*/
drawCircle: function(node, geometry, radius) {
node.setAttributeNS(null, "cx", geometry.x);
node.setAttributeNS(null, "cy", geometry.y);
var resolution = this.getResolution();
node.setAttributeNS(null, "cx", geometry.x / resolution);
node.setAttributeNS(null, "cy", geometry.y / resolution);
node.setAttributeNS(null, "r", radius);
},
@@ -241,7 +241,7 @@ OpenLayers.Renderer.SVG.prototype =
* @param {OpenLayers.Geometry} geometry
*/
drawLineString: function(node, geometry) {
node.setAttributeNS(null, "points", geometry.getComponentsString());
node.setAttributeNS(null, "points", this.getComponentsString(geometry.components));
},
/**
@@ -249,7 +249,7 @@ OpenLayers.Renderer.SVG.prototype =
* @param {OpenLayers.Geometry} geometry
*/
drawLinearRing: function(node, geometry) {
node.setAttributeNS(null, "points", geometry.getComponentsString());
node.setAttributeNS(null, "points", this.getComponentsString(geometry.components));
},
/**
@@ -262,7 +262,7 @@ OpenLayers.Renderer.SVG.prototype =
var linearRing = geometry.components[j];
d += " M";
for (var i = 0; i < linearRing.components.length; i++) {
d += " " + linearRing.components[i].toShortString();
d += " " + this.getShortString(linearRing.components[i]);
}
}
d += " z";
@@ -276,8 +276,8 @@ OpenLayers.Renderer.SVG.prototype =
* @param {OpenLayers.Geometry} geometry
*/
drawRectangle: function(node, geometry) {
node.setAttributeNS(null, "x", geometry.x);
node.setAttributeNS(null, "y", geometry.y);
node.setAttributeNS(null, "x", geometry.x / resolution);
node.setAttributeNS(null, "y", geometry.y / resolution);
node.setAttributeNS(null, "width", geometry.width);
node.setAttributeNS(null, "height", geometry.height);
},
@@ -291,11 +291,11 @@ OpenLayers.Renderer.SVG.prototype =
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();
d = "M " + this.getShortString(geometry.components[i]);
} else if ((i%3) == 1) {
d += " C " + geometry.components[i].toShortString();
d += " C " + this.getShortString(geometry.components[i]);
} else {
d += " " + geometry.components[i].toShortString();
d += " " + this.getShortString(geometry.components[i]);
}
}
node.setAttributeNS(null, "d", d);
@@ -311,17 +311,38 @@ OpenLayers.Renderer.SVG.prototype =
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();
d = "M " + this.getShortString(geometry.components[i]);
} else if ((i%3) == 1) {
d += " C " + geometry.components[i].toShortString();
d += " C " + this.getShortString(geometry.components[i]);
} else {
d += " " + geometry.components[i].toShortString();
d += " " + this.getShortString(geometry.components[i]);
}
}
d += " Z";
node.setAttributeNS(null, "d", d);
},
/**
* @param {Array} components array of points
*/
getComponentsString: function(components) {
var strings = [];
for(var i = 0; i < components.length; i++) {
strings.push(this.getShortString(components[i]));
}
return strings.join(",");
},
/**
* @param {OpenLayers.Geometry.Point} point
*/
getShortString: function(point) {
var resolution = this.getResolution();
return point.x / resolution + "," + point.y / resolution;
},
/** @final @type String */
CLASS_NAME: "OpenLayers.Renderer.SVG"
});