@antv/l7-layers 2.14.1 → 2.14.3

package/es/tile/tileFactory/Tile.js

@@ -6,6 +6,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { createLayerContainer } from '@antv/l7-core';
+import PolygonLayer from "../../polygon";
 import { isNeedMask } from "./util";
 
 var Tile = /*#__PURE__*/function () {
@@ -18,6 +19,8 @@ var Tile = /*#__PURE__*/function () {
 
     _defineProperty(this, "isLoaded", false);
 
+    _defineProperty(this, "tileMaskLayers", []);
+
     this.parent = parent;
     this.sourceTile = sourceTile;
     this.x = sourceTile.x;
@@ -53,30 +56,80 @@ var Tile = /*#__PURE__*/function () {
   }, {
     key: "getLayerOptions",
     value: function getLayerOptions() {
+      var _options$maskLayers;
+
       var options = this.parent.getLayerConfig();
       return _objectSpread(_objectSpread({}, options), {}, {
         autoFit: false,
-        mask: isNeedMask(this.parent.type) || options.mask
+        maskLayers: this.getMaskLayer(),
+        tileMask: isNeedMask(this.parent.type),
+        mask: options.mask || ((_options$maskLayers = options.maskLayers) === null || _options$maskLayers === void 0 ? void 0 : _options$maskLayers.length) !== 0 && options.enableMask
+      });
+    } // 获取Mask 图层
+
+  }, {
+    key: "getMaskLayer",
+    value: function getMaskLayer() {
+      var _this = this;
+
+      var _this$parent$getLayer = this.parent.getLayerConfig(),
+          maskLayers = _this$parent$getLayer.maskLayers;
+
+      var layers = [];
+      maskLayers === null || maskLayers === void 0 ? void 0 : maskLayers.forEach(function (layer) {
+        if (!layer.tileLayer) {
+          // 非瓦片图层返回图层本身，瓦片图层返回对应的行列号图层
+          layers.push(layer);
+          return layer;
+        }
+
+        var tileLayer = layer.tileLayer;
+        var tile = tileLayer.getTile(_this.sourceTile.key);
+        var l = tile === null || tile === void 0 ? void 0 : tile.getLayers()[0];
+
+        if (l) {
+          layers.push(l);
+        }
       });
+      return layers;
     }
   }, {
-    key: "addMask",
+    key: "addTileMask",
     value: function () {
-      var _addMask = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(layer, mask) {
-        var container;
+      var _addTileMask = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var mask, container, mainLayer;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
+                mask = new PolygonLayer({
+                  visible: false,
+                  enablePicking: false
+                }).source({
+                  type: 'FeatureCollection',
+                  features: [this.sourceTile.bboxPolygon]
+                }, {
+                  parser: {
+                    type: 'geojson',
+                    featureId: 'id'
+                  }
+                }).shape('fill');
                 container = createLayerContainer(this.parent.sceneContainer);
                 mask.setContainer(container, this.parent.sceneContainer);
-                _context.next = 4;
+                _context.next = 5;
                 return mask.init();
 
-              case 4:
-                layer.addMaskLayer(mask);
-
               case 5:
+                this.tileMask = mask;
+                mainLayer = this.getMainLayer();
+
+                if (mainLayer !== undefined) {
+                  mainLayer.tileMask = mask;
+                }
+
+                return _context.abrupt("return", mask);
+
+              case 9:
               case "end":
                 return _context.stop();
             }
@@ -84,6 +137,38 @@ var Tile = /*#__PURE__*/function () {
         }, _callee, this);
       }));
 
