@antv/l7-layers 2.14.1 → 2.14.3

package/lib/heatmap/models/heatmap.js

@@ -76,7 +76,7 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
 
   (0, _createClass2.default)(HeatMapModel, [{
     key: "render",
-    value: function render() {
+    value: function render(options) {
       var _this = this;
 
       var _this$rendererService = this.rendererService,
@@ -97,7 +97,7 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
         this.updateColorTexture();
       }
 
-      this.shapeType === 'heatmap' ? this.drawColorMode() : this.draw3DHeatMap();
+      this.shapeType === 'heatmap' ? this.drawColorMode(options) : this.draw3DHeatMap(options);
     }
   }, {
     key: "getUninforms",
@@ -245,15 +245,6 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
                   cull: {
                     enable: true,
                     face: (0, _l7Utils.getCullFace)(this.mapService.version)
-                  },
-                  blend: {
-                    enable: true,
-                    func: {
-                      srcRGB: _l7Core.gl.ONE,
-                      srcAlpha: 1,
-                      dstRGB: _l7Core.gl.ONE,
-                      dstAlpha: 1
-                    }
                   }
                 });
 
@@ -278,12 +269,6 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
   }, {
     key: "buildHeatmapColor",
     value: function buildHeatmapColor() {
-      var _ref = this.layer.getLayerConfig(),
-          _ref$mask = _ref.mask,
-          mask = _ref$mask === void 0 ? false : _ref$mask,
-          _ref$maskInside = _ref.maskInside,
-          maskInside = _ref$maskInside === void 0 ? true : _ref$maskInside;
-
       this.shaderModuleService.registerModule('heatmapColor', {
         vs: heatmapColorVert,
         fs: heatmapColorFrag
@@ -322,13 +307,11 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
         depth: {
           enable: false
         },
-        blend: this.getBlend(),
         elements: createElements({
           data: [0, 2, 1, 2, 3, 1],
           type: _l7Core.gl.UNSIGNED_INT,
           count: 6
-        }),
-        stencil: (0, _l7Utils.getMask)(mask, maskInside)
+        })
       });
     }
   }, {
@@ -336,47 +319,69 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
     value: function drawIntensityMode() {
       var _this$intensityModel;
 
-      var _ref2 = this.layer.getLayerConfig(),
-          opacity = _ref2.opacity,
-          _ref2$intensity = _ref2.intensity,
-          intensity = _ref2$intensity === void 0 ? 10 : _ref2$intensity,
-          _ref2$radius = _ref2.radius,
-          radius = _ref2$radius === void 0 ? 5 : _ref2$radius;
+      var _ref = this.layer.getLayerConfig(),
+          opacity = _ref.opacity,
+          _ref$intensity = _ref.intensity,
+          intensity = _ref$intensity === void 0 ? 10 : _ref$intensity,
+          _ref$radius = _ref.radius,
+          radius = _ref$radius === void 0 ? 5 : _ref$radius;
 
       this.layerService.beforeRenderData(this.layer);
-      this.layer.hooks.beforeRender.call();
+      this.layer.hooks.beforeRender.call(); // 绘制密度图
+
       (_this$intensityModel = this.intensityModel) === null || _this$intensityModel === void 0 ? void 0 : _this$intensityModel.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
           u_radius: radius,
           u_intensity: intensity
+        },
+        blend: {
+          enable: true,
+          func: {
+            srcRGB: _l7Core.gl.ONE,
+            srcAlpha: 1,
+            dstRGB: _l7Core.gl.ONE,
+            dstAlpha: 1
+          }
+        },
+        stencil: {
+          enable: false,
+          mask: 0xff,
+          func: {
+            cmp: 514,
+            // gl.EQUAL,
+            ref: 1,
+            mask: 0xff
+          }
         }
       });
       this.layer.hooks.afterRender.call();
     }
   }, {
     key: "drawColorMode",
-    value: function drawColorMode() {
+    value: function drawColorMode(options) {
       var _this$colorModel;
 
-      var _ref3 = this.layer.getLayerConfig(),
-          opacity = _ref3.opacity;
+      var _ref2 = this.layer.getLayerConfig(),
+          opacity = _ref2.opacity;
 
       (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 ? void 0 : _this$colorModel.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
           u_colorTexture: this.colorTexture,
           u_texture: this.heatmapFramerBuffer
-        }
+        },
+        blend: this.getBlend(),
+        stencil: this.getStencil(options)
       });
     }
   }, {
     key: "draw3DHeatMap",
-    value: function draw3DHeatMap() {
+    value: function draw3DHeatMap(options) {
       var _this$colorModel2;
 
-      var _ref4 = this.layer.getLayerConfig(),
-          opacity = _ref4.opacity; // const invert = mat4.invert(
+      var _ref3 = this.layer.getLayerConfig(),
+          opacity = _ref3.opacity; // const invert = mat4.invert(
       //   mat4.create(),
       //   mat4.fromValues(
       //     // @ts-ignore
@@ -396,18 +401,22 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
           u_texture: this.heatmapFramerBuffer,
           u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
           u_InverseViewProjectionMatrix: (0, _toConsumableArray2.default)(invert)
-        }
+        },
+        blend: {
+          enable: true,
+          func: {
+            srcRGB: _l7Core.gl.SRC_ALPHA,
+            srcAlpha: 1,
+            dstRGB: _l7Core.gl.ONE_MINUS_SRC_ALPHA,
+            dstAlpha: 1
+          }
+        },
+        stencil: this.getStencil(options)
       });
     }
   }, {
     key: "build3dHeatMap",
     value: function build3dHeatMap() {
-      var _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;
-
       var getViewportSize = this.rendererService.getViewportSize;
 
       var _getViewportSize2 = getViewportSize(),
@@ -467,8 +476,7 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
           data: triangulation.indices,
           type: _l7Core.gl.UNSIGNED_INT,
           count: triangulation.indices.length
-        }),
-        stencil: (0, _l7Utils.getMask)(mask, maskInside)
+        })
       });
     }
   }, {
@@ -485,8 +493,8 @@ var HeatMapModel = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE
         this.texture.destroy();
       }
 
