@antv/l7-layers 2.25.7 → 2.25.9

package/es/tile/service/TileLayerService.js

@@ -0,0 +1,195 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+export class TileLayerService {
+  constructor({
+    rendererService,
+    layerService,
+    parent
+  }) {
+    /**
+     * tileResource 用于存储瓦片的全局资源
+     */
+    _defineProperty(this, "tileResource", new Map());
+    _defineProperty(this, "rendererService", void 0);
+    _defineProperty(this, "layerService", void 0);
+    _defineProperty(this, "parent", void 0);
+    /**
+     * 使用 Map 存储瓦片实例，查找复杂度从 O(n) 降为 O(1)
+     */
+    _defineProperty(this, "layerTilesMap", new Map());
+    /**
+     * 待销毁瓦片队列，用于分帧销毁
+     */
+    _defineProperty(this, "pendingDestroyQueue", []);
+    _defineProperty(this, "maxDestroyPerFrame", 3);
+    /**
+     * 渲染图层缓存
+     */
+    _defineProperty(this, "renderLayersCache", null);
+    _defineProperty(this, "renderCacheDirty", true);
+    this.rendererService = rendererService;
+    this.layerService = layerService;
+    this.parent = parent;
+  }
+  get tiles() {
+    return Array.from(this.layerTilesMap.values());
+  }
+
+  /**
+   * 获取待销毁瓦片数量
+   */
+  get pendingDestroyCount() {
+    return this.pendingDestroyQueue.length;
+  }
+  hasTile(tileKey) {
+    return this.layerTilesMap.has(tileKey);
+  }
+  addTile(tile) {
+    this.layerTilesMap.set(tile.key, tile);
+    this.markRenderCacheDirty();
+  }
+  getTile(tileKey) {
+    return this.layerTilesMap.get(tileKey);
+  }
+  getVisibleTileBylngLat(lngLat) {
+    // 加载完成 & 可见 & 鼠标选中
+    for (const tile of this.layerTilesMap.values()) {
+      if (tile.isLoaded && tile.visible && tile.lnglatInBounds(lngLat)) {
+        return tile;
+      }
+    }
+    return undefined;
+  }
+  removeTile(tileKey) {
+    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) {
+      // 不可见 => 可见 兄弟节点加载完成
+      if (sourceTile.parent) {
+        const flag = this.isChildrenLoaded(sourceTile.parent);
+        tile === null || tile === void 0 || tile.updateVisible(flag);
+      } else {
+        tile === null || tile === void 0 || tile.updateVisible(true);
+      }
+    } else {
+      // 可见 => 不可见 兄弟节点加载完成
+      if (sourceTile.parent) {
+        const flag = this.isChildrenLoaded(sourceTile.parent);
+        tile === null || tile === void 0 || tile.updateVisible(!flag);
+      } else {
+        tile === null || tile === void 0 || tile.updateVisible(false);
+      }
+    }
+    this.markRenderCacheDirty();
+  }
+  isParentLoaded(sourceTile) {
+    const parentTile = sourceTile.parent;
+    if (!parentTile) {
+      return true;
+    }
+    const tile = this.getTile(parentTile === null || parentTile === void 0 ? void 0 : parentTile.key);
+    if (tile !== null && tile !== void 0 && tile.isLoaded) {
+      // 递归父级
+      return true;
+    }
+    return false;
+  }
+  isChildrenLoaded(sourceTile) {
+    const childrenTile = sourceTile === null || sourceTile === void 0 ? void 0 : sourceTile.children;
+    if (childrenTile.length === 0) {
+      return true;
+    }
+    return childrenTile.every(tile => {
+      const tileLayer = this.getTile(tile === null || tile === void 0 ? void 0 : tile.key);
+      if (!tileLayer) {
+        return true;
+      }
+      return (tileLayer === null || tileLayer === void 0 ? void 0 : tileLayer.isLoaded) === true;
+    });
+  }
+  render() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      // 每帧处理部分待销毁瓦片
+      _this.processPendingDestroys();
+      const layers = _this.getRenderLayers();
+      const renders = layers.map( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(function* (layer) {
+          yield _this.layerService.renderTileLayer(layer);
+        });
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+      yield Promise.all(renders);
+    })();
+  }
+  getRenderLayers() {
+    // 使用缓存避免每帧重建
+    if (!this.renderCacheDirty && this.renderLayersCache) {
+      return this.renderLayersCache;
+    }
+    const layers = [];
+    this.layerTilesMap.forEach(tile => {
+      if (tile.visible && tile.isLoaded) {
+        layers.push(...tile.getLayers());
+      }
+    });
+    this.renderLayersCache = layers;
+    this.renderCacheDirty = false;
+    return layers;
+  }
+  getLayers() {
+    const layers = [];
+    this.layerTilesMap.forEach(tile => {
+      if (tile.isLoaded) {
+        layers.push(...tile.getLayers());
+      }
+    });
+    return layers;
+  }
+  getTiles() {
+    return Array.from(this.layerTilesMap.values());
+  }
+  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/es/tile/service/TilePickService.d.ts