+      function addTileMask() {
+        return _addTileMask.apply(this, arguments);
+      }
+
+      return addTileMask;
+    }()
+  }, {
+    key: "addMask",
+    value: function () {
+      var _addMask = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(layer, mask) {
+        var container;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                container = createLayerContainer(this.parent.sceneContainer);
+                mask.setContainer(container, this.parent.sceneContainer);
+                _context2.next = 4;
+                return mask.init();
+
+              case 4:
+                layer.addMask(mask);
+                this.tileMaskLayers.push(mask);
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
       function addMask(_x, _x2) {
         return _addMask.apply(this, arguments);
       }
@@ -93,26 +178,26 @@ var Tile = /*#__PURE__*/function () {
   }, {
     key: "addLayer",
     value: function () {
-      var _addLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(layer) {
+      var _addLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(layer) {
         var container;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 // set flag
                 layer.isTileLayer = true;
                 container = createLayerContainer(this.parent.sceneContainer);
                 layer.setContainer(container, this.parent.sceneContainer);
                 this.layers.push(layer);
-                _context2.next = 6;
+                _context3.next = 6;
                 return layer.init();
 
               case 6:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
       function addLayer(_x3) {
@@ -162,6 +247,9 @@ var Tile = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$tileMask;
+
+      (_this$tileMask = this.tileMask) === null || _this$tileMask === void 0 ? void 0 : _this$tileMask.destroy();
       this.layers.forEach(function (layer) {
         return layer.destroy();
       });

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

@@ -2,7 +2,6 @@ import { ILayer } from '@antv/l7-core';
 import Tile from './Tile';
 export default class VectorTile extends Tile {
     initTileLayer(): Promise<void>;
-    protected addTileMask(layer: ILayer): Promise<void>;
     protected getSourceOption(): {
         data: {
             type: string;

package/es/tile/tileFactory/VectorTile.js

@@ -11,7 +11,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 MaskLayer from "../../mask";
 import Tile from "./Tile";
 import { getTileLayer } from "./util";
 
@@ -58,18 +57,17 @@ var VectorTile = /*#__PURE__*/function (_Tile) {
 
                   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);
                 });
+                _context.next = 11;
+                return this.addLayer(layer);
 
-                if (!layerOptions.mask) {
-                  _context.next = 12;
+              case 11:
+                if (!layerOptions.tileMask) {
+                  _context.next = 14;
                   break;
                 }
 
-                _context.next = 12;
-                return this.addTileMask(layer);
-
-              case 12:
                 _context.next = 14;
-                return this.addLayer(layer);
+                return this.addTileMask();
 
               case 14:
                 this.setLayerMinMaxZoom(layer);
@@ -88,44 +86,6 @@ var VectorTile = /*#__PURE__*/function (_Tile) {
       }
 
       return initTileLayer;
-    }() // Todo 校验数据有效性
-
-  }, {
-    key: "addTileMask",
-    value: function () {
-      var _addTileMask = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(layer) {
-        var mask;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                mask = new MaskLayer({
-                  layerType: 'MaskLayer'
-                }).source({
-                  type: 'FeatureCollection',
-                  features: [this.sourceTile.bboxPolygon]
-                }, {
-                  parser: {
-                    type: 'geojson',
-                    featureId: 'id'
-                  }
-                });
-                _context2.next = 3;
-                return this.addMask(layer, mask);
-
-              case 3:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function addTileMask(_x) {
-        return _addTileMask.apply(this, arguments);
-      }
-
-      return addTileMask;
     }()
   }, {
     key: "getSourceOption",

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

@@ -18,7 +18,7 @@ export default class BaseTileLayer {
     };
     constructor(parent: ILayer);
     protected initTileSetManager(): void;
-    protected mapchange(): void;
+    protected mapchange: () => void;
     protected getCurrentView(): {
         latLonBounds: [number, number, number, number];
         zoom: number;
@@ -27,6 +27,7 @@ export default class BaseTileLayer {
     render(): void;
     getLayers(): ILayer[];
     getTiles(): import("@antv/l7-core").ITile[];
+    getTile(key: string): import("@antv/l7-core").ITile | undefined;
     viewchange: import("lodash").DebouncedFunc<() => void>;
     tileLoaded(tile: SourceTile): void;
     tileError(error: Error): void;

package/es/tile/tileLayer/BaseLayer.js

@@ -13,10 +13,49 @@ import { getTileFactory } from "../tileFactory";
 var BaseTileLayer = /*#__PURE__*/function () {
   // 瓦片数据管理器
   function BaseTileLayer(parent) {
+    var _this = this;
+
     _classCallCheck(this, BaseTileLayer);
 
     _defineProperty(this, "initedTileset", false);
 
+    _defineProperty(this, "mapchange", function () {
+      var _this$tilesetManager;
+
+      var _this$getCurrentView = _this.getCurrentView(),
+          latLonBounds = _this$getCurrentView.latLonBounds,
+          zoom = _this$getCurrentView.zoom;
+
+      if (_this.mapService.version === 'GAODE1.x') {
+        var _this$parent$getLayer = _this.parent.getLayerConfig(),
+            visible = _this$parent$getLayer.visible;
+
+        if (zoom < 2 && visible) {
+          _this.parent.updateLayerConfig({
+            visible: false
+          });
+
+          _this.layerService.reRender();
+        } else if (zoom >= 2 && !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$tilesetManager = _this.tilesetManager) === null || _this$tilesetManager === void 0 ? void 0 : _this$tilesetManager.throttleUpdate(zoom, latLonBounds);
+    });
+
     _defineProperty(this, "viewchange", debounce(this.mapchange, 24));
 
     this.parent = parent;
@@ -46,7 +85,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
   _createClass(BaseTileLayer, [{
     key: "initTileSetManager",
     value: function initTileSetManager() {
-      var _this$tilesetManager;
+      var _this$tilesetManager2;
 
       var source = this.parent.getSource();
       this.tilesetManager = source.tileset;
@@ -56,47 +95,11 @@ var BaseTileLayer = /*#__PURE__*/function () {
         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 < 2 && visible) {
-          this.parent.updateLayerConfig({
-            visible: false
-          });
-          this.layerService.reRender();
-        } else if (zoom >= 2 && !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);
+      (_this$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 ? void 0 : _this$tilesetManager2.update(zoom, latLonBounds);
     }
   }, {
     key: "getCurrentView",
@@ -112,7 +115,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
   }, {
     key: "bindTilesetEvent",
     value: function bindTilesetEvent() {
-      var _this = this;
+      var _this2 = this;
 
       // 瓦片数据加载成功
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -121,25 +124,21 @@ var BaseTileLayer = /*#__PURE__*/function () {
 
       this.tilesetManager.on('tile-unload', function (tile) {
         // 将事件抛出，图层上可以监听使用
-        _this.tileUnLoad(tile);
+        _this2.tileUnLoad(tile);
       }); // 瓦片数据加载失败
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
       this.tilesetManager.on('tile-error', function (error, tile) {
         // 将事件抛出，图层上可以监听使用
-        _this.tileError(error);
+        _this2.tileError(error);
       }); // 瓦片显隐状态更新
 
       this.tilesetManager.on('tile-update', function () {
-        _this.tileUpdate();
+        _this2.tileUpdate();
       }); // 地图视野发生改变
 
-      this.mapService.on('zoomend', function () {
-        return _this.mapchange();
-      });
-      this.mapService.on('moveend', function () {
-        return _this.viewchange();
-      });
+      this.mapService.on('zoomend', this.mapchange);
+      this.mapService.on('moveend', this.viewchange);
     }
   }, {
     key: "render",
@@ -155,6 +154,11 @@ var BaseTileLayer = /*#__PURE__*/function () {
     key: "getTiles",
     value: function getTiles() {
       return this.tileLayerService.getTiles();
+    }
+  }, {
+    key: "getTile",
+    value: function getTile(key) {
+      return this.tileLayerService.getTile(key);
     } //  防抖操作
 
   }, {
@@ -172,6 +176,8 @@ var BaseTileLayer = /*#__PURE__*/function () {
     value: function destroy() {
       var _this$tilesetManager3;
 
+      this.mapService.off('zoomend', this.mapchange);
+      this.mapService.off('moveend', this.viewchange);
       (_this$tilesetManager3 = this.tilesetManager) === null || _this$tilesetManager3 === void 0 ? void 0 : _this$tilesetManager3.destroy();
       this.tileLayerService.destroy();
     }
@@ -184,7 +190,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
     key: "tileUpdate",
     value: function () {
       var _tileUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _this2 = this;
+        var _this3 = this;
 
         var minZoom, maxZoom;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -219,25 +225,25 @@ var BaseTileLayer = /*#__PURE__*/function () {
                       while (1) {
                         switch (_context.prev = _context.next) {
                           case 0:
-                            if (_this2.tileLayerService.hasTile(tile.key)) {
+                            if (_this3.tileLayerService.hasTile(tile.key)) {
                               _context.next = 9;
                               break;
                             }
 
-                            tileInstance = getTileFactory(_this2.parent);
-                            tileLayer = new tileInstance(tile, _this2.parent);
+                            tileInstance = getTileFactory(_this3.parent);
+                            tileLayer = new tileInstance(tile, _this3.parent);
                             _context.next = 5;
                             return tileLayer.initTileLayer();
 
                           case 5:
-                            _this2.tilePickService.setPickState();
+                            _this3.tilePickService.setPickState();
 
                             if (tileLayer.getLayers().length !== 0) {
-                              _this2.tileLayerService.addTile(tileLayer);
+                              _this3.tileLayerService.addTile(tileLayer);
 
-                              _this2.tileLayerService.updateTileVisible(tile);
+                              _this3.tileLayerService.updateTileVisible(tile);
 
-                              _this2.layerService.reRender();
+                              _this3.layerService.reRender();
                             }
 
                             _context.next = 12;
@@ -245,11 +251,11 @@ var BaseTileLayer = /*#__PURE__*/function () {
 
                           case 9:
                             // 已加载瓦片
-                            _this2.tileLayerService.updateTileVisible(tile);
+                            _this3.tileLayerService.updateTileVisible(tile);
 
-                            _this2.tilePickService.setPickState();
+                            _this3.tilePickService.setPickState();
 
-                            _this2.layerService.reRender();
+                            _this3.layerService.reRender();
 
                           case 12:
                           case "end":
@@ -313,7 +319,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
   }, {
     key: "proxy",
     value: function proxy(parent) {
-      var _this3 = this;
+      var _this4 = this;
 
       ProxyFuncs.forEach(function (func) {
         // @ts-ignore
@@ -326,14 +332,14 @@ var BaseTileLayer = /*#__PURE__*/function () {
 
           oldStyleFunc.apply(void 0, args);
 
-          _this3.getLayers().map(function (child) {
+          _this4.getLayers().map(function (child) {
             // @ts-ignore
             child[func].apply(child, args);
           }); // Tip: 目前在更新 RasterData 的 colorTexture 的时候需要额外优化
 
 
           if (func === 'style') {
-            _this3.getTiles().forEach(function (tile) {
+            _this4.getTiles().forEach(function (tile) {
               return tile.styleUpdate.apply(tile, args);
             });
           }

package/es/utils/stencil.d.ts

@@ -0,0 +1,7 @@
+import { IRenderOptions, IStencilOptions, MaskOperationType } from '@antv/l7-core';
+export declare function getStencil(mask: boolean, maskInside: boolean): Partial<IStencilOptions>;
+interface IStencilMaskOptions extends IRenderOptions {
+    maskOperation?: MaskOperationType;
+}
+export declare function getStencilMask(option: Partial<IStencilMaskOptions>): Partial<IStencilOptions>;
+export {};

package/es/utils/stencil.js

@@ -0,0 +1,50 @@
+import { gl, MaskOperation, StencilType } from '@antv/l7-core'; // 掩膜配置
+
+export function getStencil(mask, maskInside) {
+  return {
+    enable: mask,
+    mask: 0xff,
+    func: {
+      cmp: gl.EQUAL,
+      // gl.EQUAL,
+      ref: maskInside ? 1 : 0,
+      mask: 1
+    }
+  };
+}
+// 模版配置
+export function getStencilMask(option) {
+  if (option.maskOperation === MaskOperation.OR) {
+    return {
+      enable: true,
+      mask: 0xff,
+      func: {
+        cmp: gl.ALWAYS,
+        ref: 1,
+        mask: 0xff
+      },
+      opFront: {
+        fail: gl.KEEP,
+        zfail: gl.REPLACE,
+        zpass: gl.REPLACE
+      }
+    };
+  }
+
+  return {
+    enable: true,
+    mask: 0xff,
+    func: {
+      cmp: option.stencilType === StencilType.SINGLE // 单层
+      ? gl.ALWAYS : option.stencilIndex === 0 // 多层
+      ? gl.ALWAYS : gl.LESS,
+      ref: option.stencilType === StencilType.SINGLE ? 1 : option.stencilIndex === 0 ? 2 : 1,
+      mask: 0xff
+    },
+    opFront: {
+      fail: gl.KEEP,
+      zfail: gl.REPLACE,
+      zpass: gl.REPLACE
+    }
+  };
+}

package/es/wind/index.d.ts

@@ -1,10 +1,11 @@
+import { IRenderOptions } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import { IWindLayerStyleOptions } from '../core/interface';
 import { WindModelType } from './models';
 export default class WindLayer extends BaseLayer<IWindLayerStyleOptions> {
     type: string;
     buildModels(): Promise<void>;
-    renderModels(): this;
+    renderModels(options?: Partial<IRenderOptions>): this;
     protected getDefaultConfig(): {};
     getModelType(): WindModelType;
 }

package/es/wind/index.js

@@ -67,8 +67,10 @@ var WindLayer = /*#__PURE__*/function (_BaseLayer) {
   }, {
     key: "renderModels",
     value: function renderModels() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
       if (this.layerModel) {
-        this.layerModel.render(); // 独立的渲染流程
+        this.layerModel.render(options); // 独立的渲染流程
       }
 
       return this;

package/es/wind/models/wind.d.ts

@@ -1,4 +1,4 @@
-import { IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
+import { IModel, IModelUniform, IRenderOptions, ITexture2D } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 export default class WindModel extends BaseModel {
     protected texture: ITexture2D;
@@ -8,7 +8,7 @@ export default class WindModel extends BaseModel {
     private sizeScale;
     private frequency;
     private cacheZoom;
-    render(): void;
+    render(options: Partial<IRenderOptions>): void;
     getUninforms(): IModelUniform;
     initModels(): Promise<IModel[]>;
     getWindSize(): {