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

Add gutter support to ol.renderer.webgl.TileLayer

Browse Source
This commit is contained in:
Éric Lemoine
2013-12-10 16:58:45 +01:00
parent 5c71ec4922
commit 701b2d63ef
2 changed files with 64 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/ol/renderer/webgl/webglmaprenderer.js
View File

@@ -75,6 +75,26 @@ ol.renderer.webgl.Map = function(container, map) {
this.canvas_.className = ol.css.CLASS_UNSELECTABLE;
goog.dom.insertChildAt(container, this.canvas_, 0);
/**
* @private
* @type {HTMLCanvasElement}
*/
this.clipTileCanvas_ = /** @type {HTMLCanvasElement} */
(goog.dom.createElement(goog.dom.TagName.CANVAS));
/**
* @private
* @type {ol.Size}
*/
this.clipTileCanvasSize_ = [0, 0];
/**
* @private
* @type {CanvasRenderingContext2D}
*/
this.clipTileContext_ = /** @type {CanvasRenderingContext2D} */
(this.clipTileCanvas_.getContext('2d'));
/**
* @private
* @type {boolean}
@@ -184,9 +204,14 @@ ol.renderer.webgl.Map = function(container, map) {
function(map, frameState) {
if (!this.tileTextureQueue_.isEmpty()) {
this.tileTextureQueue_.reprioritize();
var tile =
/** @type {ol.Tile} */ (this.tileTextureQueue_.dequeue()[0]);
this.bindTileTexture(tile, goog.webgl.LINEAR, goog.webgl.LINEAR);
var element = this.tileTextureQueue_.dequeue();
var tile = /** @type {ol.Tile} */ (element[0]);
var tileWidth = /** @type {number} */ (element[3]);
var tileHeight = /** @type {number} */ (element[4]);
var tileGutter = /** @type {number} */ (element[5]);
this.bindTileTexture(tile,
tileWidth, tileHeight, tileGutter,
goog.webgl.LINEAR, goog.webgl.LINEAR);
}
}, this);
@@ -245,11 +270,14 @@ ol.renderer.webgl.Map.prototype.bindBuffer = function(target, buf) {
/**
* @param {ol.Tile} tile Tile.
* @param {number} tileWidth Tile width.
* @param {number} tileHeight Tile height.
* @param {number} tileGutter Tile gutter.
* @param {number} magFilter Mag filter.
* @param {number} minFilter Min filter.
*/
ol.renderer.webgl.Map.prototype.bindTileTexture =
function(tile, magFilter, minFilter) {
function(tile, tileWidth, tileHeight, tileGutter, magFilter, minFilter) {
var gl = this.getGL();
var tileKey = tile.getKey();
if (this.textureCache_.containsKey(tileKey)) {
@@ -268,8 +296,29 @@ ol.renderer.webgl.Map.prototype.bindTileTexture =
} else {
var texture = gl.createTexture();
gl.bindTexture(goog.webgl.TEXTURE_2D, texture);
gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA, goog.webgl.RGBA,
goog.webgl.UNSIGNED_BYTE, tile.getImage());
if (tileGutter > 0) {
var clipTileCanvas = this.clipTileCanvas_;
var clipTileCanvasSize = this.clipTileCanvasSize_;
var clipTileContext = this.clipTileContext_;
if (clipTileCanvasSize[0] != tileWidth ||
clipTileCanvasSize[1] != tileHeight) {
clipTileCanvas.width = tileWidth;
clipTileCanvas.height = tileHeight;
clipTileCanvasSize[0] = tileWidth;
clipTileCanvasSize[1] = tileHeight;
} else {
clipTileContext.clearRect(0, 0, tileWidth, tileHeight);
}
clipTileContext.drawImage(tile.getImage(), tileGutter, tileGutter,
tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
gl.texImage2D(goog.webgl.TEXTURE_2D, 0,
goog.webgl.RGBA, goog.webgl.RGBA,
goog.webgl.UNSIGNED_BYTE, clipTileCanvas);
} else {
gl.texImage2D(goog.webgl.TEXTURE_2D, 0,
goog.webgl.RGBA, goog.webgl.RGBA,
goog.webgl.UNSIGNED_BYTE, tile.getImage());
}
gl.texParameteri(
goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MAG_FILTER, magFilter);
gl.texParameteri(

12
src/ol/renderer/webgl/webgltilelayerrenderer.js
View File

@@ -130,6 +130,10 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
}
var z = tileGrid.getZForResolution(view2DState.resolution);
var tileResolution = tileGrid.getResolution(z);
var tileSize = tileGrid.getTileSize(z);
var tileGutter = tileSource.getGutter();
var center = view2DState.center;
var extent;
if (tileResolution == view2DState.resolution) {
@@ -150,7 +154,6 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
} else {
var tileRangeSize = tileRange.getSize();
var tileSize = tileGrid.getTileSize(z);
var maxDimension = Math.max(
tileRangeSize[0] * tileSize[0],
@@ -256,7 +259,9 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
framebufferExtentDimension - 1;
goog.vec.Vec4.setFromValues(u_tileOffset, sx, sy, tx, ty);
gl.uniform4fv(this.locations_.u_tileOffset, u_tileOffset);
mapRenderer.bindTileTexture(tile, goog.webgl.LINEAR, goog.webgl.LINEAR);
mapRenderer.bindTileTexture(tile,
tileSize[0], tileSize[1], tileGutter,
goog.webgl.LINEAR, goog.webgl.LINEAR);
gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
}
}
@@ -289,7 +294,8 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
tileTextureQueue.enqueue([
tile,
tileGrid.getTileCoordCenter(tile.tileCoord),
tileGrid.getResolution(tile.tileCoord.z)
tileGrid.getResolution(tile.tileCoord.z),
tileSize[0], tileSize[1], tileGutter
]);
}
}, this);