@antv/l7-layers 2.14.1 → 2.14.3

package/es/Geometry/models/billboard.js

@@ -14,7 +14,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 { AttributeType, gl } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 
 /* babel-plugin-inline-import '../shaders/billboard_frag.glsl' */
@@ -104,13 +103,13 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
     key: "initModels",
     value: function () {
       var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _ref3, _ref3$mask, mask, _ref3$maskInside, maskInside, drawCanvas, createTexture2D, model;
+        var _ref3, drawCanvas, createTexture2D, model;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _ref3 = this.layer.getLayerConfig(), _ref3$mask = _ref3.mask, mask = _ref3$mask === void 0 ? false : _ref3$mask, _ref3$maskInside = _ref3.maskInside, maskInside = _ref3$maskInside === void 0 ? true : _ref3$maskInside, drawCanvas = _ref3.drawCanvas;
+                _ref3 = this.layer.getLayerConfig(), drawCanvas = _ref3.drawCanvas;
                 createTexture2D = this.rendererService.createTexture2D;
                 this.texture = createTexture2D({
                   height: 0,
@@ -130,9 +129,7 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
                   primitive: gl.TRIANGLES,
                   depth: {
                     enable: true
-                  },
-                  blend: this.getBlend(),
-                  stencil: getMask(mask, maskInside)
+                  }
                 });
 
               case 6:

package/es/Geometry/models/plane.js

@@ -15,8 +15,7 @@ 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 { AttributeType, gl } from '@antv/l7-core';
-import { Version } from '@antv/l7-maps';
-import { getMask } from '@antv/l7-utils'; // import { mat4, vec3 } from 'gl-matrix';
+import { Version } from '@antv/l7-maps'; // import { mat4, vec3 } from 'gl-matrix';
 
 import BaseModel from "../../core/BaseModel";
 