@@ -0,0 +1,26 @@
+import type { IInteractionTarget, ILayer, ILayerService, ITilePickService } from '@antv/l7-core';
+import type { TileLayerService } from './TileLayerService';
+export interface ITilePickServiceOptions {
+    layerService: ILayerService;
+    tileLayerService: TileLayerService;
+    parent: ILayer;
+}
+export declare class TilePickService implements ITilePickService {
+    private layerService;
+    private tileLayerService;
+    private tileSourceService;
+    private parent;
+    private tilePickID;
+    constructor({ layerService, tileLayerService, parent }: ITilePickServiceOptions);
+    pickRender(target: IInteractionTarget): void;
+    pick(layer: ILayer, target: IInteractionTarget): Promise<boolean>;
+    selectFeature(pickedColors: Uint8Array | undefined): void;
+    highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
+    updateHighLight(r: number, g: number, b: number, type: string): void;
+    setPickState(): void;
+    private color2PickId;
+    private pickId2Color;
+    /** 从瓦片中根据数据 */
+    getFeatureById(pickedFeatureIdx: number): any[];
+    pickRasterLayer(): boolean;
+}

package/es/tile/service/TilePickService.js

@@ -0,0 +1,126 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
+import { TileSourceService } from "./TileSourceService";
+const SELECT = 'select';
+const ACTIVE = 'active';
+export class TilePickService {
+  constructor({
+    layerService,
+    tileLayerService,
+    parent
+  }) {
+    _defineProperty(this, "layerService", void 0);
+    _defineProperty(this, "tileLayerService", void 0);
+    _defineProperty(this, "tileSourceService", void 0);
+    _defineProperty(this, "parent", void 0);
+    _defineProperty(this, "tilePickID", new Map());
+    this.layerService = layerService;
+    this.tileLayerService = tileLayerService;
+    this.parent = parent;
+    this.tileSourceService = new TileSourceService();
+  }
+  pickRender(target) {
+    // 一个 TileLayer 有多个 Tile，但是会同时触发事件的只有一个 Tile
+    const tile = this.tileLayerService.getVisibleTileBylngLat(target.lngLat);
+    if (tile) {
+      // TODO 多图层拾取
+      const pickLayer = tile.getMainLayer();
+      pickLayer === null || pickLayer === void 0 || pickLayer.layerPickService.pickRender(target);
+    }
+  }
+  pick(layer, target) {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const container = _this.parent.getContainer();
+      const pickingService = container.pickingService;
+      if (layer.type === 'RasterLayer') {
+        const tile = _this.tileLayerService.getVisibleTileBylngLat(target.lngLat);
+        if (tile && tile.getMainLayer() !== undefined) {
+          const pickLayer = tile.getMainLayer();
+          return pickLayer.layerPickService.pickRasterLayer(pickLayer, target, _this.parent);
+        }
+        return false;
+      }
+      _this.pickRender(target);
+      return pickingService.pickFromPickingFBO(layer, target);
+    })();
+  }
+  selectFeature(pickedColors) {
+    // @ts-ignore
+    const [r, g, b] = pickedColors;
+    const id = this.color2PickId(r, g, b);
+    this.tilePickID.set(SELECT, id);
+    this.updateHighLight(r, g, b, SELECT);
+  }
+  highlightPickedFeature(pickedColors) {
+    // @ts-ignore
+    const [r, g, b] = pickedColors;
+    const id = this.color2PickId(r, g, b);
+    this.tilePickID.set(ACTIVE, id);
+    this.updateHighLight(r, g, b, ACTIVE);
+  }
+  updateHighLight(r, g, b, type) {
+    // 只遍历已加载的瓦片，跳过不可见的
+    for (const tile of this.tileLayerService.tiles) {
+      if (!tile.isLoaded) continue;
+      const layer = tile.getMainLayer();
+      switch (type) {
+        case SELECT:
+          layer === null || layer === void 0 || layer.hooks.beforeSelect.call([r, g, b]);
+          break;
+        case ACTIVE:
+          layer === null || layer === void 0 || layer.hooks.beforeHighlight.call([r, g, b]);
+          break;
+      }
+    }
+  }
+  setPickState() {
+    const selectColor = this.tilePickID.get(SELECT);
+    const activeColor = this.tilePickID.get(ACTIVE);
+    if (selectColor) {
+      const [r, g, b] = this.pickId2Color(selectColor);
+      this.updateHighLight(r, g, b, SELECT);
+      return;
+    }
+    if (activeColor) {
+      const [r, g, b] = this.pickId2Color(activeColor);
+      this.updateHighLight(r, g, b, ACTIVE);
+      return;
+    }
+  }
+  color2PickId(r, g, b) {
+    return decodePickingColor(new Uint8Array([r, g, b]));
+  }
+  pickId2Color(str) {
+    return encodePickingColor(str);
+  }
+
+  /** 从瓦片中根据数据 */
+  getFeatureById(pickedFeatureIdx) {
+    // 提取当前可见瓦片并合并 features
+    const features = [];
+    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 的格式 点、线、面可以通用
+
+    // const data = this.tileSourceService.getCombineFeature(features);
+
+    return features;
+  }
+
+  // Tip: for interface define
+
+  pickRasterLayer() {
+    return false;
+  }
+}

