feat: add map.options.tileBackgroundLimitPerFrame to control how many background tileLayers to draw per frame (#2626)

Author: fuzhenn

packages/maptalks/src/map/Map.ts

@@ -107,12 +107,14 @@ const options: MapOptionsType = {
     'maxPitch': 80,
     'centerCross': false,
 
+    'zoomable': true,
     'zoomInCenter': false,
     'zoomOrigin': null,
     'zoomAnimation': (function () {
         return !IS_NODE;
     })(),
     'zoomAnimationDuration': 330,
+    'tileBackgroundLimitPerFrame': 3,
 
     'panAnimation': (function () {
         return !IS_NODE;
@@ -125,7 +127,7 @@ const options: MapOptionsType = {
         return !IS_NODE;
     })(),
 
-    'zoomable': true,
+
     'enableInfoWindow': true,
 
     'hitDetect': (function () {
@@ -2822,15 +2824,18 @@ export type MapOptionsType = {
     maxVisualPitch?: number;
     maxPitch?: number;
     centerCross?: boolean;
+
+    zoomable?: boolean;
     zoomInCenter?: boolean;
     zoomOrigin?: Array<number>;
     zoomAnimation?: boolean;
     zoomAnimationDuration?: number;
+    tileBackgroundLimitPerFrame?: number;
     panAnimation?: boolean;
     panAnimationDuration?: number;
     rotateAnimation?: boolean;
     rotateAnimationDuration?: number;
-    zoomable?: boolean;
+
     enableInfoWindow?: boolean;
     hitDetect?: boolean;
     hitDetectLimit?: number;

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

@@ -471,14 +471,25 @@ const TileLayerRenderable = function <T extends MixinConstructor>(Base: T) {
                 this._childTiles.sort(this._compareTiles);
             }
 
+            const map = this.getMap();
+            const mapCanvas = map.getRenderer().canvas;
             let drawBackground = true;
-            const backgroundTimestamp = this.canvas._parentTileTimestamp;
+            let frameTileState = mapCanvas._frameTileState;
+            if (!frameTileState) {
+                frameTileState = mapCanvas._frameTileState = { timestamp: 0, count: 0 };
+            }
             if (this.layer.constructor === TileLayer || this.layer.constructor === WMSTileLayer) {
+
                 // background tiles are only painted once for TileLayer and WMSTileLayer per frame.
-                if (this._renderTimestamp === backgroundTimestamp) {
+                if (this._renderTimestamp === frameTileState.timestamp && frameTileState.count > map.options['tileBackgroundLimitPerFrame']) {
                     drawBackground = false;
                 } else {
-                    this.canvas._parentTileTimestamp = this._renderTimestamp;
+                    if (this._renderTimestamp !== frameTileState.timestamp) {
+                        frameTileState.timestamp = this._renderTimestamp;
+                        frameTileState.count = 1;
+                    } else {
+                        frameTileState.count++;
+                    }
                 }
             }