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

added support for text labels. This also adds getCentroid methods to all

Browse Source 
geometries. Thanks crschmidt for the great help with this patch, and 
thanks to camptocamp for the initial work on this and rcoup for creating 
the first patches. r=crschmidt (closes #1895)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9262 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2009-04-10 16:05:26 +00:00
parent dd556be0be
commit cc2e19d789
15 changed files with 560 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
examples/vector-features-with-text.html Normal file
View File

@@ -0,0 +1,109 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 475px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/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;
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 3,
fillColor: "#FF5500",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted",
label : "name: ${name}, age: ${age}",
fontColor: "${favColor}",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: "${align}"
}}),
renderers: renderer
});
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
name: "toto",
age: 20,
favColor: 'red',
align: "cm"
};
// create a polygon feature from a linear ring of points
var pointList = [];
for(var p=0; p<6; ++p) {
var a = p * (2 * Math.PI) / 7;
var r = Math.random(1) + 1;
var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
point.y + 5 + (r * Math.sin(a)));
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
polygonFeature.attributes = {
name: "dude",
age: 21,
favColor: 'purple',
align: 'lb'
};
multiFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Collection([
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-105,40),
new OpenLayers.Geometry.Point(-95,45)
]),
new OpenLayers.Geometry.Point(-105, 40)
]),
{
name: "ball-and-chain",
age: 30,
favColor: 'black',
align: 'rt'
});
var nullFeature = new OpenLayers.Feature.Vector(null);
nullFeature.attributes = {
name: "toto is some text about the world",
age: 20,
favColor: 'red',
align: "cm"
};
map.addLayer(vectorLayer);
vectorLayer.drawFeature(multiFeature);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, nullFeature ]);
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
<p>This example shows drawing simple vector features with a label</p>
</body>
</html>

11
lib/OpenLayers/Feature/Vector.js
View File

