@antv/l7-layers 2.10.1 → 2.10.2

package/es/tile/tileFactory/layers/{rasterDataLayer.js → RasterDataLayer.js}

@@ -1,3 +1,4 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -5,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -37,32 +39,42 @@ var RasterTiffLayer = /*#__PURE__*/function (_BaseLayer) {
 
   _createClass(RasterTiffLayer, [{
     key: "buildModels",
-    value: function buildModels() {
-      var _this2 = this;
-
-      var model = this.getModelType();
-      this.layerModel = new model(this);
-      this.layerModel.initModels(function (models) {
-        _this2.dispatchModelLoad(models);
-      });
-    }
-  }, {
-    key: "rebuildModels",
-    value: function rebuildModels() {
-      var _this3 = this;
+    value: function () {
+      var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var model;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                model = this.getModel();
+                this.layerModel = new model(this);
+                _context.next = 4;
+                return this.initLayerModels();
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function buildModels() {
+        return _buildModels.apply(this, arguments);
+      }
 
-      this.layerModel.buildModels(function (models) {
-        _this3.dispatchModelLoad(models);
-      });
+      return buildModels;
+    }()
+  }, {
+    key: "getModel",
+    value: function getModel() {
+      var type = this.getModelType();
+      return type === 'rasterRgb' ? RasterRgbModel : RasterModel;
     }
   }, {
     key: "getModelType",
     value: function getModelType() {
-      if (this.layerSource.parser.type === 'rasterRgb') {
-        return RasterRgbModel;
-      } else {
-        return RasterModel;
-      }
+      return this.layerSource.parser.type === 'rasterRgb' ? 'rasterRgb' : 'raster';
     }
   }, {
     key: "getDefaultConfig",

package/es/tile/tileFactory/layers/{tileTest.d.ts → TileDebugLayer.d.ts}

@@ -2,14 +2,14 @@ import BaseLayer from '../../../core/BaseLayer';
 import { IBaseLayerStyleOptions } from '../../../core/interface';
 export default class TileDebugLayer extends BaseLayer<IBaseLayerStyleOptions> {
     type: string;
+    zIndex: number;
     defaultSourceConfig: {
         data: never[];
         options: {
             parser: {
                 type: string;
-                cancelExtent: boolean;
             };
         };
     };
-    buildModels(): void;
+    buildModels(): Promise<void>;
 }

package/es/tile/tileFactory/layers/{tileTest.js → TileDebugLayer.js}

@@ -1,3 +1,4 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -5,13 +6,13 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import BaseLayer from "../../../core/BaseLayer";
-import TileModel from "../../models/tileModel";
 
 var TileDebugLayer = /*#__PURE__*/function (_BaseLayer) {
   _inherits(TileDebugLayer, _BaseLayer);
@@ -31,12 +32,13 @@ var TileDebugLayer = /*#__PURE__*/function (_BaseLayer) {
 
     _defineProperty(_assertThisInitialized(_this), "type", 'TileDebugLayer');
 
+    _defineProperty(_assertThisInitialized(_this), "zIndex", 10000);
+
     _defineProperty(_assertThisInitialized(_this), "defaultSourceConfig", {
       data: [],
       options: {
         parser: {
-          type: 'testTile',
-          cancelExtent: true
+          type: 'testTile'
         }
       }
     });
@@ -46,14 +48,25 @@ var TileDebugLayer = /*#__PURE__*/function (_BaseLayer) {
 
   _createClass(TileDebugLayer, [{
     key: "buildModels",
-    value: function buildModels() {
-      var _this2 = this;
+    value: function () {
+      var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function buildModels() {
+        return _buildModels.apply(this, arguments);
+      }
 
-      this.layerModel = new TileModel(this);
-      this.layerModel.initModels(function (models) {
-        _this2.dispatchModelLoad(models);
-      });
-    }
+      return buildModels;
+    }()
   }]);
 
   return TileDebugLayer;

package/es/tile/tileFactory/util.d.ts

@@ -0,0 +1,6 @@
+import PointLayer from '../../point/index';
+import LineLayer from '../../line';
+import PolygonLayer from '../../polygon';
+import MaskLayer from '../../mask';
+export declare function getTileLayer(type: string): typeof LineLayer | typeof PointLayer | typeof PolygonLayer;
+export declare function getMaskLayer(type: string): typeof MaskLayer | undefined;

package/es/tile/tileFactory/util.js

@@ -0,0 +1,33 @@
+import PointLayer from "../../point/index";
+import LineLayer from "../../line";
+import PolygonLayer from "../../polygon";
+import MaskLayer from "../../mask";
+export function getTileLayer(type) {
+  if (type === 'PolygonLayer') {
+    return PolygonLayer;
+  }
+
+  if (type === 'LineLayer') {
+    return LineLayer;
+  }
+
+  if (type === 'PointLayer') {
+    return PointLayer;
+  }
+
+  return PointLayer;
+}
+export function getMaskLayer(type) {
+  switch (type) {
+    case 'PolygonLayer':
+    case 'LineLayer':
+      return MaskLayer;
+
+    case 'PointLayer':
+    case 'RasterLayer':
+      return undefined;
+
+    default:
+      return undefined;
+  }
+}

package/es/tile/tileLayer/BaseLayer.d.ts

@@ -0,0 +1,46 @@
+import { ILayer, IMapService, ILayerService, IRendererService, IPickingService, IInteractionTarget } from '@antv/l7-core';
+import { SourceTile, TilesetManager } from '@antv/l7-utils';
+import { TileLayerService } from '../service/TileLayerService';
+import { TilePickService } from '../service/TilePickService';
+export default class BaseTileLayer {
+    private parent;
+    tileLayerService: TileLayerService;
+    protected mapService: IMapService;
+    protected layerService: ILayerService;
+    protected rendererService: IRendererService;
+    protected pickingService: IPickingService;
+    protected tilePickService: TilePickService;
+    tilesetManager: TilesetManager;
+    initedTileset: boolean;
+    protected lastViewStates: {
+        zoom: number;
+        latLonBounds: [number, number, number, number];
+    };
+    constructor(parent: ILayer);
+    protected initTileSetManager(): void;
+    protected mapchange(): void;
+    protected getCurrentView(): {
+        latLonBounds: [number, number, number, number];
+        zoom: number;
+    };
+    private bindTilesetEvent;
+    render(): void;
+    getLayers(): ILayer[];
+    getTiles(): import("@antv/l7-core").ITile[];
+    viewchange: import("lodash").DebouncedFunc<() => void>;
+    tileLoaded(tile: SourceTile): void;
+    tileError(error: Error): void;
+    destroy(): void;
+    tileUnLoad(tile: SourceTile): void;
+    tileUpdate(): Promise<void>;
+    isTileReady(tile: SourceTile): boolean;
+    setPickState(layers: ILayer[]): void;
+    pickRender(target: IInteractionTarget): void;
+    selectFeature(pickedColors: Uint8Array | undefined): void;
+    highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
+    /**
+     * 实现 TileLayer 对子图层方法的代理
+     * @param parent
+     */
+    private proxy;
+}

package/es/tile/tileLayer/BaseLayer.js

@@ -0,0 +1,358 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { TYPES } from '@antv/l7-core';
+import { TileLayerService } from "../service/TileLayerService";
+import { TilePickService } from "../service/TilePickService";
+import { debounce } from 'lodash';
+import { getTileFactory } from "../tileFactory";
+import { ProxyFuncs } from "../style/constants";
+
+var BaseTileLayer = /*#__PURE__*/function () {
+  // 瓦片数据管理器
+  function BaseTileLayer(parent) {
+    _classCallCheck(this, BaseTileLayer);
+
+    _defineProperty(this, "initedTileset", false);
+
+    _defineProperty(this, "viewchange", debounce(this.mapchange, 24));
+
+    this.parent = parent;
+    var container = this.parent.getContainer();
+    this.rendererService = container.get(TYPES.IRendererService);
+    this.layerService = container.get(TYPES.ILayerService);
+    this.mapService = container.get(TYPES.IMapService);
+    this.pickingService = container.get(TYPES.IPickingService); // 初始化瓦片管理服务
+
+    this.tileLayerService = new TileLayerService({
+      rendererService: this.rendererService,
+      layerService: this.layerService,
+      parent: parent
+    }); // 初始化拾取服务
+
+    this.tilePickService = new TilePickService({
+      tileLayerService: this.tileLayerService,
+      layerService: this.layerService
+    }); // 重置
+
+    this.parent.setLayerPickService(this.tilePickService);
+    this.proxy(parent);
+    this.initTileSetManager();
+  }
+
+  _createClass(BaseTileLayer, [{
+    key: "initTileSetManager",
+    value: function initTileSetManager() {
+      var _this$tilesetManager;
+
+      var source = this.parent.getSource();
+      this.tilesetManager = source.tileset;
+
+      if (!this.initedTileset) {
+        this.bindTilesetEvent();
+        this.initedTileset = true;
+      }
+
+      var _this$getCurrentView = this.getCurrentView(),
+          latLonBounds = _this$getCurrentView.latLonBounds,
+          zoom = _this$getCurrentView.zoom;
+
+      (_this$tilesetManager = this.tilesetManager) === null || _this$tilesetManager === void 0 ? void 0 : _this$tilesetManager.update(zoom, latLonBounds);
+    }
+  }, {
+    key: "mapchange",
+    value: function mapchange() {
+      var _this$tilesetManager2;
+
+      var _this$getCurrentView2 = this.getCurrentView(),
+          latLonBounds = _this$getCurrentView2.latLonBounds,
+          zoom = _this$getCurrentView2.zoom;
+
+      if (this.mapService.version === 'GAODE1.x') {
+        var _this$parent$getLayer = this.parent.getLayerConfig(),
+            visible = _this$parent$getLayer.visible;
+
+        if (zoom < 3 && visible) {
+          this.parent.updateLayerConfig({
+            visible: false
+          });
+          this.layerService.reRender();
+        } else if (zoom >= 3 && !visible) {
+          this.parent.updateLayerConfig({
+            visible: true
+          });
+          this.layerService.reRender();
+        }
+      }
+
+      if (this.lastViewStates && this.lastViewStates.zoom === zoom && this.lastViewStates.latLonBounds.toString() === latLonBounds.toString()) {
+        return;
+      }
+
+      this.lastViewStates = {
+        zoom: zoom,
+        latLonBounds: latLonBounds
+      };
+      (_this$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 ? void 0 : _this$tilesetManager2.throttleUpdate(zoom, latLonBounds);
+    }
+  }, {
+    key: "getCurrentView",
+    value: function getCurrentView() {
+      var bounds = this.mapService.getBounds();
+      var latLonBounds = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
+      var zoom = this.mapService.getZoom();
+      return {
+        latLonBounds: latLonBounds,
+        zoom: zoom
+      };
+    }
+  }, {
+    key: "bindTilesetEvent",
+    value: function bindTilesetEvent() {
+      var _this = this;
+
+      // 瓦片数据加载成功
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      this.tilesetManager.on('tile-loaded', function (tile) {// 将事件抛出，图层上可以监听使用
+      }); // 瓦片数据从缓存删除或被执行重新加载
+
+      this.tilesetManager.on('tile-unload', function (tile) {
+        // 将事件抛出，图层上可以监听使用
+        _this.tileUnLoad(tile);
+      }); // 瓦片数据加载失败
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+      this.tilesetManager.on('tile-error', function (error, tile) {
+        // 将事件抛出，图层上可以监听使用
+        _this.tileError(error);
+      }); // 瓦片显隐状态更新
+
+      this.tilesetManager.on('tile-update', function () {
+        _this.tileUpdate();
+      }); // 地图视野发生改变
+
+      this.mapService.on('zoomend', function () {
+        return _this.mapchange();
+      });
+      this.mapService.on('moveend', function () {
+        return _this.viewchange();
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      this.tileLayerService.render();
+    }
+  }, {
+    key: "getLayers",
+    value: function getLayers() {
+      return this.tileLayerService.getLayers();
+    }
+  }, {
+    key: "getTiles",
+    value: function getTiles() {
+      return this.tileLayerService.getTiles();
+    } //  防抖操作
+
+  }, {
+    key: "tileLoaded",
+    value: // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function tileLoaded(tile) {//
+    }
+  }, {
+    key: "tileError",
+    value: function tileError(error) {
+      console.warn('error:', error);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$tilesetManager3;
+
+      (_this$tilesetManager3 = this.tilesetManager) === null || _this$tilesetManager3 === void 0 ? void 0 : _this$tilesetManager3.destroy();
+      this.tileLayerService.destroy();
+    }
+  }, {
+    key: "tileUnLoad",
+    value: function tileUnLoad(tile) {
+      this.tileLayerService.removeTile(tile.key);
+    }
+  }, {
+    key: "tileUpdate",
+    value: function () {
+      var _tileUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _this2 = this;
+
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (this.tilesetManager) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 2:
+                _context2.next = 4;
+                return Promise.all(this.tilesetManager.tiles.filter(function (tile) {
+                  return tile.isLoaded;
+                }) // 过滤未加载完成的
+                .filter(function (tile) {
+                  return tile.isVisibleChange;
+                }) // 过滤未发生变化的
+                .filter(function (tile) {
+                  return _this2.isTileReady(tile);
+                }) // 过滤未发生变化的
+                .map( /*#__PURE__*/function () {
+                  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(tile) {
+                    var tileInstance, tileLayer;
+                    return _regeneratorRuntime.wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            if (_this2.tileLayerService.hasTile(tile.key)) {
+                              _context.next = 11;
+                              break;
+                            }
+
+                            tileInstance = getTileFactory(_this2.parent);
+                            tileLayer = new tileInstance(tile, _this2.parent);
+                            _context.next = 5;
+                            return tileLayer.initTileLayer();
+
+                          case 5:
+                            _this2.tilePickService.setPickState();
+
+                            if (tileLayer.getLayers().length !== 0) {
+                              _this2.tileLayerService.addTile(tileLayer);
+
+                              _this2.layerService.reRender();
+                            }
+
+                            _this2.tileLayerService.addTile(tileLayer);
+
+                            _this2.layerService.reRender();
+
+                            _context.next = 14;
+                            break;
+
+                          case 11:
+                            _this2.tileLayerService.updateTileVisible(tile);
+
+                            _this2.tilePickService.setPickState();
+
+                            _this2.layerService.reRender();
+
+                          case 14:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }));
+
+                  return function (_x) {
+                    return _ref.apply(this, arguments);
+                  };
+                }()));
+
+              case 4:
+                if (this.tilesetManager.isLoaded) {
+                  // 将事件抛出，图层上可以使用瓦片
+                  this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
+                }
+
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function tileUpdate() {
+        return _tileUpdate.apply(this, arguments);
+      }
+
+      return tileUpdate;
+    }() // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  }, {
+    key: "isTileReady",
+    value: function isTileReady(tile) {
+      // 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 false;
+      //   }
+      // }
+      return true;
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  }, {
+    key: "setPickState",
+    value: function setPickState(layers) {}
+  }, {
+    key: "pickRender",
+    value: function pickRender(target) {
+      this.tilePickService.pickRender(target);
+    }
+  }, {
+    key: "selectFeature",
+    value: function selectFeature(pickedColors) {
+      this.tilePickService.selectFeature(pickedColors);
+    }
+  }, {
+    key: "highlightPickedFeature",
+    value: function highlightPickedFeature(pickedColors) {
+      this.tilePickService.highlightPickedFeature(pickedColors);
+    }
+    /**
+     * 实现 TileLayer 对子图层方法的代理
+     * @param parent 
+     */
+
+  }, {
+    key: "proxy",
+    value: function proxy(parent) {
+      var _this3 = this;
+
+      ProxyFuncs.forEach(function (func) {
+        // @ts-ignore
+        var oldStyleFunc = parent[func].bind(parent); // @ts-ignore
+
+        parent[func] = function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          oldStyleFunc.apply(void 0, args);
+
+          _this3.getLayers().map(function (child) {
+            // @ts-ignore
+            child[func].apply(child, args);
+          }); // Tip: 目前在更新 RasterData 的 colorTexture 的时候需要额外优化
+
+
+          if (func === 'style') {
+            _this3.getTiles().forEach(function (tile) {
+              return tile.styleUpdate.apply(tile, args);
+            });
+          }
+
+          return parent;
+        };
+      });
+    }
+  }]);
+
+  return BaseTileLayer;
+}();
+
+export { BaseTileLayer as default };

package/es/tile/utils.d.ts

@@ -1,5 +1,4 @@
-import { ILayer, ILayerService } from '@antv/l7-core';
-import { Tile } from '@antv/l7-utils';
+import { ILayer } from '@antv/l7-core';
 export declare const tileVectorParser: string[];
 /**
  * 判断当前图层是否是瓦片图层
@@ -7,16 +6,7 @@ export declare const tileVectorParser: string[];
  * @returns
  */
 export declare function isTileGroup(layer: ILayer): boolean;
-export declare function isVectorTile(parserType: string): boolean;
-export declare function registerLayers(parentLayer: ILayer, layers: ILayer[]): void;
-export declare function getLayerShape(layerType: string, layer: ILayer): string | string[];
-export declare function getMaskValue(layerType: string, mask: boolean): boolean;
 export declare function getContainerSize(container: HTMLCanvasElement | HTMLElement): DOMRect | {
     width: number;
     height: number;
 };
-export declare function isTileLoaded(tile: Tile): boolean;
-export declare function isTileChildLoaded(tile: Tile): boolean;
-export declare function isTileParentLoaded(tile: Tile): boolean;
-export declare function tileAllLoad(tile: Tile, callback: () => void): void;
-export declare function updateTileVisible(tile: Tile, layers: ILayer[], layerService: ILayerService): void;