package/es/tile/service/TileSourceService.d.ts

@@ -0,0 +1,7 @@
+import type { IParseDataItem } from '@antv/l7-core';
+/**
+ * 专门处理 Tile 数据相关
+ */
+export declare class TileSourceService {
+    getCombineFeature(features: IParseDataItem[]): any;
+}

package/es/tile/service/TileSourceService.js

@@ -0,0 +1,26 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import * as turf from '@turf/helpers';
+import union from '@turf/union';
+
+/**
+ * 专门处理 Tile 数据相关
+ */
+export class TileSourceService {
+  getCombineFeature(features) {
+    let p = null;
+    const properties = features[0];
+    features.map(feature => {
+      const polygon = turf.polygon(feature.coordinates);
+      // tslint:disable-next-line: prefer-conditional-expression
+      if (p === null) {
+        p = polygon;
+      } else {
+        p = union(p, polygon);
+      }
+    });
+    if (properties) {
+      p.properties = _objectSpread({}, properties);
+    }
+    return p;
+  }
+}

package/es/tile/tile/DebugTile.d.ts

@@ -0,0 +1,16 @@
+import Tile from './Tile';
+export default class DebugTile extends Tile {
+    initTileLayer(): Promise<void>;
+    protected getSourceOption(): {
+        data: {
+            type: string;
+            features: any;
+        };
+        options: {
+            parser: {
+                type: string;
+            };
+            transforms: import("@antv/l7-core").ITransform[];
+        };
+    };
+}

package/es/tile/tile/DebugTile.js