-      var _ref6 = this.layer.getLayerConfig(),
-          rampColors = _ref6.rampColors;
+      var _ref4 = this.layer.getLayerConfig(),
+          rampColors = _ref4.rampColors;
 
       var imageData = (0, _l7Utils.generateColorRamp)(rampColors);
       this.colorTexture = createTexture2D({

package/lib/heatmap/models/hexagon.js

@@ -23,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _l7Core = require("@antv/l7-core");
 
-var _l7Utils = require("@antv/l7-utils");
-
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 
 var _triangulation = require("../../core/triangulation");
@@ -92,14 +90,12 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, model;
-
+        var model;
         return _regenerator.default.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: 'heatmapHexagon',
                   vertexShader: heatmapGridVert,
@@ -108,16 +104,14 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: false
                   },
-                  primitive: _l7Core.gl.TRIANGLES,
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  primitive: _l7Core.gl.TRIANGLES
                 });
 
-              case 3:
+              case 2:
                 model = _context2.sent;
                 return _context2.abrupt("return", [model]);
 
-              case 5:
+              case 4:
               case "end":
                 return _context2.stop();
             }

package/lib/image/models/image.js

@@ -34,7 +34,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; } }
 
 /* babel-plugin-inline-import '../shaders/image_frag.glsl' */
-var ImageFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nvoid main() {\n  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));\n  gl_FragColor = color;\n  gl_FragColor.a *= u_opacity;\n}\n";
+var ImageFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nvoid main() {\n  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));\n  gl_FragColor = color;\n  gl_FragColor.a *= u_opacity;\n  if(gl_FragColor.a < 0.01)\n    discard;\n}\n";
 
 /* babel-plugin-inline-import '../shaders/image_vert.glsl' */
 var ImageVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n#pragma include \"projection\"\nvoid main() {\n   v_texCoord = a_Uv;\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   }\n}\n";
@@ -66,13 +66,11 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
       var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var _this = this;
 
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, source, createTexture2D, canvas, img, imageData, model;
-
+        var source, createTexture2D, canvas, img, imageData, model;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.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;
                 source = this.layer.getSource();
                 createTexture2D = this.rendererService.createTexture2D;
                 this.texture = createTexture2D({
@@ -81,7 +79,7 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
                 });
 
                 if (!_l7Utils.isMini) {
-                  _context.next = 12;
+                  _context.next = 11;
                   break;
                 }
 
