feat: 优化瓦片金字塔的计算 (#1355)

* fix: 修复 featureScale 错误

* style: lint style

* fix: remove featureScalePlugin async

* feat: opmitize tile cal

* style: lint style

* chore: update api name

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -59,6 +59,8 @@ export default class DataMappingPlugin implements ILayerPlugin {
 
     // remapping before render
     layer.hooks.beforeRender.tap('DataMappingPlugin', () => {
+      const { usage } = layer.getLayerConfig();
+      if (usage === 'basemap') return;
       const source = layer.getSource();
       if (layer.layerModelNeedUpdate || !source || !source.inited) {
         return;

packages/layers/src/plugins/FeatureScalePlugin.ts

@@ -88,7 +88,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     });
 
     layer.hooks.beforeRender.tap('FeatureScalePlugin', () => {
-      if (layer.layerModelNeedUpdate) {
+      const { usage } = layer.getLayerConfig();
+      if (layer.layerModelNeedUpdate || usage === 'basemap') {
         return;
       }
       this.scaleOptions = layer.getScaleOptions();

packages/layers/src/plugins/UpdateStyleAttributePlugin.ts

@@ -18,7 +18,12 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
     });
 
     layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', () => {
-      if (layer.layerModelNeedUpdate) {
+      const { usage } = layer.getLayerConfig();
+      if (
+        layer.layerModelNeedUpdate ||
+        layer.tileLayer ||
+        usage === 'basemap'
+      ) {
         return;
       }
       this.updateStyleAtrribute(layer, { styleAttributeService });

packages/layers/src/tile/interface.ts

@@ -33,6 +33,7 @@ export interface ILayerTileConfig {
   initOptions: ISubLayerInitOptions;
   vectorTileLayer?: any;
   source: ISource;
+  needListen?: boolean;
 }
 
 export interface ITileFactory {

packages/layers/src/tile/tileFactory/base.ts

@@ -131,6 +131,7 @@ export default class TileFactory implements ITileFactory {
       initOptions,
       vectorTileLayer,
       source,
+      needListen = true,
     } = tileLayerOption;
     const { mask, color, layerType, size, shape, usage, basemapColor, basemapSize } = initOptions;
     const FactoryTileLayer = L7Layer ? L7Layer : VectorLayer;
@@ -138,6 +139,7 @@ export default class TileFactory implements ITileFactory {
       visible: tile.isVisible,
       tileOrigin: vectorTileLayer?.l7TileOrigin,
       coord: vectorTileLayer?.l7TileCoord,
+      needListen,
       ...this.getLayerInitOption(initOptions),
     });
 

packages/layers/src/tile/tileFactory/point.ts

@@ -28,6 +28,7 @@ export default class VectorPolygonTile extends TileFactory {
       initOptions,
       vectorTileLayer,
       source: source as Source,
+      needListen: false
     });
     layer.once('modelLoaded', () => {
       tile.layerLoad();

packages/layers/src/tile/tileFactory/test.ts

@@ -35,7 +35,7 @@ export default class TestTile extends TileFactory {
     
     const properties = features[0].properties;
     
-    const text = new VectorLayer({ layerType: 'PointLayer', usage: 'basemap' })
+    const text = new VectorLayer({ layerType: 'PointLayer', usage: 'basemap', needListen: false })
     .source([properties], {
       parser: {
         type: 'json',
@@ -52,7 +52,7 @@ export default class TestTile extends TileFactory {
       strokeWidth: 2
     });
 
-    const line = new VectorLayer({ layerType: 'LineLayer', usage: 'basemap' })
+    const line = new VectorLayer({ layerType: 'LineLayer', usage: 'basemap', needListen: false })
     .source({
       type: 'FeatureCollection',
       features: features,

packages/layers/src/tile/tileFactory/vectorLayer.ts

@@ -27,9 +27,10 @@ import polygonFillModel from '../../polygon/models/tile';
 
 export default class VectorLayer extends BaseLayer<
   Partial<
-    IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions
+    IPolygonLayerStyleOptions & ILineLayerStyleOptions & IPointLayerStyleOptions & {needListen: boolean;}
   >
 > {
+  public needListen: boolean = true;
   public isVector: boolean = true;
   public type: string = this.layerType as string || 'vectorLayer';
   // Tip: 单独被 tile 瓦片的渲染链路使用（用于优化性能）

packages/layers/src/tile/tileLayer/baseMapTileLayer.ts

@@ -125,8 +125,8 @@ export default class BaseTileLayer implements IBaseTileLayer {
       return;
     }
     this.lastViewStates = { zoom, latLonBounds };
-
+    
-    this.tilesetManager?.update(zoom, latLonBounds);
+    this.tilesetManager?.throttleUpdate(zoom, latLonBounds);
   }
 
   private bindTilesetEvent() {

packages/layers/src/tile/tileLayer/baseTileLayer.ts

@@ -324,7 +324,7 @@ export default class BaseTileLayer implements ITileLayer {
     }
     this.lastViewStates = { zoom, latLonBounds };
 
-    this.tilesetManager?.update(zoom, latLonBounds);
+    this.tilesetManager?.throttleUpdate(zoom, latLonBounds);
   }
 
   private bindTilesetEvent() {

packages/layers/src/tile/tmsMapTileLayer.ts

@@ -1,7 +1,6 @@
-import { ILayer } from '@antv/l7-core';
 import { Tile } from '@antv/l7-utils';
 import BaseTileLayer from './tileLayer/baseMapTileLayer';
-import { tileAllLoad, updateLayersConfig } from './utils';
+import { updateTileVisible } from './utils';
 
 export class TMSBaseMapTileLayer extends BaseTileLayer {
   public type: string = 'BaseMapTMS';
@@ -36,7 +35,7 @@ export class TMSBaseMapTileLayer extends BaseTileLayer {
             return;
           }
           const layers = this.tileLayerManager.getChilds(tile.layerIDList);
-          this.updateTileVisible(tile, layers);
+          updateTileVisible(tile, layers, this.layerService);
         }
       });
 
@@ -45,21 +44,4 @@ export class TMSBaseMapTileLayer extends BaseTileLayer {
       this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
     }
   }
-
-  private dispatchTileVisibleChange(tile: Tile, callback: () => void) {
-    if (tile.isVisible) {
-      callback();
-    } else {
-      tileAllLoad(tile, () => {
-        callback();
-      });
-    }
-  }
-
-  private updateTileVisible(tile: Tile, layers: ILayer[]) {
-    this.dispatchTileVisibleChange(tile, () => {
-      updateLayersConfig(layers, 'visible', tile.isVisible);
-      this.layerService.reRender();
-    });
-  }
 }

packages/layers/src/tile/tmsTileLayer.ts

@@ -1,7 +1,6 @@
-import { ILayer } from '@antv/l7-core';
 import { Tile } from '@antv/l7-utils';
 import BaseTileLayer from './tileLayer/baseTileLayer';
-import { tileAllLoad, updateLayersConfig } from './utils';
+import { updateTileVisible } from './utils';
 
 export class TMSTileLayer extends BaseTileLayer {
   public type: string = 'TMS';
@@ -37,7 +36,7 @@ export class TMSTileLayer extends BaseTileLayer {
             return;
           }
           const layers = this.tileLayerManager.getChilds(tile.layerIDList);
-          this.updateTileVisible(tile, layers);
+          updateTileVisible(tile, layers, this.layerService);
           this.setPickState(layers);
         }
       });
@@ -47,21 +46,4 @@ export class TMSTileLayer extends BaseTileLayer {
       this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
     }
   }
-
-  private dispatchTileVisibleChange(tile: Tile, callback: () => void) {
-    if (tile.isVisible) {
-      callback();
-    } else {
-      tileAllLoad(tile, () => {
-        callback();
-      });
-    }
-  }
-
-  private updateTileVisible(tile: Tile, layers: ILayer[]) {
-    this.dispatchTileVisibleChange(tile, () => {
-      updateLayersConfig(layers, 'visible', tile.isVisible);
-      this.layerService.reRender();
-    });
-  }
 }

packages/layers/src/tile/utils.ts

@@ -3,6 +3,7 @@ import {
   ILayer,
   IMapService,
   IRendererService,
+  ILayerService,
 } from '@antv/l7-core';
 import { DOM, Tile } from '@antv/l7-utils';
 import { Container } from 'inversify';
@@ -180,3 +181,42 @@ export function updateLayersConfig(layers: ILayer[], key: string, value: any) {
     }
   });
 }
+
+function dispatchTileVisibleChange(tile: Tile, callback: () => void) {
+  if (tile.isVisible) {
+    callback();
+  } else {
+    tileAllLoad(tile, () => {
+      callback();
+    });
+  }
+}
+
+function updateImmediately(layers: ILayer[]) {
+  let immediately = true;
+  layers.map((layer) => {
+    if (layer.type !== 'PointLayer') {
+      immediately = false;
+    }
+  });
+  return immediately;
+}
+
+export function updateTileVisible(
+  tile: Tile,
+  layers: ILayer[],
+  layerService: ILayerService,
+) {
+  if (layers.length === 0) return;
+
+  if (updateImmediately(layers)) {
+    updateLayersConfig(layers, 'visible', tile.isVisible);
+    layerService.reRender();
+    return;
+  }
+
+  dispatchTileVisibleChange(tile, () => {
+    updateLayersConfig(layers, 'visible', tile.isVisible);
+    layerService.reRender();
+  });
+}

packages/utils/package.json

@@ -31,7 +31,8 @@
     "earcut": "^2.1.0",
     "eventemitter3": "^4.0.0",
     "gl-matrix": "^3.1.0",
-    "web-worker-helper": "^0.0.3"
+    "web-worker-helper": "^0.0.3",
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
     "@types/d3-color": "^1.2.2",

packages/utils/src/tileset-manager/tileset-manager.ts

@@ -13,6 +13,7 @@ import {
   isLatLonBoundsContains,
 } from './utils/bound-buffer';
 import { getTileIndices } from './utils/lonlat-tile';
+import { throttle } from 'lodash';
 
 /**
  * 管理瓦片数据
@@ -69,6 +70,10 @@ export class TilesetManager extends EventEmitter {
     this.options = { ...this.options, ...options, minZoom, maxZoom };
   }
 
+  public throttleUpdate = throttle((zoom, latLonBounds) => {
+    this.update(zoom, latLonBounds);
+  }, 16);
+
   // 更新
   // 1.瓦片序号发生改变 2.瓦片新增 3.瓦片显隐控制
   public update(zoom: number, latLonBounds: [number, number, number, number]) {