@@ -0,0 +1,47 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import LineLayer from "../../line";
+import PointLayer from "../../point";
+import Tile from "./Tile";
+export default class DebugTile extends Tile {
+  initTileLayer() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const sourceOptions = _this.getSourceOption();
+      const pointData = sourceOptions.data.features[0].properties;
+      const lineLayer = new LineLayer().source(sourceOptions.data, sourceOptions.options).size(1).shape('line').color('red');
+      const pointLayer = new PointLayer({
+        minZoom: _this.z - 1,
+        maxZoom: _this.z + 1,
+        textAllowOverlap: true
+      }).source([pointData], {
+        parser: {
+          type: 'json',
+          x: 'x',
+          y: 'y'
+        }
+      }).size(20).color('red').shape(_this.key).style({
+        stroke: '#fff',
+        strokeWidth: 2
+      });
+      yield _this.addLayer(lineLayer);
+      yield _this.addLayer(pointLayer);
+      _this.isLoaded = true;
+    })();
+  }
+  getSourceOption() {
+    const rawSource = this.parent.getSource();
+    const features = this.sourceTile.data.layers.testTile.features;
+    return {
+      data: {
+        type: 'FeatureCollection',
+        features
+      },
+      options: {
+        parser: {
+          type: 'geojson'
+        },
+        transforms: rawSource.transforms
+      }
+    };
+  }
+}

package/es/tile/tile/ImageTile.d.ts

@@ -0,0 +1,14 @@
+import Tile from './Tile';
+export default class ImageTile extends Tile {
+    initTileLayer(): Promise<void>;
+    protected getSourceOption(): {
+        data: any;
+        options: {
+            parser: {
+                type: string;
+                extent: import("@antv/l7-utils").TileBounds;
+            };
+            transforms: import("@antv/l7-core").ITransform[];
+        };
+    };
+}

package/es/tile/tile/ImageTile.js

@@ -0,0 +1,39 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import ImageLayer from "../../image";
+import Tile from "./Tile";
+export default class ImageTile extends Tile {
+  initTileLayer() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const attributes = _this.parent.getLayerAttributeConfig();
+      const layerOptions = _this.getLayerOptions();
+      const sourceOptions = _this.getSourceOption();
+      const layer = new ImageLayer(_objectSpread({}, layerOptions)).source(sourceOptions.data, sourceOptions.options);
+
+      // 初始化数据映射
+      // tslint:disable-next-line: no-unused-expression
+      attributes && Object.keys(attributes).forEach(type => {
+        var _attributes$attr, _attributes$attr2;
+        const attr = type;
+        // @ts-ignore
+        layer[attr]((_attributes$attr = attributes[attr]) === null || _attributes$attr === void 0 ? void 0 : _attributes$attr.field, (_attributes$attr2 = attributes[attr]) === null || _attributes$attr2 === void 0 ? void 0 : _attributes$attr2.values);
+      });
+      yield _this.addLayer(layer);
+      _this.isLoaded = true;
+    })();
+  }
+  getSourceOption() {
+    const rawSource = this.parent.getSource();
+    return {
+      data: this.sourceTile.data,
+      options: {
+        parser: {
+          type: 'image',
+          extent: this.sourceTile.bounds
+        },
+        transforms: rawSource.transforms
+      }
+    };
+  }
+}

package/es/tile/tile/MaskTile.d.ts

@@ -0,0 +1,18 @@
+import Tile from './Tile';
+export default class MaskTile extends Tile {
+    initTileLayer(): Promise<void>;
+    getFeatures(sourceLayer: string | undefined): any;
+    protected getSourceOption(): {
+        data: {
+            type: string;
+            features: any;
+        };
+        options: {
+            parser: {
+                type: string;
+                featureId: string | undefined;
+            };
+            transforms: import("@antv/l7-core").ITransform[];
+        };
+    };
+}

