feat: 瓦片更新代码重构 (#1395)

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

packages/core/src/services/layer/ILayerService.ts

@@ -185,7 +185,7 @@ export interface IBaseTileLayerManager {
   parent: ILayer;
   children: ILayer[];
 
-  createTile(tile: Tile): { layers: ILayer[]; layerIDList: string[] };
+  addTile(tile: Tile): { layers: ILayer[]; layerIDList: string[] };
 
   addChild(layer: ILayer): void;
   addChildren(layers: ILayer[]): void;

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

@@ -7,7 +7,7 @@ import {
 import { Tile } from '@antv/l7-utils';
 import { ITileFactory, getTileFactory, TileType } from '../tileFactory';
 import { registerLayers } from '../utils';
-export class TileManager {
+export class Base {
     public sourceLayer: string;
     public parent: ILayer;
     public children: ILayer[];
@@ -16,10 +16,32 @@ export class TileManager {
     protected tileFactory: ITileFactory;
     protected initOptions: ISubLayerInitOptions;
 
-    public createTile(tile: Tile) {
+    private tileCache: Map<string, Tile> = new Map()
+    
+    public hasTile(tile: Tile){
+      return !!this.tileCache.has(tile.key);
+    }
+
+    public addTile(tile: Tile) {
+      // oldTile 存在的时候暂时直接结束
+      // TODO：合并不存在的时候
+      if(this.hasTile(tile)) return {
+        layers: [],
+        layerIDList: [],
+      }
+      // 存储当前 tile
+      this.tileCache.set(tile.key, tile);
+
+      // 创建 tile 对应的 layers
       const layerCollections = this.tileFactory.createTile(tile, this.initOptions);
-      //  // regist layer
+      
-       registerLayers(this.parent, layerCollections.layers);
+      // regist layer 将创建出来的 layer 进行注册初始化操作
+      registerLayers(this.parent, layerCollections.layers);
+
+      tile.layerIDList.push(...layerCollections.layerIDList);
+
+      // add layer into layerGroup
+      this.addChildren(layerCollections.layers);
 
       layerCollections.layers.map(layer => {
         layer.once('modelLoaded', () => {
@@ -29,6 +51,11 @@ export class TileManager {
       return layerCollections;
     }
 
+    public removeTile(tile: Tile){
+      this.tileCache.delete(tile.key);
+      this.removeChildren(tile.layerIDList, false);
+    }
+
     public addChild(layer: ILayer) {
         this.children.push(layer);
     }

packages/layers/src/tile/manager/layerManager.ts

@@ -11,7 +11,7 @@ import {
   ITransform,
   ScaleAttributeType,
 } from '@antv/l7-core';
-import { TileManager } from './base';
+import { Base } from './base';
 import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
 import { getLayerShape, getMaskValue } from '../utils';
 import { TileStyleService, ITileStyleService } from '../style/TileStyleService';
@@ -20,7 +20,7 @@ import { TilePickService } from '../interaction/TilePickService';
 import { TileRenderService } from '../render/TileRenderService';
 import { styles, IStyles, Attributes } from '../style/constants';
 import { updateTexture, updateLayersConfig, setStyleAttributeField } from '../style/utils';
-export class TileLayerManager extends TileManager implements ITileLayerManager {
+export class TileLayerManager extends Base implements ITileLayerManager {
   public tilePickService: ITilePickService;
   public tileStyleService: ITileStyleService;
   public tileRenderService: ITileRenderService

packages/layers/src/tile/manager/mapLayerManager.ts

@@ -5,9 +5,9 @@ import {
   ISubLayerInitOptions,
   IBaseTileLayerManager,
 } from '@antv/l7-core';
-import { TileManager } from './base';
+import { Base } from './base';
 import { getLayerShape, getMaskValue } from '../utils';
-export class BaseMapTileLayerManager extends TileManager implements IBaseTileLayerManager {
+export class BaseMapTileLayerManager extends Base implements IBaseTileLayerManager {
   // only support vector layer
   constructor(
     parent: ILayer,

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

@@ -126,58 +126,59 @@ export class Base {
     }
 
     public tileError(error: Error) {
-    console.warn('error:', error);
+      console.warn('error:', error);
     }
 
     public destroy() {
-        this.tilesetManager?.destroy();
+      this.tilesetManager?.destroy();
-        this.tileLayerManager.destroy();
+      this.tileLayerManager.destroy();
+    }
+
+    public tileUnLoad(tile: Tile) {
+      this.tileLayerManager.removeTile(tile);
+    }
+  
+    public tileUpdate() {
+      if (!this.tilesetManager) {
+        return;
       }
+      this.tilesetManager.tiles
+        .filter((tile: Tile) => tile.isLoaded)
+        .map((tile: Tile) => {
+          if(!this.isTileReady(tile)) return;
 
-      public tileUnLoad(tile: Tile) {
+          if (!this.tileLayerManager.hasTile(tile)) {
-        this.tileLayerManager.removeChildren(tile.layerIDList, false);
+            const { layers } = this.tileLayerManager.addTile(tile);
+            this.setPickState(layers)
+          } else {
+            if (!tile.isVisibleChange) {
+              return;
+            }
+            const layers = this.tileLayerManager.getChildren(tile.layerIDList);
+            updateTileVisible(tile, layers, this.layerService);
+            this.setPickState(layers)
+          }
+        });
+  
+      if (this.tilesetManager.isLoaded) {
+        // 将事件抛出，图层上可以使用瓦片
+        this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
       }
+    }
 
-      public tileUpdate() {
+    public isTileReady(tile:Tile){
-        if (!this.tilesetManager) {
+      if (tile.data?.layers && this.sourceLayer) {
-          return;
+        // vector
-        }
+        const vectorTileLayer = tile.data.layers[this.sourceLayer];
-        this.tilesetManager.tiles
+        const features = vectorTileLayer?.features;
-          .filter((tile: Tile) => tile.isLoaded)
+        if (!(Array.isArray(features) && features.length > 0)) {
-          .map((tile: Tile) => {
+          return false;
-            if (tile.data?.layers && this.sourceLayer) {
-              // vector
-              const vectorTileLayer = tile.data.layers[this.sourceLayer];
-              const features = vectorTileLayer?.features;
-              if (!(Array.isArray(features) && features.length > 0)) {
-                return;
-              }
-            }
-            if (!tile.parentLayerIDList.includes(this.parent.id)) {
-              const { layers, layerIDList } = this.tileLayerManager.createTile(
-                tile,
-              );
-              tile.parentLayerIDList.push(this.parent.id);
-              tile.layerIDList.push(...layerIDList);
-    
-              this.tileLayerManager.addChildren(layers);
-              this.setPickState(layers)
-            } else {
-              if (!tile.isVisibleChange) {
-                return;
-              }
-              const layers = this.tileLayerManager.getChildren(tile.layerIDList);
-              updateTileVisible(tile, layers, this.layerService);
-              this.setPickState(layers)
-            }
-          });
-    
-        if (this.tilesetManager.isLoaded) {
-          // 将事件抛出，图层上可以使用瓦片
-          this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
         }
       }
      
+      return true;  
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public setPickState(layers: ILayer[]) {}
 }

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

@@ -24,7 +24,6 @@ export class Tile extends EventEmitter {
   public isCurrent = false;
   // 是否可以见发生变化
   public isVisibleChange = false;
-  public parentLayerIDList: string[] = [];
   public layerIDList: string[] = [];
   public loadedLayers: number = 0;