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

Merge pull request #13521 from mike-000/gutter

Browse Source 
Include tile gutter in offsets for getData() methods
This commit is contained in:
Tim Schaub
2022-03-30 08:29:04 -06:00
committed by GitHub
parent 432870362b d2da88a3fd
commit 10fb55b9e6
6 changed files with 163 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/ol/renderer/canvas/Layer.js
View File

@@ -120,6 +120,7 @@ class CanvasLayerRenderer extends LayerRenderer {
pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1);
data = pixelContext.getImageData(0, 0, 1, 1).data;
} catch (err) {
pixelContext = null;
return null;
}
return data;

6
src/ol/renderer/canvas/TileLayer.js
View File

@@ -208,7 +208,11 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
tileCoord[2] * tileSize[1])
);
return this.getImageData(tile.getImage(), col, row);
const gutter = Math.round(
tilePixelRatio * source.getGutterForProjection(viewState.projection)
);
return this.getImageData(tile.getImage(), col + gutter, row + gutter);
}
return null;

14
src/ol/webgl/TileTexture.js
View File

@@ -397,10 +397,22 @@ class TileTexture extends EventTarget {
let data;
const image = this.tile.getImage();
const gutter = Math.round(this.tilePixelRatio_ * this.gutter_);
try {
pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1);
pixelContext.drawImage(
image,
col + gutter,
row + gutter,
1,
1,
0,
0,
1,
1
);
data = pixelContext.getImageData(0, 0, 1, 1).data;
} catch (err) {
pixelContext = null;
return null;
}
return data;

BIN
test/browser/spec/ol/data/wms20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

73
test/browser/spec/ol/layer/Tile.test.js
View File

@@ -1,6 +1,6 @@
import TileLayer from '../../../../../src/ol/layer/Tile.js';
import {Map, View} from '../../../../../src/ol/index.js';
import {OSM, XYZ} from '../../../../../src/ol/source.js';
import {OSM, TileWMS, XYZ} from '../../../../../src/ol/source.js';
describe('ol/layer/Tile', function () {
describe('constructor (defaults)', function () {
@@ -78,6 +78,77 @@ describe('ol/layer/Tile', function () {
});
});
describe('gutter', () => {
let map, target, layer, data;
beforeEach((done) => {
target = document.createElement('div');
target.style.width = '256px';
target.style.height = '256px';
document.body.appendChild(target);
layer = new TileLayer({
source: new TileWMS({
params: {
LAYERS: 'layer',
},
gutter: 20,
url: 'spec/ol/data/wms20.png',
}),
});
map = new Map({
target: target,
pixelRatio: 1,
layers: [layer],
view: new View({
center: [0, 0],
zoom: 0,
}),
});
map.once('rendercomplete', () => done());
});
afterEach(() => {
map.setTarget(null);
document.body.removeChild(target);
});
it('gets pixel data', () => {
data = layer.getData([76, 114]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(77);
expect(data[1]).to.be(255);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
data = layer.getData([76, 118]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(255);
expect(data[1]).to.be(77);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
data = layer.getData([80, 114]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(255);
expect(data[1]).to.be(77);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
data = layer.getData([80, 118]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(77);
expect(data[1]).to.be(255);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
});
});
describe('frameState.animate after tile transition with layer opacity', function () {
let target, map;

72
test/browser/spec/ol/layer/WebGLTile.test.js
View File

@@ -1,5 +1,6 @@
import DataTileSource from '../../../../../src/ol/source/DataTile.js';
import Map from '../../../../../src/ol/Map.js';
import TileWMS from '../../../../../src/ol/source/TileWMS.js';
import View from '../../../../../src/ol/View.js';
import WebGLHelper from '../../../../../src/ol/webgl/Helper.js';
import WebGLTileLayer from '../../../../../src/ol/layer/WebGLTile.js';
@@ -128,6 +129,77 @@ describe('ol/layer/WebGLTile', function () {
});
});
describe('gutter', () => {
let map, target, layer, data;
beforeEach((done) => {
target = document.createElement('div');
target.style.width = '256px';
target.style.height = '256px';
document.body.appendChild(target);
layer = new WebGLTileLayer({
source: new TileWMS({
params: {
LAYERS: 'layer',
},
gutter: 20,
url: 'spec/ol/data/wms20.png',
}),
});
map = new Map({
target: target,
pixelRatio: 1,
layers: [layer],
view: new View({
center: [0, 0],
zoom: 0,
}),
});
map.once('rendercomplete', () => done());
});
afterEach(() => {
map.setTarget(null);
document.body.removeChild(target);
});
it('gets pixel data', () => {
data = layer.getData([76, 114]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(77);
expect(data[1]).to.be(255);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
data = layer.getData([76, 118]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(255);
expect(data[1]).to.be(77);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
data = layer.getData([80, 114]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(255);
expect(data[1]).to.be(77);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
data = layer.getData([80, 118]);
expect(data).to.be.a(Uint8ClampedArray);
expect(data.length).to.be(4);
expect(data[0]).to.be(77);
expect(data[1]).to.be(255);
expect(data[2]).to.be(77);
expect(data[3]).to.be(179);
});
});
describe('dispose()', () => {
it('calls dispose on the renderer', () => {
const renderer = layer.getRenderer();