package/es/tile/tile/MaskTile.js

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import MaskLayer from "../../mask";
+import Tile from "./Tile";
+export default class MaskTile extends Tile {
+  initTileLayer() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const attributes = _this.parent.getLayerAttributeConfig();
+      const layerOptions = _this.getLayerOptions();
+      const sourceOptions = _this.getSourceOption();
+      const layer = new MaskLayer(_objectSpread({}, layerOptions)).source(sourceOptions.data, sourceOptions.options);
+
+      // 初始化数据映射
+      // tslint:disable-next-line: no-unused-expression
+      attributes && Object.keys(attributes).forEach(type => {
+        var _attributes$attr, _attributes$attr2;
+        const attr = type;
+        // @ts-ignore
+        layer[attr]((_attributes$attr = attributes[attr]) === null || _attributes$attr === void 0 ? void 0 : _attributes$attr.field, (_attributes$attr2 = attributes[attr]) === null || _attributes$attr2 === void 0 ? void 0 : _attributes$attr2.values);
+      });
+      yield _this.addLayer(layer);
+      _this.isLoaded = true;
+    })();
+  }
+  getFeatures(sourceLayer) {
+    if (!sourceLayer) {
+      return [];
+    }
+    const source = this.sourceTile.data;
+    return source.getTileData(sourceLayer);
+  }
+  getSourceOption() {
+    const rawSource = this.parent.getSource();
+    const {
+      sourceLayer,
+      featureId
+    } = this.parent.getLayerConfig();
+    const features = this.getFeatures(sourceLayer);
+    return {
+      data: {
+        type: 'FeatureCollection',
+        features
+      },
+      options: {
+        parser: {
+          type: 'geojson',
+          featureId
+        },
+        transforms: rawSource.transforms
+      }
+    };
+  }
+}

package/es/tile/tile/RasterRGBTile.d.ts

@@ -0,0 +1,11 @@
+import Tile from './Tile';
+export default class RasterTile extends Tile {
+    initTileLayer(): Promise<void>;
+    protected getSourceOption(): {
+        data: any;
+        options: {
+            parser: any;
+            transforms: import("@antv/l7-core").ITransform[];
+        };
+    };
+}

package/es/tile/tile/RasterRGBTile.js

@@ -0,0 +1,47 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+const _excluded = ["rasterData"];
+import RasterLayer from "../../raster";
+import Tile from "./Tile";
+export default class RasterTile extends Tile {
+  initTileLayer() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const attributes = _this.parent.getLayerAttributeConfig();
+      const layerOptions = _this.getLayerOptions();
+      const sourceOptions = _this.getSourceOption();
+      const layer = new RasterLayer(_objectSpread({}, layerOptions)).source(sourceOptions.data, sourceOptions.options);
+
+      // 初始化数据映射
+      // tslint:disable-next-line: no-unused-expression
+      attributes && Object.keys(attributes).forEach(type => {
+        var _attributes$attr, _attributes$attr2;
+        const attr = type;
+        // @ts-ignore
+        layer[attr]((_attributes$attr = attributes[attr]) === null || _attributes$attr === void 0 ? void 0 : _attributes$attr.field, (_attributes$attr2 = attributes[attr]) === null || _attributes$attr2 === void 0 ? void 0 : _attributes$attr2.values);
+      });
+      yield _this.addLayer(layer);
+      _this.isLoaded = true;
+    })();
+  }
+  getSourceOption() {
+    const rawSource = this.parent.getSource();
+    const _this$sourceTile$data = this.sourceTile.data.data,
+      {
+        rasterData
+      } = _this$sourceTile$data,
+      res = _objectWithoutProperties(_this$sourceTile$data, _excluded);
+    return {
+      data: rasterData,
+      // 栅格数
+      options: {
+        parser: _objectSpread({
+          type: 'rasterRgb',
+          extent: this.sourceTile.bounds
+        }, res),
+        transforms: rawSource.transforms
+      }
+    };
+  }
+}

package/es/tile/tile/RasterTerrainRGBTile.d.ts

@@ -0,0 +1,14 @@
+import Tile from './Tile';
+export default class RasterTerrainRGBTile extends Tile {
+    initTileLayer(): Promise<void>;
+    protected getSourceOption(): {
+        data: any;
+        options: {
+            parser: {
+                type: string;
+                extent: import("@antv/l7-utils").TileBounds;
+            };
+            transforms: import("@antv/l7-core").ITransform[];
+        };
+    };
+}