@antv/l7-layers 2.10.6 → 2.10.7

package/lib/tile/utils.js

@@ -4,24 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getContainerSize = getContainerSize;
-exports.getLayerShape = getLayerShape;
-exports.getMaskValue = getMaskValue;
-exports.isTileChildLoaded = isTileChildLoaded;
 exports.isTileGroup = isTileGroup;
-exports.isTileLoaded = isTileLoaded;
-exports.isTileParentLoaded = isTileParentLoaded;
-exports.isVectorTile = isVectorTile;
-exports.registerLayers = registerLayers;
-exports.tileAllLoad = tileAllLoad;
 exports.tileVectorParser = void 0;
-exports.updateTileVisible = updateTileVisible;
-
-var _l7Core = require("@antv/l7-core");
 
 var _l7Utils = require("@antv/l7-utils");
 
-var _utils = require("./style/utils");
-
 var tileVectorParser = ['mvt', 'geojsonvt', 'testTile'];
 /**
  * 判断当前图层是否是瓦片图层
@@ -36,70 +23,6 @@ function isTileGroup(layer) {
   return tileVectorParser.includes(source.parser.type);
 }
 
-function isVectorTile(parserType) {
-  return tileVectorParser.indexOf(parserType) >= 0;
-}
-
-function registerLayers(parentLayer, layers) {
-  layers.map(function (layer) {
-    var container = (0, _l7Core.createLayerContainer)(parentLayer.sceneContainer);
-    layer.setContainer(container, parentLayer.sceneContainer);
-    layer.init();
-  });
-}
-
-function getLayerShape(layerType, layer) {
-  var _layerShape$scale;
-
-  var layerShape = layer.getAttribute('shape');
-
-  if (layerShape && (_layerShape$scale = layerShape.scale) !== null && _layerShape$scale !== void 0 && _layerShape$scale.field) {
-    var _layerShape$scale2;
-
-    if (((_layerShape$scale2 = layerShape.scale) === null || _layerShape$scale2 === void 0 ? void 0 : _layerShape$scale2.values) === 'text') {
-      return [layerShape.scale.field, layerShape.scale.values];
-    }
-
-    return layerShape.scale.field;
-  }
-
-  switch (layerType) {
-    case 'PolygonLayer':
-      return 'fill';
-
-    case 'LineLayer':
-      return 'tileline';
-
-    case 'PointLayer':
-      return 'circle';
-
-    case 'RasterLayer':
-      return 'image';
-
-    default:
-      return '';
-  }
-}
-
-function getMaskValue(layerType, mask) {
-  switch (layerType) {
-    case 'PolygonLayer':
-      return true;
-
-    case 'LineLayer':
-      return true;
-
-    case 'PointLayer':
-      return false;
-
-    case 'RasterLayer':
-      return mask;
-
-    default:
-      return mask;
-  }
-}
-
 function getContainerSize(container) {
   if (container.getContext) {
     return {
@@ -109,75 +32,4 @@ function getContainerSize(container) {
   } else {
     return container.getBoundingClientRect();
   }
-}
-
-function isTileLoaded(tile) {
-  return tile.layerIDList.length === tile.loadedLayers;
-}
-
-function isTileChildLoaded(tile) {
-  var children = tile.children;
-  return children.filter(function (child) {
-    return isTileLoaded(child);
-  }).length === children.length;
-}
-
-function isTileParentLoaded(tile) {
-  var parent = tile.parent;
-
-  if (!parent) {
-    return true;
-  } else {
-    return isTileLoaded(parent);
-  }
-}
-
-function tileAllLoad(tile, callback) {
-  var timer = window.setInterval(function () {
-    var tileLoaded = isTileLoaded(tile);
-    var tileChildLoaded = isTileChildLoaded(tile);
-    var tileParentLoaded = isTileParentLoaded(tile);
-
-    if (tileLoaded && tileChildLoaded && tileParentLoaded) {
-      callback();
-      window.clearInterval(timer);
-    }
-  }, 36);
-}
-
-function dispatchTileVisibleChange(tile, callback) {
-  if (tile.isVisible) {
-    callback();
-  } else {
-    tileAllLoad(tile, function () {
-      callback();
-    });
-  }
-}
-
-function updateImmediately(layers) {
-  var immediately = true;
-  layers.map(function (layer) {
-    if (layer.type !== 'PointLayer') {
-      immediately = false;
-    }
-  });
-  return immediately;
-}
-
-function updateTileVisible(tile, layers, layerService) {
-  if (layers.length === 0) {
-    return;
-  }
-
-  if (updateImmediately(layers)) {
-    (0, _utils.updateLayersConfig)(layers, 'visible', tile.isVisible);
-    layerService.reRender();
-    return;
-  }
-
-  dispatchTileVisibleChange(tile, function () {
-    (0, _utils.updateLayersConfig)(layers, 'visible', tile.isVisible);
-    layerService.reRender();
-  });
 }

package/lib/utils/dataMappingStyle.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleStyleColor = handleStyleColor;
-exports.handleStyleDataMapping = handleStyleDataMapping;
-exports.handleStyleFloat = handleStyleFloat;
+exports.colorStyleMapping = colorStyleMapping;
+exports.floatStyleMapping = floatStyleMapping;
+exports.styleDataMapping = styleDataMapping;
 
 var _lodash = require("lodash");
 
@@ -25,7 +25,7 @@ function registerStyleAttribute(fieldName, layer, field, values, updateOptions)
  */
 
 
