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

allow user to specify offsets for externalGraphic (closes #893)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@4268 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2007-09-13 20:36:36 +00:00
parent 68472d888b
commit ab53ba3982
5 changed files with 63 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/vector-features.html
View File

@@ -58,6 +58,8 @@
// of the image will be ignored
style_mark.graphicWidth = 24;
style_mark.graphicHeight = 20;
style_mark.graphicXOffset = -(style_mark.graphicWidth/2); // this is the default value
style_mark.graphicYOffset = -style_mark.graphicHeight;
style_mark.externalGraphic = "../img/marker.png";
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});

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

@@ -263,6 +263,8 @@ OpenLayers.Feature.Vector = OpenLayers.Class(OpenLayers.Feature, {
* - graphicWidth,
* - graphicHeight,
* - graphicOpacity
* - graphicXOffset
* - graphicYOffset
*/
OpenLayers.Feature.Vector.style = {
'default': {

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

@@ -184,8 +184,8 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
if (style.externalGraphic) {
// remove old node
var id = node.getAttributeNS(null, "id");
var x = node.getAttributeNS(null, "cx");
var y = node.getAttributeNS(null, "cy");
var x = parseFloat(node.getAttributeNS(null, "cx"));
var y = parseFloat(node.getAttributeNS(null, "cy"));
var _featureId = node._featureId;
var _geometryClass = node._geometryClass;
var _style = node._style;
@@ -206,10 +206,14 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var height = style.graphicHeight || style.graphicWidth;
width = width ? width : style.pointRadius*2;
height = height ? height : style.pointRadius*2;
var xOffset = (style.graphicXOffset != undefined) ?
style.graphicXOffset : -(0.5 * width);
var yOffset = (style.graphicYOffset != undefined) ?
style.graphicYOffset : -(0.5 * height);
var opacity = style.graphicOpacity || style.fillOpacity;
node.setAttributeNS(null, "x", x-(.5*width).toFixed());
node.setAttributeNS(null, "y", -y-(.5*height).toFixed());
node.setAttributeNS(null, "x", (x + xOffset).toFixed());
node.setAttributeNS(null, "y", (-y + yOffset).toFixed());
node.setAttributeNS(null, "width", width);
node.setAttributeNS(null, "height", height);
node.setAttributeNS("http://www.w3.org/1999/xlink", "href", style.externalGraphic);

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

@@ -181,9 +181,15 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var height = style.graphicHeight || style.graphicWidth;
width = width ? width : style.pointRadius*2;
height = height ? height : style.pointRadius*2;
var resolution = this.getResolution();
node.style.left = (geometry.x/resolution-.5*width).toFixed();
node.style.top = (geometry.y/resolution-.5*height).toFixed();
var xOffset = (style.graphicXOffset != undefined) ?
style.graphicXOffset : -(0.5 * width);
var yOffset = (style.graphicYOffset != undefined) ?
style.graphicYOffset : -(0.5 * height);
node.style.left = ((geometry.x/resolution)+xOffset).toFixed();
node.style.top = ((geometry.y/resolution)-(yOffset+height)).toFixed();
node.style.width = width;
node.style.height = height;

46
tests/Layer/test_Vector.html
View File

@@ -158,7 +158,7 @@
}
function test_Layer_Vector_externalGraphic(t) {
t.plan(9);
t.plan(11);
// base layer is needed for getResolution() to return a value,
// otherwise VML test will fail because style.left and style.top
// cannot be set
@@ -169,12 +169,17 @@
format: 'image/png'});
var layer = new OpenLayers.Layer.Vector("Test Layer");
var renderer = layer.renderer;
var map = new OpenLayers.Map('map');
map.addLayers([baseLayer, layer]);
var geometry = new OpenLayers.Geometry.Point(10, 10);
var geometryX = 10;
var geometryY = 10;
var geometry = new OpenLayers.Geometry.Point(geometryX, geometryY);
var feature = new OpenLayers.Feature.Vector(geometry);
map.zoomToMaxExtent();
var customStyle1 = new Object({
externalGraphic: 'test.png',
pointRadius: 10
@@ -197,8 +202,15 @@
graphicWidth: 24,
graphicOpacity: 1
});
var customStyle6 = new Object({
externalGraphic: 'test.png',
graphicWidth: 24,
graphicHeight: 16,
graphicXOffset: -24,
graphicYOffset: -16
});
var root = layer.renderer.root;
var root = renderer.root;
if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG') {
feature.style = customStyle1;
layer.drawFeature(feature);
@@ -237,6 +249,23 @@
t.eq(root.firstChild.getAttributeNS(null, 'style'),
'opacity: '+customStyle5.graphicOpacity.toString()+';',
"graphicOpacity correctly set");
feature.style = customStyle6;
layer.drawFeature(feature);
var x = geometryX / renderer.getResolution() + renderer.left;
var y = geometryY / renderer.getResolution() - renderer.top;
// SVG setStyle() gets x and y using getAttributeNS(), which returns
// a value with only 3 decimal digits. To mimic this we use toFixed(3) here
x = x.toFixed(3);
y = y.toFixed(3);
// toFixed() returns a string
x = parseFloat(x);
y = parseFloat(y);
t.eq(root.firstChild.getAttributeNS(null, 'x'),
(x + customStyle6.graphicXOffset).toFixed().toString(),
"graphicXOffset correctly set");
t.eq(root.firstChild.getAttributeNS(null, 'y'),
(-y + customStyle6.graphicYOffset).toFixed().toString(),
"graphicYOffset correctly set");
}
if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
feature.style = customStyle1;
@@ -279,6 +308,17 @@
t.eq(opacity,
customStyle5.graphicOpacity,
"graphicOpacity correctly set");
feature.style = customStyle6;
layer.drawFeature(feature);
var x = geometryX / renderer.getResolution();
var y = geometryY / renderer.getResolution();
t.eq(root.firstChild.style.left,
(x + customStyle6.graphicXOffset).toFixed().toString()+'px',
"graphicXOffset correctly set");
t.eq(root.firstChild.style.top,
(y - (customStyle6.graphicYOffset+parseInt(root.firstChild.style.height))).toFixed().toString()+'px',
"graphicYOffset correctly set");
}
}