@antv/l7-layers 2.14.1 → 2.14.2

package/lib/raster/models/rasterRgb.js

@@ -31,8 +31,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _l7Core = require("@antv/l7-core");
 
-var _l7Utils = require("@antv/l7-utils");
-
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 
 var _triangulation = require("../../core/triangulation");
@@ -48,7 +46,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var rasterVert = "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\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";
 
 /* babel-plugin-inline-import '../shaders/raster_rgb_frag.glsl' */
-var rasterFrag = "precision mediump float;\nuniform vec2 u_rminmax: vec2(0,255); \nuniform vec2 u_gminmax: vec2(0,255);\nuniform vec2 u_bminmax: vec2(0,255);\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nuniform float u_noDataValue : 0.0;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec3 rgb = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).rgb;\n  if(rgb == vec3(u_noDataValue)) {\n    gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n    gl_FragColor = vec4(rgb.r / (u_rminmax.y -u_rminmax.x), rgb.g /(u_gminmax.y -u_gminmax.x), rgb.b/ (u_bminmax.y - u_bminmax.x), u_opacity);\n  }\n \n}";
+var rasterFrag = "precision mediump float;\nuniform vec2 u_rminmax: vec2(0,255); \nuniform vec2 u_gminmax: vec2(0,255);\nuniform vec2 u_bminmax: vec2(0,255);\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nuniform float u_noDataValue : 0.0;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec3 rgb = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).rgb;\n  if(rgb == vec3(u_noDataValue)) {\n    gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n    gl_FragColor = vec4(rgb.r / (u_rminmax.y -u_rminmax.x), rgb.g /(u_gminmax.y -u_gminmax.x), rgb.b/ (u_bminmax.y - u_bminmax.x), u_opacity);\n  }\n  if(gl_FragColor.a < 0.01)\n    discard;\n \n}";
 
 var RasterModel = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(RasterModel, _BaseModel);
@@ -154,20 +152,19 @@ var RasterModel = /*#__PURE__*/function (_BaseModel) {
     key: "initModels",
     value: function () {
       var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, source, createTexture2D, parserDataItem, _yield$this$getRaster, data, width, height, model;
+        var source, createTexture2D, parserDataItem, _yield$this$getRaster, data, width, height, 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;
                 source = this.layer.getSource();
                 createTexture2D = this.rendererService.createTexture2D;
                 parserDataItem = source.data.dataArray[0];
-                _context2.next = 6;
+                _context2.next = 5;
                 return this.getRasterData(parserDataItem);
 
-              case 6:
+              case 5:
                 _yield$this$getRaster = _context2.sent;
                 data = _yield$this$getRaster.data;
                 width = _yield$this$getRaster.width;
@@ -180,7 +177,7 @@ var RasterModel = /*#__PURE__*/function (_BaseModel) {
                   format: _l7Core.gl.RGB,
                   type: _l7Core.gl.FLOAT
                 });
-                _context2.next = 13;
+                _context2.next = 12;
                 return this.layer.buildLayerModel({
                   moduleName: 'rasterImageDataRGBA',
                   vertexShader: rasterVert,
@@ -189,15 +186,14 @@ var RasterModel = /*#__PURE__*/function (_BaseModel) {
                   primitive: _l7Core.gl.TRIANGLES,
                   depth: {
                     enable: false
-                  },
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  }
                 });
 
-              case 13:
+              case 12:
                 model = _context2.sent;
                 return _context2.abrupt("return", [model]);
 
-              case 15:
+              case 14:
               case "end":
                 return _context2.stop();
             }

