Add gutter support to ol.renderer.webgl.TileLayer

src/ol/renderer/webgl/webglmaprenderer.js

@@ -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 =
+          var element = this.tileTextureQueue_.dequeue();
-              /** @type {ol.Tile} */ (this.tileTextureQueue_.dequeue()[0]);
+          var tile = /** @type {ol.Tile} */ (element[0]);
-          this.bindTileTexture(tile, goog.webgl.LINEAR, goog.webgl.LINEAR);
+          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,
+    if (tileGutter > 0) {
-        goog.webgl.UNSIGNED_BYTE, tile.getImage());
+      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(

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -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);