@@ -179,13 +178,13 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
     key: "initModels",
     value: function () {
       var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _ref5, _ref5$mask, mask, _ref5$maskInside, maskInside, mapTexture, createTexture2D, model;
+        var _ref5, mapTexture, createTexture2D, model;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _ref5 = this.layer.getLayerConfig(), _ref5$mask = _ref5.mask, mask = _ref5$mask === void 0 ? false : _ref5$mask, _ref5$maskInside = _ref5.maskInside, maskInside = _ref5$maskInside === void 0 ? true : _ref5$maskInside, mapTexture = _ref5.mapTexture;
+                _ref5 = this.layer.getLayerConfig(), mapTexture = _ref5.mapTexture;
                 this.mapTexture = mapTexture;
                 createTexture2D = this.rendererService.createTexture2D;
                 this.texture = createTexture2D({
@@ -203,8 +202,6 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: true
                   },
-                  stencil: getMask(mask, maskInside),
-                  blend: this.getBlend(),
                   cull: {
                     enable: true,
                     face: gl.BACK // gl.FRONT | gl.BACK;

package/es/core/BaseLayer.d.ts

@@ -1,5 +1,5 @@
 import { AsyncSeriesBailHook, AsyncWaterfallHook, SyncBailHook, SyncHook } from '@antv/async-hook';
-import { BlendType, IActiveOption, IAnimateOption, IAttributeAndElements, ICameraService, ICoordinateSystemService, IDataState, IDebugService, IEncodeFeature, IFontService, IGlobalConfigService, IIconService, IInteractionService, ILayer, ILayerAttributesOption, ILayerConfig, ILayerModel, ILayerModelInitializationOptions, ILayerPickService, ILayerPlugin, ILayerService, ILegend, IMapService, IModel, IModelInitializationOptions, IMultiPassRenderer, IParseDataItem, IPass, IPickingService, IPostProcessingPass, IRendererService, IScale, IScaleOptions, IShaderModuleService, ISourceCFG, IStyleAttributeService, IStyleAttributeUpdateOptions, ITextureService, LayerEventType, LegendItems, StyleAttributeField, StyleAttributeOption, Triangulation } from '@antv/l7-core';
+import { BlendType, IActiveOption, IAnimateOption, IAttributeAndElements, ICameraService, ICoordinateSystemService, IDataState, IDebugService, IEncodeFeature, IFontService, IGlobalConfigService, IIconService, IInteractionService, ILayer, ILayerAttributesOption, ILayerConfig, ILayerModel, ILayerModelInitializationOptions, ILayerPickService, ILayerPlugin, ILayerService, ILegend, IMapService, IModel, IModelInitializationOptions, IMultiPassRenderer, IParseDataItem, IPass, IPickingService, IPostProcessingPass, IRendererService, IRenderOptions, IScale, IScaleOptions, IShaderModuleService, ISourceCFG, IStyleAttributeService, IStyleAttributeUpdateOptions, ITextureService, LayerEventType, LegendItems, StyleAttributeField, StyleAttributeOption, Triangulation } from '@antv/l7-core';
 import Source from '@antv/l7-source';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
@@ -102,6 +102,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     private animateStatus;
     private isDestroyed;
     constructor(config?: Partial<ILayerConfig & ChildLayerStyleOptions>);
+    addMask(layer: ILayer): void;
+    removeMask(layer: ILayer): void;
+    disableMask(): void;
+    enableMask(): void;
     addMaskLayer(maskLayer: ILayer): void;
     removeMaskLayer(maskLayer: ILayer): void;
     getAttribute(name: string): import("@antv/l7-core").IStyleAttribute | undefined;
@@ -142,7 +146,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
      * 渲染所有的图层
      */
     renderLayers(): void;
-    render(): ILayer;
+    render(options?: Partial<IRenderOptions>): ILayer;
     /**
      * renderMultiPass 专门用于渲染支持 multipass 的 layer
      */
@@ -209,7 +213,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     buildModels(): Promise<void>;
     rebuildModels(): Promise<void>;
     renderMulPass(multiPassRenderer: IMultiPassRenderer): Promise<void>;
-    renderModels(isPicking?: boolean): this;
+    renderModels(options?: Partial<IRenderOptions>): this;
     updateStyleAttribute(type: string, field: StyleAttributeField, values?: StyleAttributeOption, updateOptions?: Partial<IStyleAttributeUpdateOptions>): boolean;
     getLayerAttributeConfig(): Partial<ILayerAttributesOption>;
     getShaderPickStat(): boolean;

package/es/core/BaseLayer.js

@@ -173,10 +173,41 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
   }
 
   _createClass(BaseLayer, [{
+    key: "addMask",
+    value: function addMask(layer) {
+      this.masks.push(layer);
+      this.enableMask();
+    }
+  }, {
+    key: "removeMask",
+    value: function removeMask(layer) {
+      var layerIndex = this.masks.indexOf(layer);
+
+      if (layerIndex > -1) {
+        this.masks.splice(layerIndex, 1);
+      }
+    }
+  }, {
+    key: "disableMask",
+    value: function disableMask() {
+      this.updateLayerConfig({
+        enableMask: false
+      });
+    }
+  }, {
+    key: "enableMask",
+    value: function enableMask() {
+      this.updateLayerConfig({
+        enableMask: true
+      });
+    } // 将废弃
+
+  }, {
     key: "addMaskLayer",
     value: function addMaskLayer(maskLayer) {
       this.masks.push(maskLayer);
-    }
+    } // 将废弃
+
   }, {
     key: "removeMaskLayer",
     value: function removeMaskLayer(maskLayer) {
@@ -352,7 +383,8 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
 
               case 31:
                 this.log(IDebugLog.LayerInitEnd);
-                this.inited = true; // 触发初始化完成事件;
+                this.inited = true; // add mask layer
+                // 触发初始化完成事件;
 
                 this.emit('inited', {
                   target: this,
@@ -492,7 +524,7 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
     key: "filter",
     value: function filter(field, values, updateOptions) {
       var flag = this.updateStyleAttribute('filter', field, values, updateOptions);
-      this.dataState.dataSourceNeedUpdate = flag;
+      this.dataState.dataSourceNeedUpdate = flag && this.inited;
       return this;
     }
   }, {
@@ -503,7 +535,7 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
         values: values
       };
       var flag = this.updateStyleAttribute('shape', field, values, updateOptions);
-      this.dataState.dataSourceNeedUpdate = flag;
+      this.dataState.dataSourceNeedUpdate = flag && this.inited;
       return this;
     }
   }, {
@@ -649,6 +681,8 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
   }, {
     key: "render",
     value: function render() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
       if (this.tileLayer) {
         // 瓦片图层执行单独的 render 渲染队列
         this.tileLayer.render();
@@ -662,7 +696,7 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
       } // Tip: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
 
 
-      this.renderModels();
+      this.renderModels(options);
       return this;
     }
     /**
@@ -834,8 +868,8 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
     value: function setBlend(type) {
       this.updateLayerConfig({
         blend: type
-      });
-      this.layerModelNeedUpdate = true;
+      }); // this.layerModelNeedUpdate = true;
+
       this.reRender();
       return this;
     }
@@ -1020,12 +1054,18 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
       this.layerChildren.map(function (child) {
         return child.destroy(false);
       });
-      this.layerChildren = []; // remove mask list
+      this.layerChildren = []; // remove mask list maskfence 掩膜需要销毁
+
+      var _this$getLayerConfig10 = this.getLayerConfig(),
+          maskfence = _this$getLayerConfig10.maskfence;
+
+      if (maskfence) {
+        this.masks.map(function (mask) {
+          return mask.destroy(false);
+        });
+        this.masks = [];
+      }
 
-      this.masks.map(function (mask) {
-        return mask.destroy(false);
-      });
-      this.masks = [];
       this.hooks.beforeDestroy.call(); // 清除sources事件
 
       this.layerSource.off('update', this.sourceEvent);
@@ -1361,11 +1401,11 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
   }, {
     key: "needPick",
     value: function needPick(type) {
-      var _this$getLayerConfig10 = this.getLayerConfig(),
-          _this$getLayerConfig11 = _this$getLayerConfig10.enableHighlight,
-          enableHighlight = _this$getLayerConfig11 === void 0 ? true : _this$getLayerConfig11,
-          _this$getLayerConfig12 = _this$getLayerConfig10.enableSelect,
-          enableSelect = _this$getLayerConfig12 === void 0 ? true : _this$getLayerConfig12; // 判断layer是否监听事件;
+      var _this$getLayerConfig11 = this.getLayerConfig(),
+          _this$getLayerConfig12 = _this$getLayerConfig11.enableHighlight,
+          enableHighlight = _this$getLayerConfig12 === void 0 ? true : _this$getLayerConfig12,
+          _this$getLayerConfig13 = _this$getLayerConfig11.enableSelect,
+          enableSelect = _this$getLayerConfig13 === void 0 ? true : _this$getLayerConfig13; // 判断layer是否监听事件;
 
 
       var isPick = this.eventNames().indexOf(type) !== -1 || this.eventNames().indexOf('un' + type) !== -1;
@@ -1456,9 +1496,11 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
     }()
   }, {
     key: "renderModels",
-    value: function renderModels(isPicking) {
+    value: function renderModels() {
       var _this11 = this;
 
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
       // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
       if (this.encodeDataLength <= 0 && !this.forceRender) {
         return this;
@@ -1467,8 +1509,10 @@ var BaseLayer = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
       this.hooks.beforeRender.call();
       this.models.forEach(function (model) {
         model.draw({
-          uniforms: _this11.layerModel.getUninforms()
-        }, isPicking);
+          uniforms: _this11.layerModel.getUninforms(),
+          blend: _this11.layerModel.getBlend(),
+          stencil: _this11.layerModel.getStencil(options)
+        }, (options === null || options === void 0 ? void 0 : options.ispick) || false);
       });
       this.hooks.afterRender.call();
       return this;

package/es/core/BaseModel.d.ts

@@ -1,4 +1,4 @@
-import { IAnimateOption, IAttribute, IBlendOptions, ICameraService, IElements, IEncodeFeature, IFontService, IGlobalConfigService, IIconService, ILayer, ILayerModel, ILayerService, IMapService, IModel, IModelUniform, IPickingService, IRendererService, IShaderModuleService, IStyleAttributeService, ITexture2D, ITexture2DInitializationOptions, Triangulation } from '@antv/l7-core';
+import { IAnimateOption, IAttribute, IBlendOptions, ICameraService, IElements, IEncodeFeature, IFontService, IGlobalConfigService, IIconService, ILayer, ILayerModel, ILayerService, IMapService, IModel, IModelUniform, IPickingService, IRendererService, IRenderOptions, IShaderModuleService, IStencilOptions, IStyleAttributeService, ITexture2D, ITexture2DInitializationOptions, Triangulation } from '@antv/l7-core';
 export type styleSingle = number | string | [string, (single: any) => number] | [string, [number, number]];
 export type styleOffset = string | [number, number] | [string, (single: any) => number];
 export type styleColor = string | [string, (single: any) => string] | [string, [string, string]];
@@ -120,6 +120,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}> implements ILayerMod
      */
     calDataFrame(cellLength: number, encodeData: IEncodeFeature[], cellPropertiesLayouts: ICellProperty[]): IDataTextureFrame;
     getBlend(): IBlendOptions;
+    getStencil(option: Partial<IRenderOptions>): Partial<IStencilOptions>;
     getDefaultStyle(): unknown;
     getUninforms(): IModelUniform;
     getAnimateUniforms(): IModelUniform;
@@ -133,7 +134,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}> implements ILayerMod
         };
         elements: IElements;
     };
-    render(): void;
+    render(renderOptions?: Partial<IRenderOptions>): void;
     protected registerBuiltinAttributes(): void;
     protected animateOption2Array(option: IAnimateOption): number[];
     protected startModelAnimate(): void;

package/es/core/BaseModel.js

@@ -1,4 +1,5 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _initializerDefineProperty from "@babel/runtime/helpers/esm/initializerDefineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -17,11 +18,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { BlendType, gl, lazyInject, TYPES } from '@antv/l7-core';
+import { BlendType, gl, lazyInject, MaskOperation, StencilType, TYPES } from '@antv/l7-core';
 import { rgb2arr } from '@antv/l7-utils';
 import { color } from 'd3-color';
 import { isEqual, isNumber, isString } from 'lodash';
 import { BlendTypes } from "../utils/blend";
+import { getStencil as _getStencil, getStencilMask } from "../utils/stencil";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__PURE__*/function () {
   // style texture data mapping
@@ -412,6 +414,39 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
 
       return BlendTypes[BlendType[blend]];
     }
+  }, {
+    key: "getStencil",
+    value: function getStencil(option) {
+      var _this$layer$getLayerC3 = this.layer.getLayerConfig(),
+          _this$layer$getLayerC4 = _this$layer$getLayerC3.mask,
+          mask = _this$layer$getLayerC4 === void 0 ? false : _this$layer$getLayerC4,
+          _this$layer$getLayerC5 = _this$layer$getLayerC3.maskInside,
+          maskInside = _this$layer$getLayerC5 === void 0 ? true : _this$layer$getLayerC5,
+          enableMask = _this$layer$getLayerC3.enableMask,
+          _this$layer$getLayerC6 = _this$layer$getLayerC3.maskOperation,
+          maskOperation = _this$layer$getLayerC6 === void 0 ? MaskOperation.AND : _this$layer$getLayerC6; // TODO 临时处理，后期移除MaskLayer
+
+
+      if (this.layer.type === 'MaskLayer') {
+        return getStencilMask({
+          isStencil: true,
+          stencilType: StencilType.SINGLE
+        }); // 用于遮罩的stencil 参数
+      }
+
+      if (option.isStencil) {
+        return getStencilMask(_objectSpread(_objectSpread({}, option), {}, {
+          maskOperation: maskOperation
+        })); // 用于遮罩的stencil 参数
+      }
+
+      var maskflag = mask || //  mask 兼容历史写法
+      enableMask && this.layer.masks.length !== 0 || // 外部图层的mask
+      this.layer.tileMask !== undefined; // 瓦片图层
+      // !!(mask || enableMask || this.layer.tileMask);
+
+      return _getStencil(maskflag, maskInside);
+    }
   }, {
     key: "getDefaultStyle",
     value: function getDefaultStyle() {
@@ -512,10 +547,11 @@ var BaseModel = (_dec = lazyInject(TYPES.IGlobalConfigService), (_class = /*#__P
     key: "getAttribute",
     value: function getAttribute() {
       throw new Error('Method not implemented.');
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   }, {
     key: "render",
-    value: function render() {
+    value: function render(renderOptions) {
       throw new Error('Method not implemented.');
     }
   }, {

package/es/core/LayerPickService.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { TYPES } from '@antv/l7-core';
 import { lngLatInExtent } from '@antv/l7-utils';
 
@@ -17,6 +15,8 @@ var BaseLayerPickService = /*#__PURE__*/function () {
   _createClass(BaseLayerPickService, [{
     key: "pickRender",
     value: function pickRender(target) {
+      var container = this.layer.getContainer();
+      var layerService = container.get(TYPES.ILayerService);
       var layer = this.layer; // 瓦片图层的拾取绘制
 
       if (layer.tileLayer) {
@@ -24,34 +24,10 @@ var BaseLayerPickService = /*#__PURE__*/function () {
       }
 
       layer.hooks.beforePickingEncode.call();
-
-      if (layer.masks.length > 0) {
-        // 若存在 mask，则在 pick 阶段的绘制也启用
-        layer.masks.filter(function (mask) {
-          return mask.inited;
-        }).forEach( /*#__PURE__*/function () {
-          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(m) {
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    m.render();
-
-                  case 1:
-                  case "end":
-                    return _context.stop();
-                }
-              }
-            }, _callee);
-          }));
-
-          return function (_x) {
-            return _ref.apply(this, arguments);
-          };
-        }());
-      }
-
-      layer.renderModels(true);
+      layerService.renderTileLayerMask(layer);
+      layer.renderModels({
+        ispick: true
+      });
       layer.hooks.afterPickingEncode.call();
     }
   }, {

package/es/heatmap/index.d.ts

@@ -1,11 +1,11 @@
-import { IAttributeAndElements } from '@antv/l7-core';
+import { IAttributeAndElements, IRenderOptions } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import { IHeatMapLayerStyleOptions } from '../core/interface';
 import { HeatMapModelType } from './models';
 export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
     type: string;
     buildModels(): Promise<void>;
-    renderModels(): this;
+    renderModels(options?: Partial<IRenderOptions>): this;
     updateModelData(data: IAttributeAndElements): void;
     getModelType(): HeatMapModelType;
 }

package/es/heatmap/index.js

@@ -69,11 +69,12 @@ var HeatMapLayer = /*#__PURE__*/function (_BaseLayer) {
     value: function renderModels() {
       var _this2 = this;
 
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var shape = this.getModelType();
 
       if (shape === 'heatmap') {
         if (this.layerModel) {
-          this.layerModel.render(); // 独立的渲染流程
+          this.layerModel.render(options); // 独立的渲染流程
         }
 
         return this;
@@ -86,7 +87,9 @@ var HeatMapLayer = /*#__PURE__*/function (_BaseLayer) {
       this.hooks.beforeRender.call();
       this.models.forEach(function (model) {
         return model.draw({
-          uniforms: _this2.layerModel.getUninforms()
+          uniforms: _this2.layerModel.getUninforms(),
+          blend: _this2.layerModel.getBlend(),
+          stencil: _this2.layerModel.getStencil(options)
         });
       });
       this.hooks.afterRender.call();

package/es/heatmap/models/grid.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 { AttributeType, gl } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import { HeatmapGridTriangulation } from "../../core/triangulation";
 
@@ -75,14 +74,12 @@ var GridModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, model;
-
+        var model;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _ref2 = this.layer.getLayerConfig(), _ref2$mask = _ref2.mask, mask = _ref2$mask === void 0 ? false : _ref2$mask, _ref2$maskInside = _ref2.maskInside, maskInside = _ref2$maskInside === void 0 ? true : _ref2$maskInside;
-                _context2.next = 3;
+                _context2.next = 2;
                 return this.layer.buildLayerModel({
                   moduleName: 'heatmapGrid',
                   vertexShader: heatmapGridVert,
@@ -91,15 +88,14 @@ var GridModel = /*#__PURE__*/function (_BaseModel) {
                   primitive: gl.TRIANGLES,
                   depth: {
                     enable: false
-                  },
-                  stencil: getMask(mask, maskInside)
+                  }
                 });
 
-              case 3:
+              case 2:
                 model = _context2.sent;
                 return _context2.abrupt("return", [model]);
 
-              case 5:
+              case 4:
               case "end":
                 return _context2.stop();
             }

package/es/heatmap/models/grid3d.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 { AttributeType, gl } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import { PointExtrudeTriangulation } from "../../core/triangulation";
 
@@ -75,14 +74,12 @@ var Grid3DModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, model;
-
+        var model;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _ref2 = this.layer.getLayerConfig(), _ref2$mask = _ref2.mask, mask = _ref2$mask === void 0 ? false : _ref2$mask, _ref2$maskInside = _ref2.maskInside, maskInside = _ref2$maskInside === void 0 ? true : _ref2$maskInside;
-                _context2.next = 3;
+                _context2.next = 2;
                 return this.layer.buildLayerModel({
                   moduleName: 'heatmapGrid3d',
                   vertexShader: heatmapGrid3dVert,
@@ -91,16 +88,14 @@ var Grid3DModel = /*#__PURE__*/function (_BaseModel) {
                   primitive: gl.TRIANGLES,
                   depth: {
                     enable: true
-                  },
-                  blend: this.getBlend(),
-                  stencil: getMask(mask, maskInside)
+                  }
                 });
 
-              case 3:
+              case 2:
                 model = _context2.sent;
                 return _context2.abrupt("return", [model]);
 
-              case 5:
+              case 4:
               case "end":
                 return _context2.stop();
             }

package/es/heatmap/models/heatmap.d.ts

@@ -1,4 +1,4 @@
-import { IFramebuffer, IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
+import { IFramebuffer, IModel, IModelUniform, IRenderOptions, ITexture2D } from '@antv/l7-core';
 import 'reflect-metadata';
 import BaseModel from '../../core/BaseModel';
 export default class HeatMapModel extends BaseModel {
@@ -8,7 +8,7 @@ export default class HeatMapModel extends BaseModel {
     private intensityModel;
     private colorModel;
     private shapeType;
-    render(): void;
+    render(options: Partial<IRenderOptions>): void;
     getUninforms(): IModelUniform;
     initModels(): Promise<IModel[]>;
     buildModels(): Promise<IModel[]>;