package/lib/raster/models/rasterTerrainRgb.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/raster_terrain_rgb_frag.glsl' */
-var Raster_terrainFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nvarying vec2 v_texCoord;\n\nuniform vec2 u_domain;\nuniform float u_noDataValue;\nuniform bool u_clampLow: true;\nuniform bool u_clampHigh: true;\n\nvoid main() {\n  vec4 baseColor = texture2D(u_texture, vec2(v_texCoord.x, v_texCoord.y)) * 256.0;\n  float r = baseColor.r * 256.0 * 256.0;\n  float g = baseColor.g * 256.0;\n  float b = baseColor.b;\n  float value =  (r + g + b) * 0.1 - 10000.0;\n  \n  if (value == u_noDataValue) {\n    gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {\n     gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n    float normalisedValue =(value - u_domain[0]) / (u_domain[1] - u_domain[0]);\n    vec4 color = texture2D(u_colorTexture, vec2(normalisedValue, 0));\n    gl_FragColor = color;\n    gl_FragColor.a =  gl_FragColor.a * u_opacity ;\n  }\n}\n";
+var Raster_terrainFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nvarying vec2 v_texCoord;\n\nuniform vec2 u_domain;\nuniform float u_noDataValue;\nuniform bool u_clampLow: true;\nuniform bool u_clampHigh: true;\n\nvoid main() {\n  vec4 baseColor = texture2D(u_texture, vec2(v_texCoord.x, v_texCoord.y)) * 256.0;\n  float r = baseColor.r * 256.0 * 256.0;\n  float g = baseColor.g * 256.0;\n  float b = baseColor.b;\n  float value =  (r + g + b) * 0.1 - 10000.0;\n  \n  if (value == u_noDataValue) {\n    gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {\n     gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n    float normalisedValue =(value - u_domain[0]) / (u_domain[1] - u_domain[0]);\n    vec4 color = texture2D(u_colorTexture, vec2(normalisedValue, 0));\n    gl_FragColor = color;\n    gl_FragColor.a =  gl_FragColor.a * u_opacity ;\n      if(gl_FragColor.a < 0.01)\n      discard;\n  }\n}\n";
 
 /* babel-plugin-inline-import '../shaders/rater_terrain_rgb_vert.glsl' */
 var Raster_terrainVert = "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";
@@ -87,26 +87,24 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
     key: "initModels",
     value: function () {
       var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside, source, createTexture2D, imageData, model;
-
+        var source, createTexture2D, 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;
-                _context.next = 5;
+                _context.next = 4;
                 return source.data.images;
 
-              case 5:
+              case 4:
                 imageData = _context.sent;
                 this.texture = createTexture2D({
                   data: imageData[0],
                   width: imageData[0].width,
                   height: imageData[0].height
                 });
-                _context.next = 9;
+                _context.next = 8;
                 return this.layer.buildLayerModel({
                   moduleName: 'RasterTileDataImage',
                   vertexShader: Raster_terrainVert,
@@ -115,16 +113,14 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
                   primitive: _l7Core.gl.TRIANGLES,
                   depth: {
                     enable: false
-                  },
-                  blend: this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                  }
                 });
 
-              case 9:
+              case 8:
                 model = _context.sent;
                 return _context.abrupt("return", [model]);
 
-              case 11:
+              case 10:
               case "end":
                 return _context.stop();
             }

package/lib/raster/shaders/raster_2d_frag.glsl

@@ -16,14 +16,17 @@ void main() {
 
   float value = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).r;
   if (value == u_noDataValue || isnan_emu(value))
-    gl_FragColor = vec4(0.0, 0, 0, 0.0);
+      discard;
   else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1]))
-    gl_FragColor = vec4(0, 0, 0, 0);
+     discard;
   else {
-   
     float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]);
     vec4 color = texture2D(u_colorTexture,vec2(normalisedValue, 0));
+    
     gl_FragColor = color;
     gl_FragColor.a =  gl_FragColor.a * u_opacity ;
+    if(gl_FragColor.a < 0.01)
+      discard;
+   
   }
 }

package/lib/raster/shaders/raster_frag.glsl

@@ -5,5 +5,7 @@ uniform float u_opacity: 1.0;
 void main() {
    gl_FragColor = v_color;
    gl_FragColor.a *= u_opacity;
+   if(gl_FragColor.a < 0.01)
+   discard;
 
 }

package/lib/raster/shaders/raster_rgb_frag.glsl

@@ -14,5 +14,7 @@ void main() {
   } else {
     gl_FragColor = vec4(rgb.r / (u_rminmax.y -u_rminmax.x), rgb.g /(u_gminmax.y -u_gminmax.x), rgb.b/ (u_bminmax.y - u_bminmax.x), u_opacity);
   }
