fix tile magFilter when tile is zoomed in

Author: fuzhenn

packages/maptalks/src/layer/ImageLayer.ts

@@ -306,7 +306,8 @@ export class ImageLayerGLRenderer extends ImageGLRenderable(ImageLayerCanvasRend
 
     //@internal
     _drawImage(image: LayerImageType, extent: PointExtent, opacity: number) {
-        this.drawGLImage(image, extent.xmin, extent.ymax, extent.getWidth(), extent.getHeight(), 1, opacity);
+        const width = extent.getWidth();
+        this.drawGLImage(image, extent.xmin, extent.ymax, width, extent.getHeight(), 1, opacity, image.width !== width);
     }
 
     createContext() {

packages/maptalks/src/renderer/layer/ImageGLRenderable.ts

@@ -108,12 +108,12 @@ const ImageGLRenderable = function <T extends MixinConstructor>(Base: T) {
          * @param debugInfo
          * @param baseColor
          */
-        drawGLImage(image: TileImageType, x: number, y: number, w: number, h: number, scale: number, opacity: number, debugInfo?: string, baseColor?: number[]) {
+        drawGLImage(image: TileImageType, x: number, y: number, w: number, h: number, scale: number, opacity: number, resized, debugInfo?: string, baseColor?: number[]) {
             if ((this.gl as any).program !== this.program) {
                 this.useProgram(this.program);
             }
             const gl = this.gl;
-            this.loadTexture(image);
+            this.loadTexture(image, resized);
             const inGroup = this.canvas.gl && this.canvas.gl.wrap;
             if (inGroup) {
                 let layerOpacity = this.layer && this.layer.options['opacity'];
@@ -417,7 +417,7 @@ const ImageGLRenderable = function <T extends MixinConstructor>(Base: T) {
          * Load image into a text and bind it with WebGLContext
          * @param image
          */
-        loadTexture(image: TileImageType): TileImageTexture {
+        loadTexture(image: TileImageType, resized = false): TileImageTexture {
             const map = (this as any).getMap();
             const gl = this.gl;
             let texture = image.texture;   // Create a texture object
@@ -433,6 +433,12 @@ const ImageGLRenderable = function <T extends MixinConstructor>(Base: T) {
                 } else {
                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                 }
+                if (resized) {
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                } else {
+                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+                }
+
             }
             return texture;
         }

packages/maptalks/src/renderer/layer/tilelayer/TileLayerGLRenderer.ts

@@ -101,7 +101,7 @@ class TileLayerGLRenderer extends ImageGLRenderable(TileLayerCanvasRenderer) {
         const polygonOffset = this.drawingCurrentTiles ? layerPolygonOffset : layerPolygonOffset + 1;
         gl.polygonOffset(polygonOffset, polygonOffset);
 
-        this.drawGLImage(tileImage as any, x, y, w, h, scale, opacity, debugInfo);
+        this.drawGLImage(tileImage as any, x, y, w, h, scale, opacity, map._getResolution() !== tileInfo.res, debugInfo);
         if (this.getTileFadingOpacity(tileImage) < 1) {
             this.setToRedraw();
         } else {