@@ -101,14 +99,14 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
                   _this.layerService.reRender();
                 };
 
-                _context.next = 16;
+                _context.next = 15;
                 break;
 
-              case 12:
-                _context.next = 14;
+              case 11:
+                _context.next = 13;
                 return source.data.images;
 
-              case 14:
+              case 13:
                 imageData = _context.sent;
                 this.texture = createTexture2D({
                   data: imageData[0],
@@ -118,8 +116,8 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
                   min: _l7Core.gl.LINEAR
                 });
 
-              case 16:
-                _context.next = 18;
+              case 15:
+                _context.next = 17;
                 return this.layer.buildLayerModel({
                   moduleName: 'rasterImage',
                   vertexShader: ImageVert,
@@ -132,15 +130,14 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
                   },
                   depth: {
                     enable: false
-                  },
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  }
                 });
 
-              case 18:
+              case 17:
                 model = _context.sent;
                 return _context.abrupt("return", [model]);
 
-              case 20:
+              case 19:
               case "end":
                 return _context.stop();
             }

package/lib/image/shaders/image_frag.glsl

@@ -6,4 +6,6 @@ void main() {
   vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));
   gl_FragColor = color;
   gl_FragColor.a *= u_opacity;
+  if(gl_FragColor.a < 0.01)
+    discard;
 }

package/lib/index.js

@@ -153,6 +153,8 @@ var _FeatureScalePlugin = _interopRequireDefault(require("./plugins/FeatureScale
 
 var _LayerAnimateStylePlugin = _interopRequireDefault(require("./plugins/LayerAnimateStylePlugin"));
 
+var _LayerMaskPlugin = _interopRequireDefault(require("./plugins/LayerMaskPlugin"));
+
 var _LayerModelPlugin = _interopRequireDefault(require("./plugins/LayerModelPlugin"));
 
 var _LayerStylePlugin = _interopRequireDefault(require("./plugins/LayerStylePlugin"));
@@ -225,6 +227,12 @@ _l7Core.container.bind(_l7Core.TYPES.ILayerPlugin).to(_DataMappingPlugin.default
 
 
 _l7Core.container.bind(_l7Core.TYPES.ILayerPlugin).to(_LayerStylePlugin.default).inRequestScope();
+/**
+ * 初始化地图 Mask
+ */
+
+
+_l7Core.container.bind(_l7Core.TYPES.ILayerPlugin).to(_LayerMaskPlugin.default).inRequestScope();
 /**
  * 负责属性更新
  */

package/lib/line/models/arc.js

@@ -288,13 +288,13 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref4, _ref4$segmentNumber, segmentNumber, _ref4$mask, mask, _ref4$maskInside, maskInside, _this$getShaders, frag, vert, type, model;
+        var _ref4, _ref4$segmentNumber, segmentNumber, _this$getShaders, frag, vert, type, model;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber, _ref4$mask = _ref4.mask, mask = _ref4$mask === void 0 ? false : _ref4$mask, _ref4$maskInside = _ref4.maskInside, maskInside = _ref4$maskInside === void 0 ? true : _ref4$maskInside;
+                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber;
                 _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type; //
 
                 _context2.next = 4;
@@ -306,9 +306,7 @@ var ArcModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: false
                   },
-                  blend: this.getBlend(),
-                  segmentNumber: segmentNumber,
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  segmentNumber: segmentNumber
                 });
 
               case 4:

package/lib/line/models/arc_3d.js