@@ -339,6 +339,17 @@ OpenLayers.Feature.Vector = OpenLayers.Class(OpenLayers.Feature, {
* backgroundYOffset - {Number} The y offset (in pixels) for the background graphic.
* backgroundHeight - {Number} The height of the background graphic. If not provided, the graphicHeight will be used.
* backgroundWidth - {Number} The width of the background width. If not provided, the graphicWidth will be used.
* label - {String} The text for an optional label. For browsers that use the canvas renderer, this requires either
* fillText or mozDrawText to be available.
* labelAlign - {String} Label alignment. This specifies the insertion point relative to the text. It is a string
* composed of two characters. The first character is for the horizontal alignment, the second for the vertical
* alignment. Valid values for horizontal alignment: "l"=left, "c"=center, "r"=right. Valid values for vertical
* alignment: "t"=top, "m"=middle, "b"=bottom. Example values: "lt", "cm", "rb". The canvas renderer does not
* support vertical alignment, it will always use "b".
* fontColor - {String} The font color for the label, to be provided like CSS.
* fontFamily - {String} The font family for the label, to be provided like in CSS.
* fontSize - {String} The font size for the label, to be provided like in CSS.
* fontWeight - {String} The font weight for the label, to be provided like in CSS.
* display - {String} Symbolizers will have no effect if display is set to "none". All other values have no effect.
*/
OpenLayers.Feature.Vector.style = {

11
lib/OpenLayers/Geometry.js
View File

@@ -225,6 +225,17 @@ OpenLayers.Geometry = OpenLayers.Class({
return 0.0;
},
/**
* APIMethod: getCentroid
* Calculate the centroid of this geometry. This method is defined in subclasses.
*
* Returns:
* {<OpenLayers.Geometry.Point>} The centroid of the collection
*/
getCentroid: function() {
return null;
},
/**
* Method: toString
* Returns the Well-Known Text representation of a geometry

21
lib/OpenLayers/Geometry/Collection.js
View File

@@ -257,6 +257,27 @@ OpenLayers.Geometry.Collection = OpenLayers.Class(OpenLayers.Geometry, {
return area;
},
/**
* APIMethod: getCentroid
*
* Returns:
* {<OpenLayers.Geometry.Point>} The centroid of the collection
*/
getCentroid: function() {
return this.components.length && this.components[0].getCentroid();
/*
var centroid;
for (var i=0, len=this.components.length; i<len; i++) {
if (!centroid) {
centroid = this.components[i].getCentroid();
} else {
centroid.resize(this.components[i].getCentroid(), 0.5);
}
}
return centroid;
*/
},
/**
* APIMethod: getGeodesicLength
* Calculate the approximate length of the geometry were it projected onto

23
lib/OpenLayers/Geometry/LinearRing.js
View File

@@ -183,6 +183,29 @@ OpenLayers.Geometry.LinearRing = OpenLayers.Class(
return this;
},
/**
* APIMethod: getCentroid
*
* Returns:
* {<OpenLayers.Geometry.Point>} The centroid of the collection
*/
getCentroid: function() {
if ( this.components && (this.components.length > 2)) {
var sumX = 0.0;
var sumY = 0.0;
for (var i = 0; i < this.components.length - 1; i++) {
var b = this.components[i];
var c = this.components[i+1];
sumX += (b.x + c.x) * (b.x * c.y - c.x * b.y);
sumY += (b.y + c.y) * (b.x * c.y - c.x * b.y);
}
var area = -1 * this.getArea();
var x = sumX / (6 * area);
var y = sumY / (6 * area);
}
return new OpenLayers.Geometry.Point(x, y);
},
/**
* APIMethod: getArea
* Note - The area is positive if the ring is oriented CW, otherwise

10
lib/OpenLayers/Geometry/Point.js
View File

@@ -187,6 +187,16 @@ OpenLayers.Geometry.Point = OpenLayers.Class(OpenLayers.Geometry, {
this.clearBounds();
},
/**
* APIMethod: getCentroid
*
* Returns:
* {<OpenLayers.Geometry.Point>} The centroid of the collection
*/
getCentroid: function() {
return new OpenLayers.Geometry.Point(this.x, this.y);
},
/**
* APIMethod: resize
* Resize a point relative to some origin. For points, this has the effect

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

@@ -591,7 +591,7 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
feature.layer = null;
if (feature.geometry) {
this.renderer.eraseGeometry(feature.geometry);
this.renderer.eraseFeatures(feature);
}
//in the case that this feature is one of the selected features,

31
lib/OpenLayers/Renderer.js
View File

@@ -176,7 +176,13 @@ OpenLayers.Renderer = OpenLayers.Class({
if (!bounds.intersectsBounds(this.extent)) {
style = {display: "none"};
}
return this.drawGeometry(feature.geometry, style, feature.id);
var rendered = this.drawGeometry(feature.geometry, style, feature.id);
if(style.display != "none" && style.label && rendered !== false) {
this.drawText(feature.id, style, feature.geometry.getCentroid());
} else {
this.removeText(feature.id);
}
return rendered;
}
}
},
@@ -196,6 +202,28 @@ OpenLayers.Renderer = OpenLayers.Class({
*/
drawGeometry: function(geometry, style, featureId) {},
/**
* Method: drawText
* Function for drawing text labels.
* This method is only called by the renderer itself.
*
* Parameters:
* featureId - {String}
* style -
* location - {<OpenLayers.Geometry.Point>}
*/
drawText: function(featureId, style, location) {},
/**
* Method: removeText
* Function for removing text labels.
* This method is only called by the renderer itself.
*
* Parameters:
* featureId - {String}
*/
removeText: function(featureId) {},
/**
* Method: clear
* Clear all vectors from the renderer.
@@ -231,6 +259,7 @@ OpenLayers.Renderer = OpenLayers.Class({
}
for(var i=0, len=features.length; i<len; ++i) {
this.eraseGeometry(features[i].geometry);
this.removeText(features[i].id);
}
},

74
lib/OpenLayers/Renderer/Canvas.js
View File

@@ -129,7 +129,9 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
'strokeOpacity': 1
}, style);
this.features[feature.id] = [feature, style];
if (feature.geometry) {
this.geometryMap[feature.geometry.id] = feature.id;
}
this.redraw();
},
@@ -142,7 +144,6 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
* Parameters:
* geometry - {<OpenLayers.Geometry>}
* style - {Object}
* featureId - {<String>}
*/
drawGeometry: function(geometry, style) {
var className = geometry.CLASS_NAME;
@@ -335,6 +336,52 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
}
},
/**
* Method: drawText
* This method is only called by the renderer itself.
*
* Parameters:
* location - {<OpenLayers.Point>}
* style - {Object}
*/
drawText: function(location, style) {
var pt = this.getLocalXY(location);
this.setCanvasStyle("reset");
this.canvas.fillStyle = style.fontColor;
this.canvas.globalAlpha = 1;
var fontStyle = style.fontWeight + " " + style.fontSize + " " + style.fontFamily;
if (this.canvas.fillText) {
// HTML5
var labelAlign =
OpenLayers.Renderer.Canvas.LABEL_ALIGN[style.labelAlign[0]] ||
"middle";
this.canvas.font = fontStyle;
this.canvas.textAlign = labelAlign;
this.canvas.fillText(style.label, pt[0], pt[1]);
} else if (this.canvas.mozDrawText) {
// Mozilla pre-Gecko1.9.1 (<FF3.1)
this.canvas.mozTextStyle = fontStyle;
// No built-in text alignment, so we measure and adjust the position
var len = this.canvas.mozMeasureText(style.label);
switch(style.labelAlign[0]) {
case "l":
break;
case "r":
pt[0] -= len;
break;
case "c":
default:
pt[0] -= len / 2;
}
this.canvas.translate(pt[0], pt[1]);
this.canvas.mozDrawText(style.label);
this.canvas.translate(-1*pt[0], -1*pt[1]);
}
this.setCanvasStyle("reset");
},
/**
* Method: getLocalXY
* transform geographic xy into pixel xy
@@ -415,13 +462,34 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
redraw: function() {
if (!this.locked) {
this.clear();
var labelMap = [];
var feature, style;
for (var id in this.features) {
if (!this.features.hasOwnProperty(id)) { continue; }
if (!this.features[id][0].geometry) { continue; }
this.drawGeometry(this.features[id][0].geometry, this.features[id][1]);
feature = this.features[id][0];
style = this.features[id][1];
if (!feature.geometry) { continue; }
this.drawGeometry(feature.geometry, style);
if(style.label) {
labelMap.push([feature, style]);
}
}
var item;
for (var i=0; len=labelMap.length, i<len; ++i) {
item = labelMap[i];
this.drawText(item[0].geometry.getCentroid(), item[1]);
}
}
},
CLASS_NAME: "OpenLayers.Renderer.Canvas"
});
/**
* Constant: OpenLayers.Renderer.Canvas.LABEL_ALIGN
* {Object}
*/
OpenLayers.Renderer.Canvas.LABEL_ALIGN = {
"l": "left",
"r": "right"
};

62
lib/OpenLayers/Renderer/Elements.js
View File

@@ -353,6 +353,24 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
*/
rendererRoot: null,
/**
* Property: root
* {DOMElement}
*/
root: null,
/**
* Property: vectorRoot
* {DOMElement}
*/
vectorRoot: null,
/**
* Property: textRoot
* {DOMElement}
*/
textRoot: null,
/**
* Property: xmlns
* {String}
@@ -373,6 +391,12 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
*/
BACKGROUND_ID_SUFFIX: "_background",
/**
* Constant: BACKGROUND_ID_SUFFIX
* {String}
*/
LABEL_ID_SUFFIX: "_label",
/**
* Property: minimumSymbolizer
* {Object}
@@ -399,7 +423,12 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
OpenLayers.Renderer.prototype.initialize.apply(this, arguments);
this.rendererRoot = this.createRenderRoot();
this.root = this.createRoot();
this.root = this.createRoot("_root");
this.vectorRoot = this.createRoot("_vroot");
this.textRoot = this.createRoot("_troot");
this.root.appendChild(this.vectorRoot);
this.root.appendChild(this.textRoot);
this.rendererRoot.appendChild(this.root);
this.container.appendChild(this.rendererRoot);
@@ -428,9 +457,14 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
* Remove all the elements from the root
*/
clear: function() {
if (this.root) {
while (this.root.childNodes.length > 0) {
this.root.removeChild(this.root.firstChild);
if (this.vectorRoot) {
while (this.vectorRoot.childNodes.length > 0) {
this.vectorRoot.removeChild(this.vectorRoot.firstChild);
}
}
if (this.textRoot) {
while (this.textRoot.childNodes.length > 0) {
this.textRoot.removeChild(this.textRoot.firstChild);
}
}
if (this.indexer) {
@@ -544,15 +578,15 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
if (this.indexer) {
var insert = this.indexer.insert(node);
if (insert) {
this.root.insertBefore(node, insert);
this.vectorRoot.insertBefore(node, insert);
} else {
this.root.appendChild(node);
this.vectorRoot.appendChild(node);
}
} else {
// if there's no indexer, simply append the node to root,
// but only if the node is a new one
if (node.parentNode !== this.root){
this.root.appendChild(node);
this.vectorRoot.appendChild(node);
}
}
@@ -788,6 +822,20 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
*/
drawSurface: function(node, geometry) {},
/**
* Method: removeText
* Removes a label
*
* Parameters:
* featureId - {String}
*/
removeText: function(featureId) {
var label = document.getElementById(featureId + this.LABEL_ID_SUFFIX);
if (label) {
this.textRoot.removeChild(label);
}
},
/**
* Method: getFeatureIdFromEvent
*

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

@@ -46,6 +46,12 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
*/
symbolSize: {},
/**
* Property: isGecko
* {Boolean}
*/
isGecko: null,
/**
* Constructor: OpenLayers.Renderer.SVG
*
@@ -59,6 +65,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
arguments);
this.translationParameters = {x: 0, y: 0};
this.isGecko = (navigator.userAgent.toLowerCase().indexOf("gecko/") != -1);
},
/**
@@ -337,6 +344,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
if (style.cursor != null) {
node.setAttributeNS(null, "cursor", style.cursor);
}
return node;
},
@@ -416,11 +424,14 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
/**
* Method: createRoot
*
* Parameter:
* suffix - {String} suffix to append to the id
*
* Returns:
* {DOMElement} The main root element to which we'll add vectors
* {DOMElement}
*/
createRoot: function() {
return this.nodeFactory(this.container.id + "_root", "g");
createRoot: function(suffix) {
return this.nodeFactory(this.container.id + suffix, "g");
},
/**
@@ -634,6 +645,60 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
}
},
/**
* Method: drawText
* This method is only called by the renderer itself.
*
* Parameters:
* featureId - {String}
* style -
* location - {<OpenLayers.Geometry.Point>}
*/
drawText: function(featureId, style, location) {
var resolution = this.getResolution();
var x = (location.x / resolution + this.left);
var y = (location.y / resolution - this.top);
var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");
var tspan = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_tspan", "tspan");
label.setAttributeNS(null, "x", x);
label.setAttributeNS(null, "y", -y);
label.setAttributeNS(null, "pointer-events", "none");
if (style.fontColor) {
label.setAttributeNS(null, "fill", style.fontColor);
}
if (style.fontFamily) {
label.setAttributeNS(null, "font-family", style.fontFamily);
}
if (style.fontSize) {
label.setAttributeNS(null, "font-size", style.fontSize);
}
if (style.fontWeight) {
label.setAttributeNS(null, "font-weight", style.fontWeight);
}
var align = style.labelAlign || "cm";
label.setAttributeNS(null, "text-anchor",
OpenLayers.Renderer.SVG.LABEL_ALIGN[align[0]] || "middle");
if (this.isGecko) {
label.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(!label.parentNode) {
label.appendChild(tspan);
this.textRoot.appendChild(label);
}
},
/**
* Method: getComponentString
*
@@ -828,3 +893,28 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
CLASS_NAME: "OpenLayers.Renderer.SVG"
});
/**
* Constant: OpenLayers.Renderer.SVG.LABEL_ALIGN
* {Object}
*/
OpenLayers.Renderer.SVG.LABEL_ALIGN = {
"l": "start",
"r": "end",
"b": "bottom",
"t": "hanging"
};
/**
* Constant: OpenLayers.Renderer.SVG.LABEL_VSHIFT
* {Object}
*/
OpenLayers.Renderer.SVG.LABEL_VSHIFT = {
// according to
// http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-text-align-02-b.html
// a baseline-shift of -70% shifts the text exactly from the
// bottom to the top of the baseline, so -35% moves the text to
// the center of the baseline.
"t": "-70%",
"b": "0"
};

100
lib/OpenLayers/Renderer/VML.js
View File

@@ -109,12 +109,18 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
top = top - this.offset.y;
}
var org = left + " " + top;
this.root.setAttribute("coordorigin", org);
var roots = [this.root, this.vectorRoot, this.textRoot];
var root;
for(var i=0, len=roots.length; i<len; ++i) {
root = roots[i];
var size = this.size.w + " " + this.size.h;
this.root.setAttribute("coordsize", size);
root.setAttribute("coordsize", size);
}
// flip the VML display Y axis upside down so it
// matches the display Y axis of the map
this.root.style.flip = "y";
@@ -133,11 +139,22 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
setSize: function(size) {
OpenLayers.Renderer.prototype.setSize.apply(this, arguments);
this.rendererRoot.style.width = this.size.w + "px";
this.rendererRoot.style.height = this.size.h + "px";
this.root.style.width = this.size.w + "px";
this.root.style.height = this.size.h + "px";
// setting width and height on all roots to avoid flicker which we
// would get with 100% width and height on child roots
var roots = [
this.rendererRoot,
this.root,
this.vectorRoot,
this.textRoot
];
var w = this.size.w + "px";
var h = this.size.h + "px";
var root;
for(var i=0, len=roots.length; i<len; ++i) {
root = roots[i];
root.style.width = w;
root.style.height = h;
}
},
/**
@@ -583,11 +600,14 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
* Method: createRoot
* Create the main root element
*
* Parameters:
* suffix - {String} suffix to append to the id
*
* Returns:
* {DOMElement} The main root element to which we'll add vectors
* {DOMElement}
*/
createRoot: function() {
return this.nodeFactory(this.container.id + "_root", "olv:group");
createRoot: function(suffix) {
return this.nodeFactory(this.container.id + suffix, "olv:group");
},
/**************************************
@@ -763,6 +783,55 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
return node;
},
/**
* Method: drawText
* This method is only called by the renderer itself.
*
* Parameters:
* featureId - {String}
* style -
* location - {<OpenLayers.Geometry.Point>}
*/
drawText: function(featureId, style, location) {
var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "olv:rect");
var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");
var resolution = this.getResolution();
label.style.left = (location.x/resolution - this.offset.x).toFixed() + "px";
label.style.top = (location.y/resolution - this.offset.y).toFixed() + "px";
label.style.flip = "y";
textbox.innerText = style.label;
if (style.fillColor) {
textbox.style.color = style.fontColor;
}
if (style.fontFamily) {
textbox.style.fontFamily = style.fontFamily;
}
if (style.fontSize) {
textbox.style.fontSize = style.fontSize;
}
if (style.fontWeight) {
textbox.style.fontWeight = style.fontWeight;
}
textbox.style.whiteSpace = "nowrap";
textbox.inset = "0px,0px,0px,0px";
if(!label.parentNode) {
label.appendChild(textbox);
this.textRoot.appendChild(label);
}
var align = style.labelAlign || "cm";
var xshift = textbox.clientWidth *
(OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]);
var yshift = textbox.clientHeight *
(OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]);
label.style.left = parseInt(label.style.left)-xshift+"px";
label.style.top = parseInt(label.style.top)+yshift+"px";
},
/**
* Method: drawSurface
*
@@ -886,3 +955,16 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
CLASS_NAME: "OpenLayers.Renderer.VML"
});
/**
* Constant: OpenLayers.Renderer.VML.LABEL_SHIFT
* {Object}
*/
OpenLayers.Renderer.VML.LABEL_SHIFT = {
"l": 0,
"c": .5,
"r": 1,
"t": 0,
"m": .5,
"b": 1
};

2
tests/Layer/Vector.html
View File

@@ -426,7 +426,7 @@
graphicYOffset: -16
});
var root = renderer.root;
var root = renderer.vectorRoot;
if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG') {
feature.style = customStyle1;
layer.drawFeature(feature);

16
tests/Layer/Vector/RootContainer.html
View File

@@ -5,7 +5,6 @@
var layer, map;
function test_RootContainer_collectResetRoots(t) {
t.plan(4);
map = new OpenLayers.Map("map");
var layer1 = new OpenLayers.Layer.Vector("layer1");
@@ -14,14 +13,23 @@
layers: [layer1, layer2]
});
// we cannot test this with a renderer that does not hava a rendererRoot
var plan = layer.renderer.rendererRoot ? 4 : 0;
t.plan(plan);
if(plan == 0) {
return;
}
var numRoots = layer.renderer.rendererRoot.childNodes.length;
// addLayers will call setMap() for layer, which will call collectRoots()
map.addLayers([layer1, layer2, layer]);
t.eq(layer.renderer.rendererRoot.childNodes.length, 3, "layer has correct number of renderer roots");
t.eq(layer.renderer.rendererRoot.childNodes.length, numRoots * 3, "layer has correct number of renderer roots");
t.eq(layer1.renderer.rendererRoot.childNodes.length, 0, "layer1 has no own renderer root");
layer.resetRoots();
t.eq(layer.renderer.rendererRoot.childNodes.length, 1, "roots removed from container");
t.eq(layer1.renderer.rendererRoot.childNodes.length, 1, "root re-added to original layer");
t.eq(layer.renderer.rendererRoot.childNodes.length, numRoots, "roots removed from container");
t.eq(layer1.renderer.rendererRoot.childNodes.length, numRoots, "root re-added to original layer");
}
function test_RootContainer_getFeatureFromEvent(t) {

32
tests/Renderer/Elements.html
View File

@@ -17,9 +17,8 @@
OpenLayers.Renderer.Elements.prototype._createRoot =
OpenLayers.Renderer.Elements.prototype.createRoot;
var root = document.createElement("div");
OpenLayers.Renderer.Elements.prototype.createRoot = function() {
return root;
return document.createElement("div");
};
OpenLayers.Renderer.Elements.prototype._createNode =
@@ -108,7 +107,7 @@
}
function test_Elements_clear(t) {
t.plan(1);
t.plan(2);
setUp();
@@ -121,7 +120,8 @@
r.clear();
t.ok(r.root.childNodes.length == 0, "root is correctly cleared");
t.ok(r.vectorRoot.childNodes.length == 0, "vector root is correctly cleared");
t.ok(r.textRoot.childNodes.length == 0, "text root is correctly cleared");
tearDown();
}
@@ -134,7 +134,7 @@
var r = create_renderer();
var element = document.createElement("div");
r.root = element;
r.vectorRoot = element;
r.nodeFactory = function(id, type) {
var element = document.createElement("div");
@@ -149,7 +149,7 @@
r.redrawBackgroundNode = function(id, geometry, style, featureId) {
b_Node = r.nodeFactory();
b_Node.id = "foo_background";
r.root.appendChild(b_Node);
element.appendChild(b_Node);
};
r.getNodeType = function(geometry, style) {
@@ -162,8 +162,8 @@
var style = {'backgroundGraphic': 'foo'};
var featureId = 'dude';
r.drawGeometry(geometry, style, featureId);
t.ok(g_Node.parentNode == r.root, "node is correctly appended to root");
t.ok(b_Node.parentNode == r.root, "redrawBackgroundNode appended background node");
t.ok(g_Node.parentNode == element, "node is correctly appended to root");
t.ok(b_Node.parentNode == element, "redrawBackgroundNode appended background node");
t.eq(g_Node._featureId, 'dude', "_featureId is correct");
t.eq(g_Node._style.backgroundGraphic, "foo", "_style is correct");
t.eq(g_Node._geometryClass, 'bar', "_geometryClass is correct");
@@ -178,8 +178,8 @@
style = {'display':'none'};
r.drawGeometry(geometry, style, featureId);
t.ok(g_Node.parentNode != r.root, "node is correctly removed");
t.ok(b_Node.parentNode != r.root, "background node correctly removed")
t.ok(g_Node.parentNode != element, "node is correctly removed");
t.ok(b_Node.parentNode != element, "background node correctly removed")
document.getElementById = _getElement;
@@ -474,7 +474,7 @@
var r = create_renderer(null, {zIndexing: true});
var element = document.createElement("div");
r.root = element;
r.vectorRoot = element;
document.body.appendChild(element);
r.createNode = function(type, id) {
@@ -505,14 +505,14 @@
return result;
}
t.eq(r.root.childNodes.length, 1, "root is correctly filled");
t.eq(element.childNodes.length, 1, "root is correctly filled");
t.eq(r.indexer.maxZIndex, 10, "indexer.maxZIndex is correctly filled");
t.eq(r.indexer.order.length, 1, "indexer.order is correctly filled");
t.eq(count(r.indexer.indices), 1, "indexer.indices is correctly filled");
r.eraseGeometry(geometry);
t.eq(r.root.childNodes.length, 0, "root is correctly cleared");
t.eq(element.childNodes.length, 0, "root is correctly cleared");
t.eq(r.indexer.maxZIndex, 0, "indexer.maxZIndex is correctly reset");
t.eq(r.indexer.order.length, 0, "indexer.order is correctly reset");
t.eq(count(r.indexer.indices), 0, "indexer.indices is correctly reset");
@@ -520,14 +520,14 @@
delete(style.graphicZIndex);
r.drawGeometry(geometry, style, featureId);
t.eq(r.root.childNodes.length, 1, "root is correctly filled");
t.eq(element.childNodes.length, 1, "root is correctly filled");
t.eq(r.indexer.maxZIndex, 0, "indexer.maxZIndex is correctly filled");
t.eq(r.indexer.order.length, 1, "indexer.order is correctly filled");
t.eq(count(r.indexer.indices), 1, "indexer.indices is correctly filled");
r.clear();
t.eq(r.root.childNodes.length, 0, "root is correctly cleared");
t.eq(element.childNodes.length, 0, "root is correctly cleared");
t.eq(r.indexer.maxZIndex, 0, "indexer.maxZIndex is correctly reset");
t.eq(r.indexer.order.length, 0, "indexer.order is correctly reset");
t.eq(count(r.indexer.indices), 0, "indexer.indices is correctly reset");
@@ -535,7 +535,7 @@
style.graphicZIndex = 12;
r.drawGeometry(geometry, style, featureId);
t.eq(r.root.childNodes.length, 1, "root is correctly filled");
t.eq(element.childNodes.length, 1, "root is correctly filled");
t.eq(r.indexer.maxZIndex, 12, "indexer.maxZIndex is correctly filled");
t.eq(r.indexer.order.length, 1, "indexer.order is correctly filled");
t.eq(count(r.indexer.indices), 1, "indexer.indices is correctly filled");