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

handle gutter in renderer

Browse Source
This commit is contained in:
mike-000
2022-04-08 11:29:07 +01:00
parent c03f58fe5d
commit 36159287d5
2 changed files with 34 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/ol/renderer/webgl/TileLayer.js
View File

@@ -420,6 +420,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
const tileLayer = this.getLayer();
const tileSource = tileLayer.getRenderSource();
const tileGrid = tileSource.getTileGridForProjection(viewState.projection);
const gutter = tileSource.getGutterForProjection(viewState.projection);
const extent = getRenderExtent(frameState, frameState.extent);
const z = tileGrid.getZForResolution(
viewState.resolution,
@@ -543,11 +544,13 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
this.tileTransform_,
0,
0,
2 / ((frameState.size[0] * tileScale) / tileSize[0]),
-2 / ((frameState.size[1] * tileScale) / tileSize[1]),
2 / ((frameState.size[0] * tileScale) / (tileSize[0] + 2 * gutter)),
-2 / ((frameState.size[1] * tileScale) / (tileSize[1] + 2 * gutter)),
viewState.rotation,
-(centerI - tileCenterI),
-(centerJ - tileCenterJ)
((tileCenterI - centerI - gutter / tileSize[0]) * tileSize[0]) /
(tileSize[0] + 2 * gutter),
((tileCenterJ - centerJ - gutter / tileSize[1]) * tileSize[1]) /
(tileSize[1] + 2 * gutter)
);
this.helper.setUniformMatrixValue(
@@ -599,11 +602,11 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
this.helper.setUniformFloatValue(Uniforms.DEPTH, depth);
this.helper.setUniformFloatValue(
Uniforms.TEXTURE_PIXEL_WIDTH,
tileSize[0]
tileSize[0] + 2 * gutter
);
this.helper.setUniformFloatValue(
Uniforms.TEXTURE_PIXEL_HEIGHT,
tileSize[1]
tileSize[1] + 2 * gutter
);
this.helper.setUniformFloatValue(
Uniforms.TEXTURE_RESOLUTION,
@@ -611,13 +614,22 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
);
this.helper.setUniformFloatValue(
Uniforms.TEXTURE_ORIGIN_X,
tileOrigin[0] + tileCenterI * tileSize[0] * tileResolution
tileOrigin[0] +
tileCenterI * tileSize[0] * tileResolution -
gutter * tileResolution
);
this.helper.setUniformFloatValue(
Uniforms.TEXTURE_ORIGIN_Y,
tileOrigin[1] - tileCenterJ * tileSize[1] * tileResolution
tileOrigin[1] -
tileCenterJ * tileSize[1] * tileResolution +
gutter * tileResolution
);
this.helper.setUniformFloatVec4(Uniforms.RENDER_EXTENT, extent);
let gutterExtent = extent;
if (gutter > 0) {
gutterExtent = tileGrid.getTileCoordExtent(tileCoord);
getIntersection(gutterExtent, extent, gutterExtent);
}
this.helper.setUniformFloatVec4(Uniforms.RENDER_EXTENT, gutterExtent);
this.helper.setUniformFloatValue(
Uniforms.RESOLUTION,
viewState.resolution

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

@@ -10,9 +10,6 @@ import ReprojTile from '../reproj/Tile.js';
import TileState from '../TileState.js';
import WebGLArrayBuffer from './Buffer.js';
import {ARRAY_BUFFER, STATIC_DRAW} from '../webgl.js';
import {IMAGE_SMOOTHING_DISABLED} from '../renderer/canvas/common.js';
import {assign} from '../obj.js';
import {createCanvasContext2D} from '../dom.js';
import {toSize} from '../size.js';
/**
@@ -243,38 +240,16 @@ class TileTexture extends EventTarget {
const tile = this.tile;
if (tile instanceof ImageTile || tile instanceof ReprojTile) {
let image = tile.getImage();
if (this.gutter_ !== 0) {
const gutter = this.tilePixelRatio_ * this.gutter_;
const width = Math.round(image.width - 2 * gutter);
const height = Math.round(image.height - 2 * gutter);
const context = createCanvasContext2D(width, height);
if (!tile.interpolate) {
assign(context, IMAGE_SMOOTHING_DISABLED);
}
context.drawImage(
image,
gutter,
gutter,
width,
height,
0,
0,
width,
height
);
image = context.canvas;
}
const texture = gl.createTexture();
this.textures.push(texture);
this.bandCount = 4;
uploadImageTexture(gl, texture, image, tile.interpolate);
uploadImageTexture(gl, texture, tile.getImage(), tile.interpolate);
return;
}
const pixelSize = [
this.size[0] * this.tilePixelRatio_,
this.size[1] * this.tilePixelRatio_,
(this.size[0] + 2 * this.gutter_) * this.tilePixelRatio_,
(this.size[1] + 2 * this.gutter_) * this.tilePixelRatio_,
];
const data = tile.getData();
const isFloat = data instanceof Float32Array;
@@ -373,14 +348,19 @@ class TileTexture extends EventTarget {
return null;
}
col = Math.floor(this.tilePixelRatio_ * col);
row = Math.floor(this.tilePixelRatio_ * row);
const gutter = Math.round(this.tilePixelRatio_ * this.gutter_);
col = Math.floor(this.tilePixelRatio_ * col) + gutter;
row = Math.floor(this.tilePixelRatio_ * row) + gutter;
if (this.tile instanceof DataTile) {
const data = this.tile.getData();
const pixelsPerRow = Math.floor(this.tilePixelRatio_ * this.size[0]);
let size = this.size;
if (gutter > 0) {
size = [size[0] + 2 * this.gutter_, size[1] + 2 * this.gutter_];
}
const pixelsPerRow = Math.floor(this.tilePixelRatio_ * size[0]);
if (data instanceof DataView) {
const bytesPerPixel = data.byteLength / (this.size[0] * this.size[1]);
const bytesPerPixel = data.byteLength / (size[0] * size[1]);
const offset = row * pixelsPerRow * bytesPerPixel + col * bytesPerPixel;
const buffer = data.buffer.slice(offset, offset + bytesPerPixel);
return new DataView(buffer);
@@ -397,19 +377,8 @@ class TileTexture extends EventTarget {
let data;
const image = this.tile.getImage();
const gutter = Math.round(this.tilePixelRatio_ * this.gutter_);
try {
pixelContext.drawImage(
image,
col + gutter,
row + gutter,
1,
1,
0,
0,
1,
1
);
pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1);
data = pixelContext.getImageData(0, 0, 1, 1).data;
} catch (err) {
pixelContext = null;