@@ -271,13 +271,13 @@ var Arc3DModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref4, _ref4$segmentNumber, segmentNumber, _ref4$mask, mask, _ref4$maskInside, maskInside, _this$getShaders, frag, vert, type, model;
+        var _ref4, _ref4$segmentNumber, segmentNumber, _this$getShaders, frag, vert, type, model;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber, _ref4$mask = _ref4.mask, mask = _ref4$mask === void 0 ? false : _ref4$mask, _ref4$maskInside = _ref4.maskInside, maskInside = _ref4$maskInside === void 0 ? true : _ref4$maskInside;
+                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber;
                 _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type;
                 _context2.next = 4;
                 return this.layer.buildLayerModel({
@@ -285,9 +285,7 @@ var Arc3DModel = /*#__PURE__*/function (_BaseModel) {
                   vertexShader: vert,
                   fragmentShader: frag,
                   triangulation: _triangulation.LineArcTriangulation,
-                  blend: this.getBlend(),
-                  segmentNumber: segmentNumber,
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  segmentNumber: segmentNumber
                 });
 
               case 4:

package/lib/line/models/earthArc_3d.js

@@ -271,13 +271,13 @@ var Arc3DModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref4, _ref4$segmentNumber, segmentNumber, _ref4$mask, mask, _ref4$maskInside, maskInside, _this$getShaders, frag, vert, type, model;
+        var _ref4, _ref4$segmentNumber, segmentNumber, _this$getShaders, frag, vert, type, model;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber, _ref4$mask = _ref4.mask, mask = _ref4$mask === void 0 ? false : _ref4$mask, _ref4$maskInside = _ref4.maskInside, maskInside = _ref4$maskInside === void 0 ? true : _ref4$maskInside;
+                _ref4 = this.layer.getLayerConfig(), _ref4$segmentNumber = _ref4.segmentNumber, segmentNumber = _ref4$segmentNumber === void 0 ? 30 : _ref4$segmentNumber;
                 _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type;
                 _context2.next = 4;
                 return this.layer.buildLayerModel({
@@ -288,9 +288,7 @@ var Arc3DModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: true
                   },
-                  blend: this.getBlend(),
-                  segmentNumber: segmentNumber,
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  segmentNumber: segmentNumber
                 });
 
               case 4:

package/lib/line/models/great_circle.js

@@ -234,14 +234,12 @@ var GreatCircleModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref3, _ref3$mask, mask, _ref3$maskInside, maskInside, model;
-
+        var model;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.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;
-                _context2.next = 3;
+                _context2.next = 2;
                 return this.layer.buildLayerModel({
                   moduleName: 'lineGreatCircle',
                   vertexShader: line_arc2d_vert,
@@ -249,16 +247,14 @@ var GreatCircleModel = /*#__PURE__*/function (_BaseModel) {
                   triangulation: _triangulation.LineArcTriangulation,
                   depth: {
                     enable: false
-                  },
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  }
                 });
 
-              case 3:
+              case 2:
                 model = _context2.sent;
                 return _context2.abrupt("return", [model]);
 
-              case 5:
+              case 4:
               case "end":
                 return _context2.stop();
             }
@@ -330,12 +326,12 @@ var GreatCircleModel = /*#__PURE__*/function (_BaseModel) {
 
             var texture = feature.texture; // console.log('icon feature', feature)
 
-            var _ref4 = iconMap[texture] || {
+            var _ref3 = iconMap[texture] || {
               x: 0,
               y: 0
             },
-                x = _ref4.x,
-                y = _ref4.y;
+                x = _ref3.x,
+                y = _ref3.y;
 
             return [x, y];
           }

package/lib/line/models/half.js

@@ -162,13 +162,13 @@ var LineModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, _ref2$depth, depth, _this$getShaders, frag, vert, model;
+        var _ref2, _ref2$depth, depth, _this$getShaders, frag, vert, model;
 
         return _regenerator.default.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, _ref2$depth = _ref2.depth, depth = _ref2$depth === void 0 ? false : _ref2$depth;
+                _ref2 = this.layer.getLayerConfig(), _ref2$depth = _ref2.depth, depth = _ref2$depth === void 0 ? false : _ref2$depth;
                 _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert;
                 this.layer.triangulation = _triangulation.LineTriangulation;
                 _context2.next = 5;
@@ -179,9 +179,7 @@ var LineModel = /*#__PURE__*/function (_BaseModel) {
                   triangulation: _triangulation.LineTriangulation,
                   depth: {
                     enable: depth
-                  },
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  }
                 });
 
               case 5:

package/lib/line/models/line.js