+  if(gl_FragColor.a < 0.01)
+    discard;
  
 }

package/lib/raster/shaders/raster_terrain_rgb_frag.glsl

@@ -27,5 +27,7 @@ void main() {
     vec4 color = texture2D(u_colorTexture, vec2(normalisedValue, 0));
     gl_FragColor = color;
     gl_FragColor.a =  gl_FragColor.a * u_opacity ;
+      if(gl_FragColor.a < 0.01)
+      discard;
   }
 }

package/lib/tile/service/TileLayerService.js

@@ -145,20 +145,20 @@ var TileLayerService = /*#__PURE__*/function () {
       var _render = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var _this2 = this;
 
-        var layers;
+        var layers, renders;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 layers = this.getRenderLayers();
-                layers.map( /*#__PURE__*/function () {
+                renders = layers.map( /*#__PURE__*/function () {
                   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(layer) {
                     return _regenerator.default.wrap(function _callee$(_context) {
                       while (1) {
                         switch (_context.prev = _context.next) {
                           case 0:
                             _context.next = 2;
-                            return _this2.layerService.renderLayer(layer);
+                            return _this2.layerService.renderTileLayer(layer);
 
                           case 2:
                           case "end":
@@ -172,8 +172,9 @@ var TileLayerService = /*#__PURE__*/function () {
                     return _ref2.apply(this, arguments);
                   };
                 }());
+                Promise.all(renders);
 
-              case 2:
+              case 3:
               case "end":
                 return _context2.stop();
             }

package/lib/tile/style/constants.js

@@ -11,5 +11,5 @@ var ProxyFuncs = [
  * 1. 需要作用到所属子图层才会生效的方法
  * 2. 不需要主动重新创建 model 的方法
  */
-'shape', 'color', 'size', 'style', 'animate', 'filter', 'rotate', 'scale', 'setBlend', 'setSelect', 'setActive'];
+'shape', 'color', 'size', 'style', 'animate', 'filter', 'rotate', 'scale', 'setBlend', 'setSelect', 'setActive', 'disableMask', 'enableMask'];
 exports.ProxyFuncs = ProxyFuncs;

package/lib/tile/tileFactory/Tile.js

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _l7Core = require("@antv/l7-core");
 
+var _polygon = _interopRequireDefault(require("../../polygon"));
+
 var _util = require("./util");
 
 var Tile = /*#__PURE__*/function () {
@@ -31,6 +33,7 @@ var Tile = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "visible", true);
     (0, _defineProperty2.default)(this, "layers", []);
     (0, _defineProperty2.default)(this, "isLoaded", false);
+    (0, _defineProperty2.default)(this, "tileMaskLayers", []);
     this.parent = parent;
     this.sourceTile = sourceTile;
     this.x = sourceTile.x;
@@ -66,30 +69,80 @@ var Tile = /*#__PURE__*/function () {
   }, {
     key: "getLayerOptions",
     value: function getLayerOptions() {
+      var _options$maskLayers;
+
       var options = this.parent.getLayerConfig();
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, options), {}, {
         autoFit: false,
-        mask: (0, _util.isNeedMask)(this.parent.type) || options.mask
+        maskLayers: this.getMaskLayer(),
+        tileMask: (0, _util.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(layer, mask) {
-        var container;
+      var _addTileMask = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var mask, container, mainLayer;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
+                mask = new _polygon.default({
+                  visible: false,
+                  enablePicking: false
+                }).source({
+                  type: 'FeatureCollection',
+                  features: [this.sourceTile.bboxPolygon]
+                }, {
+                  parser: {
+                    type: 'geojson',
+                    featureId: 'id'
+                  }
+                }).shape('fill');
                 container = (0, _l7Core.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();
             }
@@ -97,6 +150,38 @@ var Tile = /*#__PURE__*/function () {
         }, _callee, this);
       }));
 
+      function addTileMask() {
+        return _addTileMask.apply(this, arguments);
+      }
+
+      return addTileMask;
+    }()
+  }, {
+    key: "addMask",
+    value: function () {
+      var _addMask = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(layer, mask) {
+        var container;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                container = (0, _l7Core.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);
       }
@@ -106,26 +191,26 @@ var Tile = /*#__PURE__*/function () {
   }, {
     key: "addLayer",
     value: function () {
-      var _addLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(layer) {
+      var _addLayer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(layer) {
         var container;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 // set flag
                 layer.isTileLayer = true;
                 container = (0, _l7Core.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) {
@@ -175,6 +260,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/lib/tile/tileFactory/VectorTile.js

@@ -23,8 +23,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _mask = _interopRequireDefault(require("../../mask"));
-
 var _Tile2 = _interopRequireDefault(require("./Tile"));
 
 var _util = require("./util");
@@ -75,18 +73,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);
@@ -105,44 +102,6 @@ var VectorTile = /*#__PURE__*/function (_Tile) {
       }
 
       return initTileLayer;
-    }() // Todo 校验数据有效性
-
-  }, {
-    key: "addTileMask",
-    value: function () {
-      var _addTileMask = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(layer) {
-        var mask;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                mask = new _mask.default({
-                  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/lib/tile/tileLayer/BaseLayer.js

@@ -171,6 +171,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);
     } //  防抖操作
 
   }, {

package/lib/utils/stencil.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStencil = getStencil;
+exports.getStencilMask = getStencilMask;
+
+var _l7Core = require("@antv/l7-core");
+
+// 掩膜配置
+function getStencil(mask, maskInside) {
+  return {
+    enable: mask,
+    mask: 0xff,
+    func: {
+      cmp: _l7Core.gl.EQUAL,
+      // gl.EQUAL,
+      ref: maskInside ? 1 : 0,
+      mask: 1
+    }
+  };
+}
+
+// 模版配置
+function getStencilMask(option) {
+  if (option.maskOperation === _l7Core.MaskOperation.OR) {
+    return {
+      enable: true,
+      mask: 0xff,
+      func: {
+        cmp: _l7Core.gl.ALWAYS,
+        ref: 1,
+        mask: 0xff
+      },
+      opFront: {
+        fail: _l7Core.gl.KEEP,
+        zfail: _l7Core.gl.REPLACE,
+        zpass: _l7Core.gl.REPLACE
+      }
+    };
+  }
+
+  return {
+    enable: true,
+    mask: 0xff,
+    func: {
+      cmp: option.stencilType === _l7Core.StencilType.SINGLE // 单层
+      ? _l7Core.gl.ALWAYS : option.stencilIndex === 0 // 多层
+      ? _l7Core.gl.ALWAYS : _l7Core.gl.LESS,
+      ref: option.stencilType === _l7Core.StencilType.SINGLE ? 1 : option.stencilIndex === 0 ? 2 : 1,
+      mask: 0xff
+    },
+    opFront: {
+      fail: _l7Core.gl.KEEP,
+      zfail: _l7Core.gl.REPLACE,
+      zpass: _l7Core.gl.REPLACE
+    }
+  };
+}

package/lib/wind/index.js

@@ -83,8 +83,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/lib/wind/models/wind.js

@@ -77,14 +77,14 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
 
   (0, _createClass2.default)(WindModel, [{
     key: "render",
-    value: function render() {
+    value: function render(options) {
       var _this2 = this;
 
-      // Tip: 控制风场的平均更新频率
+      this.drawColorMode(options); // Tip: 控制风场的平均更新频率
+
       this.frequency.run(function () {
         _this2.drawWind();
       });
-      this.drawColorMode();
     }
   }, {
     key: "getUninforms",
@@ -100,13 +100,13 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
             _source$data2$images,
             _this3 = this;
 
-        var _ref, _ref$uMin, uMin, _ref$uMax, uMax, _ref$vMin, vMin, _ref$vMax, vMax, _ref$fadeOpacity, fadeOpacity, _ref$speedFactor, speedFactor, _ref$dropRate, dropRate, _ref$dropRateBump, dropRateBump, _ref$rampColors, rampColors, _ref$sizeScale, sizeScale, _ref$mask, mask, _ref$maskInside, maskInside, createTexture2D, source, glContext, model;
+        var _ref, _ref$uMin, uMin, _ref$uMax, uMax, _ref$vMin, vMin, _ref$vMax, vMax, _ref$fadeOpacity, fadeOpacity, _ref$speedFactor, speedFactor, _ref$dropRate, dropRate, _ref$dropRateBump, dropRateBump, _ref$rampColors, rampColors, _ref$sizeScale, sizeScale, createTexture2D, source, glContext, model;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _ref = this.layer.getLayerConfig(), _ref$uMin = _ref.uMin, uMin = _ref$uMin === void 0 ? -21.32 : _ref$uMin, _ref$uMax = _ref.uMax, uMax = _ref$uMax === void 0 ? 26.8 : _ref$uMax, _ref$vMin = _ref.vMin, vMin = _ref$vMin === void 0 ? -21.57 : _ref$vMin, _ref$vMax = _ref.vMax, vMax = _ref$vMax === void 0 ? 21.42 : _ref$vMax, _ref$fadeOpacity = _ref.fadeOpacity, fadeOpacity = _ref$fadeOpacity === void 0 ? 0.996 : _ref$fadeOpacity, _ref$speedFactor = _ref.speedFactor, speedFactor = _ref$speedFactor === void 0 ? 0.25 : _ref$speedFactor, _ref$dropRate = _ref.dropRate, dropRate = _ref$dropRate === void 0 ? 0.003 : _ref$dropRate, _ref$dropRateBump = _ref.dropRateBump, dropRateBump = _ref$dropRateBump === void 0 ? 0.01 : _ref$dropRateBump, _ref$rampColors = _ref.rampColors, rampColors = _ref$rampColors === void 0 ? defaultRampColors : _ref$rampColors, _ref$sizeScale = _ref.sizeScale, sizeScale = _ref$sizeScale === void 0 ? 0.5 : _ref$sizeScale, _ref$mask = _ref.mask, mask = _ref$mask === void 0 ? false : _ref$mask, _ref$maskInside = _ref.maskInside, maskInside = _ref$maskInside === void 0 ? true : _ref$maskInside;
+                _ref = this.layer.getLayerConfig(), _ref$uMin = _ref.uMin, uMin = _ref$uMin === void 0 ? -21.32 : _ref$uMin, _ref$uMax = _ref.uMax, uMax = _ref$uMax === void 0 ? 26.8 : _ref$uMax, _ref$vMin = _ref.vMin, vMin = _ref$vMin === void 0 ? -21.57 : _ref$vMin, _ref$vMax = _ref.vMax, vMax = _ref$vMax === void 0 ? 21.42 : _ref$vMax, _ref$fadeOpacity = _ref.fadeOpacity, fadeOpacity = _ref$fadeOpacity === void 0 ? 0.996 : _ref$fadeOpacity, _ref$speedFactor = _ref.speedFactor, speedFactor = _ref$speedFactor === void 0 ? 0.25 : _ref$speedFactor, _ref$dropRate = _ref.dropRate, dropRate = _ref$dropRate === void 0 ? 0.003 : _ref$dropRate, _ref$dropRateBump = _ref.dropRateBump, dropRateBump = _ref$dropRateBump === void 0 ? 0.01 : _ref$dropRateBump, _ref$rampColors = _ref.rampColors, rampColors = _ref$rampColors === void 0 ? defaultRampColors : _ref$rampColors, _ref$sizeScale = _ref.sizeScale, sizeScale = _ref$sizeScale === void 0 ? 0.5 : _ref$sizeScale;
                 createTexture2D = this.rendererService.createTexture2D;
                 source = this.layer.getSource();
                 this.texture = createTexture2D({
@@ -162,9 +162,7 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
                   primitive: _l7Core.gl.TRIANGLES,
                   depth: {
                     enable: false
-                  },
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
-                  blend: this.getBlend()
+                  }
                 });
 
               case 10:
@@ -328,6 +326,8 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
     value: function drawColorMode() {
       var _this$colorModel;
 
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
       var _ref3 = this.layer.getLayerConfig(),
           opacity = _ref3.opacity;
 
@@ -338,7 +338,9 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
         uniforms: {
           u_opacity: opacity || 1.0,
           u_texture: this.texture
-        }
+        },
+        blend: this.getBlend(),
+        stencil: this.getStencil(options)
       });
       this.layer.hooks.afterRender.call();
     }