use gl to render tile if map has bearing, fix #961

maptalks · Jul 25, 2019 · 2ebcf78 · 2ebcf78
1 parent 2dfe4cf
commit 2ebcf78
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/src/layer/tile/TileLayer.js b/src/layer/tile/TileLayer.js
@@ -587,6 +587,10 @@ class TileLayer extends Layer {
         delete this._tileConfig;
         delete this._defaultTileConfig;
         delete this._sr;
+        const renderer = this.getRenderer();
+        if (renderer) {
+            renderer.clear();
+        }
     }
 }
 

diff --git a/src/map/Map.js b/src/map/Map.js
@@ -721,7 +721,7 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
         if (isNil(zoom)) {
             zoom = this.getZoom();
         }
-        return this.getScale(zoom) / this.getScale(this.getGLZoom());
+        return this._getResolution(zoom) / this._getResolution(this.getGLZoom());
     }
 
     /**

diff --git a/src/renderer/layer/tilelayer/TileLayerCanvasRenderer.js b/src/renderer/layer/tilelayer/TileLayerCanvasRenderer.js
@@ -12,6 +12,8 @@ import Point from '../../../geo/Point';
 import LruCache from '../../../core/util/LruCache';
 import Canvas from '../../../core/Canvas';
 
+const TEMP_POINT = new Point(0, 0);
+
 /**
  * @classdesc
  * Renderer class based on HTML5 Canvas2D for TileLayers
@@ -445,7 +447,7 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
             tileSize = tileInfo.size,
             zoom = map.getZoom(),
             ctx = this.context,
-            cp = map._pointToContainerPoint(point, tileZoom),
+            cp = map._pointToContainerPoint(point, tileZoom, 0, TEMP_POINT),
             bearing = map.getBearing(),
             transformed = bearing || zoom !== tileZoom;
         const opacity = this.getTileOpacity(tileImage);
@@ -461,8 +463,8 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
             y = cp.y;
         let w = tileSize[0], h = tileSize[1];
         if (transformed) {
-            w++;
-            h++;
+            w += 0.5;
+            h += 0.5;
             ctx.save();
             ctx.translate(x, y);
             if (bearing) {
@@ -476,17 +478,16 @@ class TileLayerCanvasRenderer extends CanvasRenderer {
         }
         Canvas2D.image(ctx, tileImage, x, y, w, h);
         if (this.layer.options['debug']) {
-            const p = new Point(x, y),
-                color = this.layer.options['debugOutline'],
-                xyz = tileId.split('__');
+            const color = this.layer.options['debugOutline'],
+                xyz = tileId.split('-');
             ctx.save();
             ctx.strokeStyle = color;
             ctx.fillStyle = color;
             ctx.strokeWidth = 10;
             ctx.font = '15px monospace';
-            Canvas2D.rectangle(ctx, p, tileSize, 1, 0);
-            Canvas2D.fillText(ctx, 'x:' + xyz[2] + ', y:' + xyz[1] + ', z:' + xyz[3], p.add(10, 20), color);
-            Canvas2D.drawCross(ctx, p.add(w / 2, h / 2), 2, color);
+            Canvas2D.rectangle(ctx, cp, { width: w, height: h }, 1, 0);
+            Canvas2D.fillText(ctx, 'x:' + xyz[2] + ', y:' + xyz[1] + ', z:' + xyz[3], cp.add(10, 20), color);
+            Canvas2D.drawCross(ctx, cp._add(w / 2, h / 2), 2, color);
             ctx.restore();
         }
         if (transformed) {

diff --git a/src/renderer/layer/tilelayer/TileLayerGLRenderer.js b/src/renderer/layer/tilelayer/TileLayerGLRenderer.js
@@ -29,21 +29,18 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
 
     drawTile(tileInfo, tileImage) {
         const map = this.getMap();
-        if (!tileInfo || !map) {
-            return;
-        }
-        if (tileImage.src === emptyImageUrl) {
+        if (!tileInfo || !map || !tileImage) {
             return;
         }
 
-        const scale = map.getGLScale(tileInfo.z),
+        const scale = tileInfo._glScale = tileInfo._glScale || map.getGLScale(tileInfo.z),
             w = tileInfo.size[0] * scale,
             h = tileInfo.size[1] * scale;
         if (tileInfo.cache !== false) {
             this._bindGLBuffer(tileImage, w, h);
         }
         if (!this._gl()) {
-            // fall back to canvas 2D
+            // fall back to canvas 2D, which is faster
             super.drawTile(tileInfo, tileImage);
             return;
         }
@@ -147,7 +144,8 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
             //in GroupGLLayer
             return true;
         }
-        return this.getMap() && !!this.getMap().getPitch() || this.layer && !!this.layer.options['fragmentShader'];
+        const map = this.getMap();
+        return map && (map.getPitch() || map.getBearing()) || this.layer && !!this.layer.options['fragmentShader'];
     }
 
     deleteTile(tile) {