Fix tiles z-fighting

src/layer/OverlayLayer.js

@@ -15,7 +15,8 @@ import GeoJSON from '../geometry/GeoJSON';
  * @instance
  */
 const options = {
-    'drawImmediate': false
+    'drawImmediate': false,
+    'geometryEvents': true
 };
 
 

src/layer/VectorLayer.js

@@ -32,7 +32,6 @@ const TEMP_EXTENT = new PointExtent();
 const options = {
     'debug': false,
     'enableSimplify': true,
-    'geometryEvents': true,
     'defaultIconSize': [20, 20],
     'cacheVectorOnCanvas': true,
     'cacheSvgOnCanvas': Browser.gecko,

src/layer/tile/TileLayer.js

@@ -1292,6 +1292,32 @@ class TileLayer extends Layer {
             renderer.clear();
         }
     }
+
+    /**
+     * Get layer's polygonOffset count
+     * @return {Number}
+     */
+    getPolygonOffsetCount() {
+        return 2;
+    }
+
+    /**
+     * Get layer's base polygon offset
+     * @return {Number}
+     */
+    getPolygonOffset() {
+        return this._polygonOffset || 0;
+    }
+
+    /**
+     * Set layer's base polygon offset, called by GroupGLLayer
+     * @param {Number} offset polygon offset
+     * @return {TileLayer}
+     */
+    setPolygonOffset(offset) {
+        this._polygonOffset = offset;
+        return this;
+    }
 }
 
 TileLayer.registerJSONType('TileLayer');

src/renderer/layer/ImageGLRenderable.js

@@ -113,6 +113,7 @@ const ImageGLRenderable = Base => {
 
         drawDebug(uMatrix, x, y, w, h, debugInfo) {
             const gl = this.gl;
+            gl.disable(gl.DEPTH_TEST);
             gl.bindBuffer(gl.ARRAY_BUFFER, this._debugBuffer);
             this.enableVertexAttrib(['a_position', 2, 'FLOAT']);
             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
@@ -156,6 +157,7 @@ const ImageGLRenderable = Base => {
             ), gl.DYNAMIC_DRAW);
             gl.uniform1f(this.program['u_debug_line'], 0);
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            gl.enable(gl.DEPTH_TEST);
         }
 
         bufferTileData(x, y, w, h, buffer) {
@@ -235,7 +237,7 @@ const ImageGLRenderable = Base => {
             const gl = this.gl;
             gl.clearColor(0.0, 0.0, 0.0, 0.0);
 
-            gl.disable(gl.DEPTH_TEST);
+            gl.enable(gl.DEPTH_TEST);
             gl.enable(gl.STENCIL_TEST);
 
             gl.enable(gl.BLEND);
@@ -288,6 +290,9 @@ const ImageGLRenderable = Base => {
                 this.gl.clearStencil(0xFF);
                 this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.STENCIL_BUFFER_BIT);
             }
+            if (!this.gl.wrap) {
+                this.gl.clear(this.gl.DEPTH_BUFFER_BIT);
+            }
         }
 
         disposeImage(image) {

src/renderer/layer/tilelayer/TileLayerCanvasRenderer.js

@@ -283,6 +283,8 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
         const context = { tiles, parentTiles: this._parentTiles, childTiles: this._childTiles, parentContext };
         this.onDrawTileStart(context, parentContext);
 
+        this._childTiles.sort(this._compareTiles);
+        this._parentTiles.sort(this._compareTiles);
         if (this.layer.options['opacity'] === 1) {
             this._childTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));
             this._parentTiles.forEach(t => this._drawTile(t.info, t.image, parentContext));

src/renderer/layer/tilelayer/TileLayerGLRenderer.js

@@ -1,8 +1,12 @@
+import {
+    isNil
+} from '../../../core/util';
 import TileLayer from '../../../layer/tile/TileLayer';
 import TileLayerCanvasRenderer from './TileLayerCanvasRenderer';
 import ImageGLRenderable from '../ImageGLRenderable';
 import Point from '../../../geo/Point';
 
+
 const TILE_POINT = new Point(0, 0);
 
 const MESH_TO_TEST = { properties: {}};
@@ -33,11 +37,11 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
 
     onDrawTileStart(context, parentContext) {
         const gl = this.gl;
-        gl.enable(gl.STENCIL_TEST);
-        gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
         gl.enable(gl.DEPTH_TEST);
+        gl.enable(gl.POLYGON_OFFSET_FILL);
         gl.depthFunc(gl.LEQUAL);
-        gl.depthMask(true);
+        const depthMask = isNil(this.layer.options['depthMask']) || !!this.layer.options['depthMask'];
+        gl.depthMask(depthMask);
         if (parentContext && parentContext.renderTarget) {
             const fbo = parentContext.renderTarget.fbo;
             if (fbo) {
@@ -90,6 +94,9 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
         }
         const gl = this.gl;
         gl.stencilFunc(gl.LEQUAL, Math.abs(this.getCurrentTileZoom() - tileInfo.z), 0xFF);
+        const layerPolygonOffset = this.layer.getPolygonOffset();
+        const polygonOffset = this.tilesInView[tileInfo.id] ? layerPolygonOffset - 1 : layerPolygonOffset;
+        gl.polygonOffset(polygonOffset, polygonOffset);
 
         this.drawGLImage(tileImage, x, y, w, h, scale, opacity, debugInfo);
         if (opacity < 1) {