@antv/l7-layers 2.23.1 → 2.23.3-beta.0

package/lib/tile/core/BaseLayer.js

@@ -39,12 +39,17 @@ class BaseTileLayer {
         latLonBounds,
         zoom
       } = this.getCurrentView();
-      if (this.lastViewStates && this.lastViewStates.zoom === zoom && this.lastViewStates.latLonBounds.toString() === latLonBounds.toString()) {
+
+      // 使用数值比较替代字符串比较，更高效
+      if (this.lastViewStates && this.lastViewStates.zoom === zoom && this.lastViewStates.minLng === latLonBounds[0] && this.lastViewStates.minLat === latLonBounds[1] && this.lastViewStates.maxLng === latLonBounds[2] && this.lastViewStates.maxLat === latLonBounds[3]) {
         return;
       }
       this.lastViewStates = {
         zoom,
-        latLonBounds
+        minLng: latLonBounds[0],
+        minLat: latLonBounds[1],
+        maxLng: latLonBounds[2],
+        maxLat: latLonBounds[3]
       };
       (_this$tilesetManager = this.tilesetManager) === null || _this$tilesetManager === void 0 || _this$tilesetManager.throttleUpdate(zoom, latLonBounds);
     });
@@ -105,7 +110,7 @@ class BaseTileLayer {
   }
   bindTilesetEvent() {
     // 瓦片数据加载成功
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     this.tilesetManager.on('tile-loaded', tile => {
       // 将事件抛出，图层上可以监听使用
     });
@@ -117,7 +122,7 @@ class BaseTileLayer {
     });
 
     // 瓦片数据加载失败
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     this.tilesetManager.on('tile-error', (error, tile) => {
       // 将事件抛出，图层上可以监听使用
       this.tileError(error);
@@ -144,7 +149,6 @@ class BaseTileLayer {
   getTile(key) {
     return this.tileLayerService.getTile(key);
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   tileLoaded(tile) {
     //
   }
@@ -180,10 +184,16 @@ class BaseTileLayer {
       }
       const minZoom = _this.parent.getMinZoom();
       const maxZoom = _this.parent.getMaxZoom();
-      const tiles = _this.tilesetManager.tiles.filter(tile => tile.isLoaded) // 过滤未加载完成的
-      .filter(tile => tile.isVisibleChange) // 过滤未发生变化的
-      .filter(tile => tile.data) //
-      .filter(tile => tile.z >= minZoom && tile.z < maxZoom); // 过滤不可见见
+
+      // 合并 filter 操作，减少中间数组创建
+      const tiles = _this.tilesetManager.tiles.filter(tile => tile.isLoaded &&
+      // 过滤未加载完成的
+      tile.isVisibleChange &&
+      // 过滤未发生变化的
+      tile.data &&
+      //
+      tile.z >= minZoom && tile.z < maxZoom // 过滤不可见层级
+      );
       yield Promise.all(tiles.map( /*#__PURE__*/function () {
         var _ref = (0, _asyncToGenerator2.default)(function* (tile) {
           // 未加载瓦片
@@ -214,8 +224,6 @@ class BaseTileLayer {
       }
     })();
   }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setPickState(layers) {
     return;
   }

package/lib/tile/service/TileLayerService.d.ts

@@ -13,14 +13,39 @@ export declare class TileLayerService {
     private rendererService;
     private layerService;
     private parent;
-    private layerTiles;
+    /**
+     * 使用 Map 存储瓦片实例，查找复杂度从 O(n) 降为 O(1)
+     */
+    private layerTilesMap;
+    /**
+     * 待销毁瓦片队列，用于分帧销毁
+     */
+    private pendingDestroyQueue;
+    private maxDestroyPerFrame;
+    /**
+     * 渲染图层缓存
+     */
+    private renderLayersCache;
+    private renderCacheDirty;
     constructor({ rendererService, layerService, parent }: ITileLayerServiceOptions);
     get tiles(): ITile[];
+    /**
+     * 获取待销毁瓦片数量
+     */
+    get pendingDestroyCount(): number;
     hasTile(tileKey: string): boolean;
     addTile(tile: ITile): void;
     getTile(tileKey: string): ITile | undefined;
     getVisibleTileBylngLat(lngLat: ILngLat): ITile | undefined;
     removeTile(tileKey: string): void;
+    /**
+     * 分帧销毁待销毁队列中的瓦片
+     */
+    processPendingDestroys(): void;
+    /**
+     * 标记渲染缓存为脏
+     */
+    markRenderCacheDirty(): void;
     updateTileVisible(sourceTile: SourceTile): void;
     isParentLoaded(sourceTile: SourceTile): boolean;
     isChildrenLoaded(sourceTile: SourceTile): boolean;

package/lib/tile/service/TileLayerService.js

@@ -20,34 +20,82 @@ class TileLayerService {
     (0, _defineProperty2.default)(this, "rendererService", void 0);
     (0, _defineProperty2.default)(this, "layerService", void 0);
     (0, _defineProperty2.default)(this, "parent", void 0);
-    (0, _defineProperty2.default)(this, "layerTiles", []);
+    /**
+     * 使用 Map 存储瓦片实例，查找复杂度从 O(n) 降为 O(1)
+     */
+    (0, _defineProperty2.default)(this, "layerTilesMap", new Map());
+    /**
+     * 待销毁瓦片队列，用于分帧销毁
+     */
+    (0, _defineProperty2.default)(this, "pendingDestroyQueue", []);
+    (0, _defineProperty2.default)(this, "maxDestroyPerFrame", 3);
+    /**
+     * 渲染图层缓存
+     */
+    (0, _defineProperty2.default)(this, "renderLayersCache", null);
+    (0, _defineProperty2.default)(this, "renderCacheDirty", true);
     this.rendererService = rendererService;
     this.layerService = layerService;
     this.parent = parent;
   }
   get tiles() {
-    return this.layerTiles;
+    return Array.from(this.layerTilesMap.values());
+  }
+
+  /**
+   * 获取待销毁瓦片数量
+   */
+  get pendingDestroyCount() {
+    return this.pendingDestroyQueue.length;
   }
   hasTile(tileKey) {
-    return this.layerTiles.some(tile => tile.key === tileKey);
+    return this.layerTilesMap.has(tileKey);
   }
   addTile(tile) {
-    this.layerTiles.push(tile);
+    this.layerTilesMap.set(tile.key, tile);
+    this.markRenderCacheDirty();
   }
   getTile(tileKey) {
-    return this.layerTiles.find(tile => tile.key === tileKey);
+    return this.layerTilesMap.get(tileKey);
   }
   getVisibleTileBylngLat(lngLat) {
     // 加载完成 & 可见 & 鼠标选中
-    return this.layerTiles.find(tile => tile.isLoaded && tile.visible && tile.lnglatInBounds(lngLat));
+    for (const tile of this.layerTilesMap.values()) {
+      if (tile.isLoaded && tile.visible && tile.lnglatInBounds(lngLat)) {
+        return tile;
+      }
+    }
+    return undefined;
   }
   removeTile(tileKey) {
-    const index = this.layerTiles.findIndex(t => t.key === tileKey);
-    const tile = this.layerTiles.splice(index, 1);
-    if (tile[0]) {
-      tile[0].destroy();
+    const tile = this.layerTilesMap.get(tileKey);
+    if (tile) {
+      this.layerTilesMap.delete(tileKey);
+      // 放入待销毁队列，分帧销毁
+      this.pendingDestroyQueue.push(tile);
+      this.markRenderCacheDirty();
+    }
+  }
+
+  /**
+   * 分帧销毁待销毁队列中的瓦片
+   */
+  processPendingDestroys() {
+    const count = Math.min(this.pendingDestroyQueue.length, this.maxDestroyPerFrame);
+    for (let i = 0; i < count; i++) {
+      const tile = this.pendingDestroyQueue.shift();
+      if (tile) {
+        tile.destroy();
+      }
     }
   }
+
+  /**
+   * 标记渲染缓存为脏
+   */
+  markRenderCacheDirty() {
+    this.renderCacheDirty = true;
+  }
   updateTileVisible(sourceTile) {
     const tile = this.getTile(sourceTile.key);
     if (sourceTile.isVisible) {
@@ -67,6 +115,7 @@ class TileLayerService {
         tile === null || tile === void 0 || tile.updateVisible(false);
       }
     }
+    this.markRenderCacheDirty();
   }
   isParentLoaded(sourceTile) {
     const parentTile = sourceTile.parent;
@@ -96,6 +145,8 @@ class TileLayerService {
   render() {
     var _this = this;
     return (0, _asyncToGenerator2.default)(function* () {
+      // 每帧处理部分待销毁瓦片
+      _this.processPendingDestroys();
       const layers = _this.getRenderLayers();
       const renders = layers.map( /*#__PURE__*/function () {
         var _ref = (0, _asyncToGenerator2.default)(function* (layer) {
@@ -109,22 +160,43 @@ class TileLayerService {
     })();
   }
   getRenderLayers() {
-    const tileList = this.layerTiles.filter(t => t.visible && t.isLoaded);
+    // 使用缓存避免每帧重建
+    if (!this.renderCacheDirty && this.renderLayersCache) {
+      return this.renderLayersCache;
+    }
     const layers = [];
-    tileList.map(tile => layers.push(...tile.getLayers()));
+    this.layerTilesMap.forEach(tile => {
+      if (tile.visible && tile.isLoaded) {
+        layers.push(...tile.getLayers());
+      }
+    });
+    this.renderLayersCache = layers;
+    this.renderCacheDirty = false;
     return layers;
   }
   getLayers() {
-    const tileList = this.layerTiles.filter(t => t.isLoaded);
     const layers = [];
-    tileList.map(tile => layers.push(...tile.getLayers()));
+    this.layerTilesMap.forEach(tile => {
+      if (tile.isLoaded) {
+        layers.push(...tile.getLayers());
+      }
+    });
     return layers;
   }
   getTiles() {
-    return this.layerTiles;
+    return Array.from(this.layerTilesMap.values());
   }
   destroy() {
-    this.layerTiles.forEach(t => t.destroy());
+    // 先处理待销毁队列中的残留瓦片
+    while (this.pendingDestroyQueue.length > 0) {
+      const tile = this.pendingDestroyQueue.shift();
+      tile === null || tile === void 0 || tile.destroy();
+    }
+    // 销毁所有已加载的瓦片
+    this.layerTilesMap.forEach(t => t.destroy());
+    this.layerTilesMap.clear();
+    // 清理缓存
+    this.renderLayersCache = null;
     this.tileResource.clear();
   }
 }

package/lib/tile/service/TilePickService.js

@@ -68,7 +68,9 @@ class TilePickService {
     this.updateHighLight(r, g, b, ACTIVE);
   }
   updateHighLight(r, g, b, type) {
-    this.tileLayerService.tiles.map(tile => {
+    // 只遍历已加载的瓦片，跳过不可见的
+    for (const tile of this.tileLayerService.tiles) {
+      if (!tile.isLoaded) continue;
       const layer = tile.getMainLayer();
       switch (type) {
         case SELECT:
@@ -78,7 +80,7 @@ class TilePickService {
           layer === null || layer === void 0 || layer.hooks.beforeHighlight.call([r, g, b]);
           break;
       }
-    });
+    }
   }
   setPickState() {
     const selectColor = this.tilePickID.get(SELECT);
@@ -103,13 +105,17 @@ class TilePickService {
 
   /** 从瓦片中根据数据 */
   getFeatureById(pickedFeatureIdx) {
-    // 提取当前可见瓦片
-    const tiles = this.tileLayerService.getTiles().filter(tile => tile.visible);
-    // 提取当前可见瓦片中匹配 ID 的 feature 列表
+    // 提取当前可见瓦片并合并 features
     const features = [];
-    tiles.forEach(tile => {
-      features.push(...tile.getFeatureById(pickedFeatureIdx));
-    });
+    for (const tile of this.tileLayerService.tiles) {
+      if (tile.visible && tile.isLoaded) {
+        const tileFeatures = tile.getFeatureById(pickedFeatureIdx);
+        // 直接 push 而非使用扩展操作符
+        for (let i = 0; i < tileFeatures.length; i++) {
+          features.push(tileFeatures[i]);
+        }
+      }
+    }
 
     // 将 feature 列表合并后返回
     // 统一返回成 polygon 的格式 点、线、面可以通用
@@ -120,7 +126,7 @@ class TilePickService {
   }
 
   // Tip: for interface define
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   pickRasterLayer() {
     return false;
   }

package/lib/utils/scale.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 比例尺工具
+ * 用于替代 d3-scale 的功能
+ */
+export interface ScaleLinear {
+    (x: number): number;
+    domain(): number[];
+    domain(domain: number[]): ScaleLinear;
+    range(): number[];
+    range(range: number[]): ScaleLinear;
+    invert(y: number): number;
+    ticks(count?: number): number[];
+    nice(count?: number): ScaleLinear;
+    clamp(): boolean;
+    clamp(clamp: boolean): ScaleLinear;
+}
+export declare function scaleLinear(): ScaleLinear;
+export interface ScalePow extends ScaleLinear {
+    exponent(): number;
+    exponent(k: number): ScalePow;
+}
+export declare function scalePow(): ScalePow;
+export interface ScaleLog extends ScaleLinear {
+    base(): number;
+    base(b: number): ScaleLog;
+}
+export declare function scaleLog(): ScaleLog;
+export interface ScaleOrdinal<T = any> {
+    (x: any): T;
+    domain(): any[];
+    domain(domain: any[]): ScaleOrdinal<T>;
+    range(): T[];
+    range(range: T[]): ScaleOrdinal<T>;
+    unknown(value: T): ScaleOrdinal<T>;
+}
+export declare function scaleOrdinal<T = any>(range?: T[]): ScaleOrdinal<T>;
+export interface ScaleQuantize {
+    (x: number): any;
+    domain(): number[];
+    domain(domain: number[]): ScaleQuantize;
+    range(): any[];
+    range(range: any[]): ScaleQuantize;
+    invertExtent(y: any): [number, number];
+}
+export declare function scaleQuantize(): ScaleQuantize;
+export interface ScaleQuantile {
+    (x: number): any;
+    domain(): number[];
+    domain(domain: number[]): ScaleQuantile;
+    range(): any[];
+    range(range: any[]): ScaleQuantile;
+    invertExtent(y: any): [number, number];
+    quantiles(): number[];
+}
+export declare function scaleQuantile(): ScaleQuantile;
+export interface ScaleThreshold {
+    (x: number): any;
+    domain(): number[];
+    domain(domain: number[]): ScaleThreshold;
+    range(): any[];
+    range(range: any[]): ScaleThreshold;
+    invertExtent(y: any): [number | undefined, number | undefined];
+}
+export declare function scaleThreshold(): ScaleThreshold;
+export interface ScaleSequential {
+    (x: number): any;
+    domain(): number[];
+    domain(domain: number[]): ScaleSequential;
+    interpolator(): (t: number) => any;
+    interpolator(interpolator: (t: number) => any): ScaleSequential;
+    clamp(): boolean;
+    clamp(clamp: boolean): ScaleSequential;
+}
+export declare function scaleSequential(): ScaleSequential;
+export interface ScaleDiverging {
+    (x: number): any;
+    domain(): number[];
+    domain(domain: number[]): ScaleDiverging;
+    interpolator(): (t: number) => any;
+    interpolator(interpolator: (t: number) => any): ScaleDiverging;
+    clamp(): boolean;
+    clamp(clamp: boolean): ScaleDiverging;
+}
+export declare function scaleDiverging(): ScaleDiverging;
+export interface ScaleTime extends ScaleLinear {
+}
+export declare function scaleTime(): ScaleTime;