-function handleStyleDataMapping(configToUpdate, layer) {
+function styleDataMapping(configToUpdate, layer) {
   // 瓦片图层不需要进行样式数据映射
   if (layer.tileLayer || layer.isTileLayer) {
     return;
@@ -33,37 +33,37 @@ function handleStyleDataMapping(configToUpdate, layer) {
 
   if (configToUpdate.opacity) {
     // 处理 style 中 opacity 属性的数据映射
-    handleStyleFloat('opacity', layer, configToUpdate.opacity);
+    floatStyleMapping('opacity', layer, configToUpdate.opacity);
   }
 
   if (configToUpdate.strokeWidth) {
     // 处理 style 中 strokeWidth 属性的数据映射
-    handleStyleFloat('strokeWidth', layer, configToUpdate.strokeWidth);
+    floatStyleMapping('strokeWidth', layer, configToUpdate.strokeWidth);
   }
 
   if (configToUpdate.strokeOpacity) {
     // 处理 style 中 strokeOpacity 属性的数据映射
-    handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
+    floatStyleMapping('strokeOpacity', layer, configToUpdate.strokeOpacity);
   }
 
   if (configToUpdate.stroke) {
     // 处理 style 中 stroke (strokeColor) 属性的数据映射
-    handleStyleColor('stroke', layer, configToUpdate.stroke);
+    colorStyleMapping('stroke', layer, configToUpdate.stroke);
   }
 
   if (configToUpdate.offsets) {
     // 处理 style 中 offsets 属性的数据映射
-    handleStyleOffsets('offsets', layer, configToUpdate.offsets);
+    offsetStyleMapping('offsets', layer, configToUpdate.offsets);
   }
 
   if (configToUpdate.textOffset) {
     // 处理 style 中 textOffset 属性的数据映射
-    handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
+    offsetStyleMapping('textOffset', layer, configToUpdate.textOffset);
   }
 
   if (configToUpdate.thetaOffset) {
     // 处理 style 中 thetaOffset 属性的数据映射
-    handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset);
+    floatStyleMapping('thetaOffset', layer, configToUpdate.thetaOffset);
   }
 }
 /**
@@ -71,15 +71,14 @@ function handleStyleDataMapping(configToUpdate, layer) {
  */
 
 
-function handleStyleFloat(fieldName, layer, styleFloat) {
+function floatStyleMapping(fieldName, layer, styleFloat) {
   if ((0, _lodash.isString)(styleFloat)) {
     // 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleFloat, function (value) {
       return value;
     });
-  } else if ((0, _lodash.isNumber)(styleFloat)) {
-    // 传入 number、默认值处理
-    registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
+  } else if ((0, _lodash.isNumber)(styleFloat)) {// 传入 number、默认值处理
+    // registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
   } else if (Array.isArray(styleFloat) && styleFloat.length === 2) {
     // 传入的 styleFloat 是长度为 2 的数组
     if ((0, _lodash.isString)(styleFloat[0]) && (0, _lodash.isFunction)(styleFloat[1])) {
@@ -105,7 +104,7 @@ function handleStyleFloat(fieldName, layer, styleFloat) {
  */
 
 
-function handleStyleOffsets(fieldName, layer, styleOffsets) {
+function offsetStyleMapping(fieldName, layer, styleOffsets) {
   if ((0, _lodash.isString)(styleOffsets)) {
     // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleOffsets, function (value) {
@@ -130,10 +129,9 @@ function handleStyleOffsets(fieldName, layer, styleOffsets) {
  */
 
 
-function handleStyleColor(fieldName, layer, styleColor) {
-  if ((0, _lodash.isString)(styleColor)) {
-    // 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
-    registerStyleAttribute(fieldName, layer, styleColor, undefined);
+function colorStyleMapping(fieldName, layer, styleColor) {
+  if ((0, _lodash.isString)(styleColor)) {// 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
+    // registerStyleAttribute(fieldName, layer, styleColor, undefined);
   } else if (Array.isArray(styleColor) && styleColor.length === 2) {
     // 传入的 styleColor 是长度为 2 的数组
     if ((0, _lodash.isString)(styleColor[0]) && (0, _lodash.isFunction)(styleColor[1])) {

package/lib/utils/layerData.js

@@ -103,7 +103,7 @@ function unProjectCoordinates(coordinates, mapService) {
   }
 }
 
-function applyAttributeMapping(attribute, record, minimumColor) {
+function applyAttributeMapping(attribute, record) {
   var _attribute$scale;
 
   if (!attribute.scale) {
@@ -123,15 +123,10 @@ function applyAttributeMapping(attribute, record, minimumColor) {
     }
   });
   var mappingResult = attribute.mapping ? attribute.mapping(params) : [];
-
-  if (attribute.name === 'color' && !(0, _l7Utils.isColor)(mappingResult[0])) {
-    return [minimumColor];
-  }
-
   return mappingResult;
 }
 
-function mapping(attributes, data, fontService, mapService, minimumColor, layer) {
+function mapping(attributes, data, fontService, mapService, layer) {
   var _ref2 = layer === null || layer === void 0 ? void 0 : layer.getLayerConfig(),
       _ref2$arrow = _ref2.arrow,
       arrow = _ref2$arrow === void 0 ? {
@@ -146,7 +141,7 @@ function mapping(attributes, data, fontService, mapService, minimumColor, layer)
     attributes.filter(function (attribute) {
       return attribute.scale !== undefined;
     }).forEach(function (attribute) {
-      var values = applyAttributeMapping(attribute, record, minimumColor);
+      var values = applyAttributeMapping(attribute, record);
       attribute.needRemapping = false; // TODO: 支持每个属性配置 postprocess
 
       if (attribute.name === 'color') {
@@ -181,11 +176,10 @@ function mapping(attributes, data, fontService, mapService, minimumColor, layer)
 
 function calculateData(layer, fontService, mapService, styleAttributeService, data, options) {
   var source = new _l7Source.default(data, options);
-  var bottomColor = layer.getBottomColor();
   var attributes = styleAttributeService.getLayerStyleAttributes() || [];
   var dataArray = source.data.dataArray;
   var filterData = dataArray;
-  var mappedEncodeData = mapping(attributes, filterData, fontService, mapService, bottomColor, layer);
+  var mappedEncodeData = mapping(attributes, filterData, fontService, mapService, layer);
   source.destroy();
   return mappedEncodeData;
 }

package/lib/wind/index.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -50,24 +54,32 @@ var WindLayer = /*#__PURE__*/function (_BaseLayer) {
 
   (0, _createClass2.default)(WindLayer, [{
     key: "buildModels",
-    value: function buildModels() {
-      var _this2 = this;
-
-      var modelType = this.getModelType();
-      this.layerModel = new _models.default[modelType](this);
-      this.layerModel.initModels(function (models) {
-        _this2.dispatchModelLoad(models);
-      });
-    }
-  }, {
-    key: "rebuildModels",
-    value: function rebuildModels() {
-      var _this3 = this;
+    value: function () {
+      var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var modelType;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                modelType = this.getModelType();
+                this.layerModel = new _models.default[modelType](this);
+                _context.next = 4;
+                return this.initLayerModels();
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function buildModels() {
+        return _buildModels.apply(this, arguments);
+      }
 
-      this.layerModel.buildModels(function (models) {
-        _this3.dispatchModelLoad(models);
-      });
-    }
+      return buildModels;
+    }()
   }, {
     key: "renderModels",
     value: function renderModels() {

package/lib/wind/models/wind.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -89,103 +93,99 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
     }
   }, {
     key: "initModels",
-    value: function initModels(callbackModel) {
-      var _source$data,
-          _source$data2,
-          _source$data2$images,
-          _this3 = this;
-
-      var _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;
-
-      var createTexture2D = this.rendererService.createTexture2D;
-      var source = this.layer.getSource();
-      this.texture = createTexture2D({
-        height: 0,
-        width: 0
-      });
-      this.cacheZoom = Math.floor(this.mapService.getZoom());
-      var glContext = this.rendererService.getGLContext();
-      this.imageCoords = (_source$data = source.data) === null || _source$data === void 0 ? void 0 : _source$data.dataArray[0].coordinates;
-      (_source$data2 = source.data) === null || _source$data2 === void 0 ? void 0 : (_source$data2$images = _source$data2.images) === null || _source$data2$images === void 0 ? void 0 : _source$data2$images.then(function (imageData) {
-        var _this3$texture;
-
-        _this3.sizeScale = sizeScale * _this3.getZoomScale();
-
-        var _this3$getWindSize = _this3.getWindSize(),
-            imageWidth = _this3$getWindSize.imageWidth,
-            imageHeight = _this3$getWindSize.imageHeight;
-
-        var options = {
-          glContext: glContext,
-          imageWidth: imageWidth,
-          imageHeight: imageHeight,
-          fadeOpacity: fadeOpacity,
-          speedFactor: speedFactor,
-          dropRate: dropRate,
-          dropRateBump: dropRateBump,
-          rampColors: rampColors
-        };
-        _this3.wind = new _windRender.Wind(options); // imageData[0] 风场图
-
-        _this3.wind.setWind({
-          uMin: uMin,
-          uMax: uMax,
-          vMin: vMin,
-          vMax: vMax,
-          image: imageData[0]
-        });
+    value: function () {
+      var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _source$data,
+            _source$data2,
+            _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;
+
+        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;
+                createTexture2D = this.rendererService.createTexture2D;
+                source = this.layer.getSource();
+                this.texture = createTexture2D({
+                  height: 0,
+                  width: 0
+                });
+                this.cacheZoom = Math.floor(this.mapService.getZoom());
+                glContext = this.rendererService.getGLContext();
+                this.imageCoords = (_source$data = source.data) === null || _source$data === void 0 ? void 0 : _source$data.dataArray[0].coordinates;
+                (_source$data2 = source.data) === null || _source$data2 === void 0 ? void 0 : (_source$data2$images = _source$data2.images) === null || _source$data2$images === void 0 ? void 0 : _source$data2$images.then(function (imageData) {
+                  var _this3$texture;
+
+                  _this3.sizeScale = sizeScale * _this3.getZoomScale();
+
+                  var _this3$getWindSize = _this3.getWindSize(),
+                      imageWidth = _this3$getWindSize.imageWidth,
+                      imageHeight = _this3$getWindSize.imageHeight;
+
+                  var options = {
+                    glContext: glContext,
+                    imageWidth: imageWidth,
+                    imageHeight: imageHeight,
+                    fadeOpacity: fadeOpacity,
+                    speedFactor: speedFactor,
+                    dropRate: dropRate,
+                    dropRateBump: dropRateBump,
+                    rampColors: rampColors
+                  };
+                  _this3.wind = new _windRender.Wind(options); // imageData[0] 风场图
+
+                  _this3.wind.setWind({
+                    uMin: uMin,
+                    uMax: uMax,
+                    vMin: vMin,
+                    vMax: vMax,
+                    image: imageData[0]
+                  });
+
+                  (_this3$texture = _this3.texture) === null || _this3$texture === void 0 ? void 0 : _this3$texture.destroy();
+                  _this3.texture = createTexture2D({
+                    width: imageWidth,
+                    height: imageHeight
+                  });
+
+                  _this3.layerService.reRender();
+                });
+                _context.next = 10;
+                return this.layer.buildLayerModel({
+                  moduleName: 'wind',
+                  vertexShader: WindVert,
+                  fragmentShader: WindFrag,
+                  triangulation: _triangulation.RasterImageTriangulation,
+                  primitive: _l7Core.gl.TRIANGLES,
+                  depth: {
+                    enable: false
+                  },
+                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
+                  blend: this.getBlend()
+                });
+
+              case 10:
+                model = _context.sent;
+                this.colorModel = model;
+                return _context.abrupt("return", [model]);
+
+              case 13:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
 
-        (_this3$texture = _this3.texture) === null || _this3$texture === void 0 ? void 0 : _this3$texture.destroy();
-        _this3.texture = createTexture2D({
-          width: imageWidth,
-          height: imageHeight
-        });
+      function initModels() {
+        return _initModels.apply(this, arguments);
+      }
 
-        _this3.layerService.reRender();
-      });
-      this.layer.buildLayerModel({
-        moduleName: 'wind',
-        vertexShader: WindVert,
-        fragmentShader: WindFrag,
-        triangulation: _triangulation.RasterImageTriangulation,
-        primitive: _l7Core.gl.TRIANGLES,
-        depth: {
-          enable: false
-        },
-        stencil: (0, _l7Utils.getMask)(mask, maskInside),
-        blend: this.getBlend()
-      }).then(function (model) {
-        _this3.colorModel = model;
-        callbackModel([model]);
-      }).catch(function (err) {
-        console.warn(err);
-        callbackModel([]);
-      });
-    }
+      return initModels;
+    }()
   }, {
     key: "getWindSize",
     value: function getWindSize() {
@@ -200,9 +200,32 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
     }
   }, {
     key: "buildModels",
-    value: function buildModels(callbackModel) {
-      this.initModels(callbackModel);
-    }
+    value: function () {
+      var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.initModels();
+
+              case 2:
+                return _context2.abrupt("return", _context2.sent);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function buildModels() {
+        return _buildModels.apply(this, arguments);
+      }
+
+      return buildModels;
+    }()
   }, {
     key: "clearModels",
     value: function clearModels() {
@@ -312,18 +335,16 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
       var _ref3 = this.layer.getLayerConfig(),
           opacity = _ref3.opacity;
 
-      this.layer.masks.map(function (m) {
-        m.hooks.beforeRenderData.call();
-        m.hooks.beforeRender.call();
-        m.render();
-        m.hooks.afterRender.call();
-      });
+      this.layerService.beforeRenderData(this.layer);
+      this.layer.hooks.beforeRender.call();
+      this.layerService.renderMask(this.layer.masks);
       (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 ? void 0 : _this$colorModel.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
           u_texture: this.texture
         }
       });
+      this.layer.hooks.afterRender.call();
     }
   }]);
   return WindModel;