@@ -293,13 +293,13 @@ var LineModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref3, _ref3$mask, mask, _ref3$maskInside, maskInside, _ref3$depth, depth, _ref3$workerEnabled, workerEnabled, enablePicking, _this$getShaders, frag, vert, type, model;
+        var _ref3, _ref3$depth, depth, _ref3$workerEnabled, workerEnabled, enablePicking, _this$getShaders, frag, vert, type, model;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.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, _ref3$depth = _ref3.depth, depth = _ref3$depth === void 0 ? false : _ref3$depth, _ref3$workerEnabled = _ref3.workerEnabled, workerEnabled = _ref3$workerEnabled === void 0 ? false : _ref3$workerEnabled, enablePicking = _ref3.enablePicking;
+                _ref3 = this.layer.getLayerConfig(), _ref3$depth = _ref3.depth, depth = _ref3$depth === void 0 ? false : _ref3$depth, _ref3$workerEnabled = _ref3.workerEnabled, workerEnabled = _ref3$workerEnabled === void 0 ? false : _ref3$workerEnabled, enablePicking = _ref3.enablePicking;
                 _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type; // console.log(frag)
 
                 this.layer.triangulation = _l7Utils.LineTriangulation;
@@ -312,8 +312,6 @@ var LineModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: depth
                   },
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
                   workerEnabled: workerEnabled,
                   workerOptions: {
                     modelType: 'line' + type,

package/lib/line/models/linearline.js

@@ -191,13 +191,13 @@ var LinearLineModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref3, _ref3$mask, mask, _ref3$maskInside, maskInside, _ref3$depth, depth, model;
+        var _ref3, _ref3$depth, depth, model;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.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, _ref3$depth = _ref3.depth, depth = _ref3$depth === void 0 ? false : _ref3$depth;
+                _ref3 = this.layer.getLayerConfig(), _ref3$depth = _ref3.depth, depth = _ref3$depth === void 0 ? false : _ref3$depth;
                 this.layer.triangulation = _triangulation.LineTriangulation;
                 _context2.next = 4;
                 return this.layer.buildLayerModel({
@@ -207,9 +207,7 @@ var LinearLineModel = /*#__PURE__*/function (_BaseModel) {
                   triangulation: _triangulation.LineTriangulation,
                   depth: {
                     enable: depth
-                  },
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  }
                 });
 
               case 4:

package/lib/line/models/simpleLine.js

@@ -179,15 +179,14 @@ var SimpleLineModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref3, _ref3$mask, mask, _ref3$maskInside, maskInside, _this$getShaders, frag, vert, type, model;
+        var _this$getShaders, frag, vert, type, model;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.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;
                 _this$getShaders = this.getShaders(), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type;
-                _context2.next = 4;
+                _context2.next = 3;
                 return this.layer.buildLayerModel({
                   moduleName: type,
                   vertexShader: vert,
@@ -197,16 +196,14 @@ var SimpleLineModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: false
                   },
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
                   pick: false
                 });
 
-              case 4:
+              case 3:
                 model = _context2.sent;
                 return _context2.abrupt("return", [model]);
 
-              case 6:
+              case 5:
               case "end":
                 return _context2.stop();
             }

package/lib/mask/models/fill.js

@@ -21,8 +21,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _l7Core = require("@antv/l7-core");
-
 var _l7Utils = require("@antv/l7-utils");
 
 var _lodash = require("lodash");
@@ -56,7 +54,7 @@ var MaskModel = /*#__PURE__*/function (_BaseModel) {
     value: function getUninforms() {
       var _ref = this.layer.getLayerConfig(),
           _ref$opacity = _ref.opacity,
-          opacity = _ref$opacity === void 0 ? 0 : _ref$opacity,
+          opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
           _ref$color = _ref.color,
           color = _ref$color === void 0 ? '#000' : _ref$color;
 
@@ -107,21 +105,6 @@ var MaskModel = /*#__PURE__*/function (_BaseModel) {
                   depth: {
                     enable: false
                   },
-                  blend: this.getBlend(),
-                  stencil: {
-                    enable: true,
-                    mask: 0xff,
-                    func: {
-                      cmp: _l7Core.gl.ALWAYS,
-                      ref: 1,
-                      mask: 0xff
-                    },
-                    opFront: {
-                      fail: _l7Core.gl.REPLACE,
-                      zfail: _l7Core.gl.REPLACE,
-                      zpass: _l7Core.gl.REPLACE
-                    }
-                  },
                   pick: false
                 });