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

fix bug where tiles with gutters are shifted (refs #441)

Browse Source
This commit is contained in:
Éric Lemoine
2012-04-27 23:28:32 +02:00
parent 1ace4df160
commit 612401a644
2 changed files with 101 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lib/OpenLayers/Tile/Image.js
View File

@@ -211,7 +211,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
*/
positionTile: function() {
var style = this.getTile().style,
size = this.layer.getImageSize(this.bounds);
size = this.frame ? this.size :
this.layer.getImageSize(this.bounds);
style.left = this.position.x + "%";
style.top = this.position.y + "%";
style.width = size.w + "%";
@@ -254,11 +255,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
this.imgDiv.galleryImg = "no";
var style = this.imgDiv.style;
if (this.layer.gutter) {
var left = this.layer.gutter / this.layer.tileSize.w * 100;
var top = this.layer.gutter / this.layer.tileSize.h * 100;
if (this.frame) {
var left = 0, top = 0;
if (this.layer.gutter) {
left = this.layer.gutter / this.layer.tileSize.w * 100;
top = this.layer.gutter / this.layer.tileSize.h * 100;
}
style.left = -left + "%";
style.top = -top + "%";
style.width = (2 * left + 100) + "%";
style.height = (2 * top + 100) + "%";
}
style.visibility = "hidden";
style.opacity = 0;
@@ -275,8 +281,6 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
style.width = "100%";
}
if (this.frame) {
style.width = "100%";
style.height = "100%";
this.frame.appendChild(this.imgDiv);
}
}

91
tests/Tile/Image.html
View File

@@ -399,6 +399,97 @@
}
}
/*
* A series of tests to verify the dimensions and positions
* of the tile frame and img after draw.
* Written for https://github.com/openlayers/openlayers/issues/441
*/
function test_draw_without_gutter_without_frame(t) {
t.plan(5);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('blank',
'../../img/blank.gif',
{layers: 'fake'},
{isBaseLayer: true});
map.addLayer(layer);
var tile = new OpenLayers.Tile.Image(
layer,
new OpenLayers.Pixel(6, 6),
new OpenLayers.Bounds(5, 45, 6, 46),
null,
new OpenLayers.Size(256, 256));
tile.draw();
t.eq(tile.frame, null, 'no frame');
t.eq(parseInt(tile.imgDiv.style.left, 10), 6, 'correct tile img left');
t.eq(parseInt(tile.imgDiv.style.top, 10), 6, 'correct tile img top');
t.eq(parseInt(tile.imgDiv.style.width, 10), 256, 'correct tile img width');
t.eq(parseInt(tile.imgDiv.style.height, 10), 256, 'correct tile img height');
map.destroy();
}
function test_draw_without_gutter_with_frame(t) {
t.plan(8);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('blank',
'../../img/blank.gif',
{layers: 'fake'},
{isBaseLayer: true});
map.addLayer(layer);
layer.gutter = 1; // this is just for a frame to be created for
// the tile
var tile = new OpenLayers.Tile.Image(
layer,
new OpenLayers.Pixel(6, 6),
new OpenLayers.Bounds(5, 45, 6, 46),
null,
new OpenLayers.Size(256, 256));
layer.gutter = null;
tile.draw();
t.eq(parseInt(tile.frame.style.left, 10), 6, 'correct tile frame left');
t.eq(parseInt(tile.frame.style.top, 10), 6, 'correct tile frame top');
t.eq(parseInt(tile.frame.style.width, 10), 256, 'correct tile frame width');
t.eq(parseInt(tile.frame.style.height, 10), 256, 'correct tile frame height');
t.eq(parseInt(tile.imgDiv.style.left, 10), 0, 'correct tile img left');
t.eq(parseInt(tile.imgDiv.style.top, 10), 0, 'correct tile img top');
t.eq(parseInt(tile.imgDiv.style.width, 10), 100, 'correct tile img width');
t.eq(parseInt(tile.imgDiv.style.height, 10), 100, 'correct tile img height');
map.destroy();
}
function test_draw_with_gutter(t) {
t.plan(8);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS('blank',
'../../img/blank.gif',
{layers: 'fake'},
{isBaseLayer: true, gutter: 15});
map.addLayer(layer);
var tile = new OpenLayers.Tile.Image(
layer,
new OpenLayers.Pixel(6, 6),
new OpenLayers.Bounds(5, 45, 6, 46),
null,
new OpenLayers.Size(256, 256));
tile.draw();
t.eq(parseInt(tile.frame.style.left, 10), 6, 'correct tile frame left');
t.eq(parseInt(tile.frame.style.top, 10), 6, 'correct tile frame top');
t.eq(parseInt(tile.frame.style.width, 10), 256, 'correct tile frame width');
t.eq(parseInt(tile.frame.style.height, 10), 256, 'correct tile frame height');
t.eq(parseInt(tile.imgDiv.style.left, 10), -5, 'correct tile img left');
t.eq(parseInt(tile.imgDiv.style.top, 10), -5, 'correct tile img top');
t.eq(parseInt(tile.imgDiv.style.width, 10), 111, 'correct tile img width');
t.eq(parseInt(tile.imgDiv.style.height, 10), 111, 'correct tile img height');
map.destroy();
}
</script>
</head>
<body>