@antv/l7-layers 2.9.36 → 2.9.37

package/lib/tile/interaction/utils.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clearPickState = clearPickState;
+exports.selectFeature = selectFeature;
+exports.setFeatureActive = setFeatureActive;
+exports.setFeatureSelect = setFeatureSelect;
+exports.setHighlight = setHighlight;
+exports.setPickState = setPickState;
+exports.setSelect = setSelect;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _l7Utils = require("@antv/l7-utils");
+
+function clearPickState(layers) {
+  layers.filter(function (layer) {
+    return layer.inited && layer.isVisible();
+  }).filter(function (layer) {
+    return layer.getCurrentSelectedId() !== null;
+  }).map(function (layer) {
+    selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
+    layer.setCurrentSelectedId(null);
+  });
+}
+
+function setSelect(layers, pickedColors, renderList) {
+  var selectedId = (0, _l7Utils.decodePickingColor)(pickedColors);
+  var pickColor;
+  layers.map(function (layer) {
+    if (layer.getCurrentSelectedId() === null || selectedId !== layer.getCurrentSelectedId()) {
+      selectFeature(layer, pickedColors);
+      layer.setCurrentSelectedId(selectedId);
+      pickColor = pickedColors;
+    } else {
+      selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
+
+      layer.setCurrentSelectedId(null);
+      pickColor = null;
+    }
+  }); // unselect normal layer
+
+  renderList.filter(function (layer) {
+    return layer.inited && !layer.isVector && layer.isVisible() && layer.needPick('click');
+  }).filter(function (layer) {
+    return layer.getCurrentSelectedId() !== null;
+  }).map(function (layer) {
+    selectFeature(layer, new Uint8Array([0, 0, 0, 0]));
+    layer.setCurrentSelectedId(null);
+  });
+  return pickColor;
+}
+
+function setHighlight(layers, pickedColors) {
+  var pickId = (0, _l7Utils.decodePickingColor)(pickedColors);
+  layers.filter(function (layer) {
+    return layer.inited && layer.isVisible() && layer.isVector;
+  }) // Tip: 使用 vectorLayer 上的 pickID 优化高亮操作（过滤重复操作）
+  // @ts-ignore
+  .filter(function (layer) {
+    return layer.getPickID() !== pickId;
+  }).map(function (layer) {
+    // @ts-ignore
+    layer.setPickID(pickId);
+    layer.hooks.beforeHighlight.call(pickedColors);
+  });
+}
+
+function setPickState(layers, pickColors) {
+  if (pickColors.select) {
+    layers.map(function (layer) {
+      // if(layer.modelLoaded) {
+      //   selectFeature(layer, this.pickColors.select);
+      // } else {
+      //   layer.once('modelLoaded', () => {
+      //     selectFeature(layer, this.pickColors.select);
+      //   })
+      // }
+      selectFeature(layer, pickColors.select);
+    });
+  }
+
+  if (pickColors.active) {
+    layers.filter(function (layer) {
+      return layer.inited && layer.isVisible();
+    }).map(function (layer) {
+      layer.hooks.beforeHighlight.call(pickColors.active);
+    });
+  }
+}
+
+function selectFeature(layer, pickedColors) {
+  // @ts-ignore
+  var _pickedColors = (0, _slicedToArray2.default)(pickedColors, 3),
+      r = _pickedColors[0],
+      g = _pickedColors[1],
+      b = _pickedColors[2];
+
+  layer.hooks.beforeSelect.call([r, g, b]);
+}
+
+function setFeatureSelect(color, layers) {
+  var id = (0, _l7Utils.decodePickingColor)(color);
+  layers.map(function (layer) {
+    selectFeature(layer, color);
+    layer.setCurrentSelectedId(id);
+  });
+}
+
+function setFeatureActive(color, layers) {
+  var id = (0, _l7Utils.decodePickingColor)(color);
+  layers.map(function (layer) {
+    layer.hooks.beforeHighlight.call(color);
+    layer.setCurrentPickId(id);
+  });
+}

package/lib/tile/manager/{baseTileManager.js → base.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TileManager = void 0;
+exports.Base = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -13,17 +13,57 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _tileFactory = require("../tileFactory");
 
-var TileManager = /*#__PURE__*/function () {
-  function TileManager() {
-    (0, _classCallCheck2.default)(this, TileManager);
+var _utils = require("../utils");
+
+var Base = /*#__PURE__*/function () {
+  function Base() {
+    (0, _classCallCheck2.default)(this, Base);
+    (0, _defineProperty2.default)(this, "tileCache", new Map());
   }
 
-  (0, _createClass2.default)(TileManager, [{
-    key: "createTile",
-    value: function createTile(tile) {
-      return this.tileFactory.createTile(tile, this.initOptions);
+  (0, _createClass2.default)(Base, [{
+    key: "hasTile",
+    value: function hasTile(tile) {
+      return !!this.tileCache.has(tile.key);
+    }
+  }, {
+    key: "addTile",
+    value: function addTile(tile) {
+      var _tile$layerIDList;
+
+      // oldTile 存在的时候暂时直接结束
+      // TODO：合并不存在的时候
+      if (this.hasTile(tile)) return {
+        layers: [],
+        layerIDList: []
+      }; // 存储当前 tile
+
+      this.tileCache.set(tile.key, tile); // 创建 tile 对应的 layers
+
+      var layerCollections = this.tileFactory.createTile(tile, this.initOptions); // regist layer 将创建出来的 layer 进行注册初始化操作
+
+      (0, _utils.registerLayers)(this.parent, layerCollections.layers);
+
+      (_tile$layerIDList = tile.layerIDList).push.apply(_tile$layerIDList, (0, _toConsumableArray2.default)(layerCollections.layerIDList)); // add layer into layerGroup
+
+
+      this.addChildren(layerCollections.layers);
+      layerCollections.layers.map(function (layer) {
+        layer.once('modelLoaded', function () {
+          tile.layerLoad();
+        });
+      });
+      return layerCollections;
+    }
+  }, {
+    key: "removeTile",
+    value: function removeTile(tile) {
+      this.tileCache.delete(tile.key);
+      this.removeChildren(tile.layerIDList, false);
     }
   }, {
     key: "addChild",
@@ -31,15 +71,15 @@ var TileManager = /*#__PURE__*/function () {
       this.children.push(layer);
     }
   }, {
-    key: "addChilds",
-    value: function addChilds(layers) {
+    key: "addChildren",
+    value: function addChildren(layers) {
       var _this$children;
 
       (_this$children = this.children).push.apply(_this$children, (0, _toConsumableArray2.default)(layers));
     }
   }, {
-    key: "removeChilds",
-    value: function removeChilds(layerIDList) {
+    key: "removeChildren",
+    value: function removeChildren(layerIDList) {
       var refresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var remveLayerList = [];
       var cacheLayerList = [];
@@ -63,8 +103,8 @@ var TileManager = /*#__PURE__*/function () {
       layer.destroy();
     }
   }, {
-    key: "getChilds",
-    value: function getChilds(layerIDList) {
+    key: "getChildren",
+    value: function getChildren(layerIDList) {
       return this.children.filter(function (child) {
         return layerIDList.includes(child.id);
       });
@@ -115,7 +155,7 @@ var TileManager = /*#__PURE__*/function () {
     key: "destroy",
     value: function destroy() {}
   }]);
-  return TileManager;
+  return Base;
 }();
 
-exports.TileManager = TileManager;
+exports.Base = Base;

package/lib/tile/manager/{tileLayerManager.js → layerManager.js}

@@ -17,22 +17,28 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _baseTileManager = require("./baseTileManager");
+var _base = require("./base");
 
 var _l7Utils = require("@antv/l7-utils");
 
 var _utils = require("../utils");
 
-var _tileConfigManager = _interopRequireDefault(require("./tileConfigManager"));
+var _TileStyleService = require("../style/TileStyleService");
 
-var _tilePickerManager = _interopRequireDefault(require("./tilePickerManager"));
+var _TilePickService = require("../interaction/TilePickService");
+
+var _TileRenderService = require("../render/TileRenderService");
+
+var _constants = require("../style/constants");
+
+var _utils2 = require("../style/utils");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
 
-var TileLayerManager = /*#__PURE__*/function (_TileManager) {
-  (0, _inherits2.default)(TileLayerManager, _TileManager);
+var TileLayerManager = /*#__PURE__*/function (_Base) {
+  (0, _inherits2.default)(TileLayerManager, _Base);
 
   var _super = _createSuper(TileLayerManager);
 
@@ -46,8 +52,9 @@ var TileLayerManager = /*#__PURE__*/function (_TileManager) {
     _this.mapService = mapService;
     _this.rendererService = rendererService;
     _this.transforms = transforms;
-    _this.tilePickManager = new _tilePickerManager.default(parent, rendererService, pickingService, _this.children);
-    _this.tileConfigManager = new _tileConfigManager.default();
+    _this.tileRenderService = new _TileRenderService.TileRenderService(rendererService);
+    _this.tilePickService = new _TilePickService.TilePickService(parent, rendererService, pickingService, _this.children, _this.tileRenderService);
+    _this.tileStyleService = new _TileStyleService.TileStyleService();
 
     _this.setSubLayerInitOption();
 
@@ -61,17 +68,13 @@ var TileLayerManager = /*#__PURE__*/function (_TileManager) {
   (0, _createClass2.default)(TileLayerManager, [{
     key: "render",
     value: function render() {
-      var _this$tileConfigManag, _this$tilePickManager;
-
-      (_this$tileConfigManag = this.tileConfigManager) === null || _this$tileConfigManag === void 0 ? void 0 : _this$tileConfigManag.checkConfig(this.parent);
-      (_this$tilePickManager = this.tilePickManager) === null || _this$tilePickManager === void 0 ? void 0 : _this$tilePickManager.normalRender(this.children);
+      this.tileStyleService.checkConfig(this.parent);
+      this.tileRenderService.render(this.children);
     }
   }, {
     key: "pickLayers",
     value: function pickLayers(target) {
-      var _this$tilePickManager2;
-
-      return (_this$tilePickManager2 = this.tilePickManager) === null || _this$tilePickManager2 === void 0 ? void 0 : _this$tilePickManager2.pickRender(this.children, target);
+      return this.tilePickService.pick(this.children, target);
     }
   }, {
     key: "setSubLayerInitOption",
@@ -118,8 +121,8 @@ var TileLayerManager = /*#__PURE__*/function (_TileManager) {
           _ref$pixelConstantRGB = _ref.pixelConstantRGB,
           pixelConstantRGB = _ref$pixelConstantRGB === void 0 ? 0.1 : _ref$pixelConstantRGB;
 
-      var colorValue = this.tileConfigManager.getAttributeScale(this.parent, 'color');
-      var sizeValue = this.tileConfigManager.getAttributeScale(this.parent, 'size');
+      var colorValue = this.tileStyleService.getAttributeScale(this.parent, 'color');
+      var sizeValue = this.tileStyleService.getAttributeScale(this.parent, 'size');
       var source = this.parent.getSource();
 
       var _ref2 = (source === null || source === void 0 ? void 0 : (_source$data = source.data) === null || _source$data === void 0 ? void 0 : _source$data.tilesetOptions) || {},
@@ -169,56 +172,53 @@ var TileLayerManager = /*#__PURE__*/function (_TileManager) {
         this.initOptions.colorTexture = colorTexture;
       }
     }
+  }, {
+    key: "getInitOptionValue",
+    value: function getInitOptionValue(field) {
+      var _this$parent$getAttri, _this$parent$getAttri2, _this$parent$getAttri3;
+
+      switch (field) {
+        case 'color':
+          return (_this$parent$getAttri = this.parent.getAttribute('color')) === null || _this$parent$getAttri === void 0 ? void 0 : _this$parent$getAttri.scale;
+
+        case 'shape':
+          return (_this$parent$getAttri2 = this.parent.getAttribute('shape')) === null || _this$parent$getAttri2 === void 0 ? void 0 : _this$parent$getAttri2.scale;
+
+        case 'size':
+          return (_this$parent$getAttri3 = this.parent.getAttribute('size')) === null || _this$parent$getAttri3 === void 0 ? void 0 : _this$parent$getAttri3.scale;
+        // @ts-ignore
+
+        default:
+          return this.initOptions[field];
+      }
+    }
+  }, {
+    key: "setInitOptionValue",
+    value: function setInitOptionValue(field, value) {
+      // @ts-ignore
+      this.initOptions[field] = value;
+    }
   }, {
     key: "setConfigListener",
     value: function setConfigListener() {
       var _this2 = this;
 
-      // RasterLayer PolygonLayer LineLayer PointLayer
-      // All Tile Layer Need Listen
-      this.tileConfigManager.setConfig('opacity', this.initOptions.opacity);
-      this.tileConfigManager.setConfig('zIndex', this.initOptions.zIndex);
-      this.tileConfigManager.setConfig('mask', this.initOptions.mask);
-
-      if (this.parent.type === 'RasterLayer') {
-        // Raster Tile Layer Need Listen
-        this.tileConfigManager.setConfig('rampColors', this.initOptions.rampColors);
-        this.tileConfigManager.setConfig('domain', this.initOptions.domain);
-        this.tileConfigManager.setConfig('clampHigh', this.initOptions.clampHigh);
-        this.tileConfigManager.setConfig('clampLow', this.initOptions.clampLow);
-        this.tileConfigManager.setConfig('pixelConstant', this.initOptions.pixelConstant);
-        this.tileConfigManager.setConfig('pixelConstantR', this.initOptions.pixelConstantR);
-        this.tileConfigManager.setConfig('pixelConstantG', this.initOptions.pixelConstantG);
-        this.tileConfigManager.setConfig('pixelConstantB', this.initOptions.pixelConstantB);
-        this.tileConfigManager.setConfig('pixelConstantRGB', this.initOptions.pixelConstantRGB);
-      } else {
-        var _this$parent$getAttri, _this$parent$getAttri2, _this$parent$getAttri3;
-
-        // Vector Tile Layer Need Listen
-        this.tileConfigManager.setConfig('stroke', this.initOptions.stroke);
-        this.tileConfigManager.setConfig('strokeWidth', this.initOptions.strokeWidth);
-        this.tileConfigManager.setConfig('strokeOpacity', this.initOptions.strokeOpacity);
-        this.tileConfigManager.setConfig('color', (_this$parent$getAttri = this.parent.getAttribute('color')) === null || _this$parent$getAttri === void 0 ? void 0 : _this$parent$getAttri.scale);
-        this.tileConfigManager.setConfig('shape', (_this$parent$getAttri2 = this.parent.getAttribute('shape')) === null || _this$parent$getAttri2 === void 0 ? void 0 : _this$parent$getAttri2.scale);
-        this.tileConfigManager.setConfig('size', (_this$parent$getAttri3 = this.parent.getAttribute('size')) === null || _this$parent$getAttri3 === void 0 ? void 0 : _this$parent$getAttri3.scale);
-      }
-
-      this.tileConfigManager.on('updateConfig', function (updateConfigs) {
+      var styleConfigs = _constants.styles[this.parent.type] || [];
+      styleConfigs.map(function (style) {
+        _this2.tileStyleService.setConfig(style, _this2.getInitOptionValue(style));
+      });
+      this.tileStyleService.on('updateConfig', function (updateConfigs) {
         updateConfigs.map(function (key) {
-          _this2.updateStyle(key);
-
-          return '';
+          return _this2.updateStyle(key);
         });
       });
     }
   }, {
-    key: "updateStyle",
-    value: function updateStyle(style) {
+    key: "updateAttribute",
+    value: function updateAttribute(style) {
       var _this3 = this;
 
-      var updateValue = null;
-
-      if (['size', 'color', 'shape'].includes(style)) {
+      if (_constants.Attributes.includes(style)) {
         var _this$parent$getAttri4;
 
         var scaleValue = (_this$parent$getAttri4 = this.parent.getAttribute(style)) === null || _this$parent$getAttri4 === void 0 ? void 0 : _this$parent$getAttri4.scale;
@@ -227,12 +227,18 @@ var TileLayerManager = /*#__PURE__*/function (_TileManager) {
           return;
         }
 
-        updateValue = scaleValue;
         this.children.map(function (child) {
-          _this3.tileFactory.setStyleAttributeField(child, style, scaleValue);
-
-          return '';
+          return (0, _utils2.setStyleAttributeField)(child, _this3.parent, style, scaleValue);
         });
+      }
+    }
+  }, {
+    key: "updateStyle",
+    value: function updateStyle(style) {
+      var updateValue = null;
+
+      if (_constants.Attributes.includes(style)) {
+        this.updateAttribute(style);
       } else {
         var layerConfig = this.parent.getLayerConfig();
 
@@ -243,31 +249,27 @@ var TileLayerManager = /*#__PURE__*/function (_TileManager) {
 
         var config = layerConfig[style];
         updateValue = config;
-        (0, _utils.updateLayersConfig)(this.children, style, config);
-
-        if (style === 'rampColors' && config) {
-          var createTexture2D = this.rendererService.createTexture2D;
-          var imageData = (0, _l7Utils.generateColorRamp)(config);
-          this.initOptions.colorTexture = createTexture2D({
-            data: imageData.data,
-            width: imageData.width,
-            height: imageData.height,
-            flipY: false
-          });
-          (0, _utils.updateLayersConfig)(this.children, 'colorTexture', this.initOptions.colorTexture);
-        }
-      } // @ts-ignore
 
+        switch (style) {
+          case 'rampColors':
+            var texture = (0, _utils2.updateTexture)(config, this.children, this.rendererService);
+            this.initOptions.colorTexture = texture;
+            break;
+
+          default:
+            (0, _utils2.updateLayersConfig)(this.children, style, config);
+        }
+      }
 
-      this.initOptions[style] = updateValue;
+      this.setInitOptionValue(style, updateValue);
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      this.tilePickManager.destroy();
+      this.tilePickService.destroy();
     }
   }]);
   return TileLayerManager;
-}(_baseTileManager.TileManager);
+}(_base.Base);
 
 exports.TileLayerManager = TileLayerManager;

package/lib/tile/manager/{baseMapTileLayerManager.js → mapLayerManager.js}

@@ -17,7 +17,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _baseTileManager = require("./baseTileManager");
+var _base = require("./base");
 
 var _utils = require("../utils");
 
@@ -25,8 +25,8 @@ 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; } }
 
-var BaseMapTileLayerManager = /*#__PURE__*/function (_TileManager) {
-  (0, _inherits2.default)(BaseMapTileLayerManager, _TileManager);
+var BaseMapTileLayerManager = /*#__PURE__*/function (_Base) {
+  (0, _inherits2.default)(BaseMapTileLayerManager, _Base);
 
   var _super = _createSuper(BaseMapTileLayerManager);
 
@@ -129,6 +129,6 @@ var BaseMapTileLayerManager = /*#__PURE__*/function (_TileManager) {
     }
   }]);
   return BaseMapTileLayerManager;
-}(_baseTileManager.TileManager);
+}(_base.Base);
 
 exports.BaseMapTileLayerManager = BaseMapTileLayerManager;

package/lib/tile/models/tileModel.js

@@ -19,9 +19,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 
-var _tmsTileLayer = require("../tmsTileLayer");
+var _TileLayer = require("../tileLayer/TileLayer");
 
-var _tmsMapTileLayer = require("../tmsMapTileLayer");
+var _MapTileLayer = require("../tileLayer/MapTileLayer");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -47,10 +47,10 @@ var TileModel = /*#__PURE__*/function (_BaseModel) {
     value: function getTileLayer(usage) {
       switch (usage) {
         case 'basemap':
-          return _tmsMapTileLayer.TMSBaseMapTileLayer;
+          return _MapTileLayer.MapTileLayer;
 
         default:
-          return _tmsTileLayer.TMSTileLayer;
+          return _TileLayer.TileLayer;
       }
     }
   }, {

package/lib/tile/render/TileRenderService.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TileRenderService = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+/**
+ * 主要用于瓦片图层队列的渲染
+ */
+var TileRenderService = /*#__PURE__*/function () {
+  function TileRenderService(rendererService) {
+    (0, _classCallCheck2.default)(this, TileRenderService);
+    this.rendererService = rendererService;
+  }
+
+  (0, _createClass2.default)(TileRenderService, [{
+    key: "render",
+    value: function render(layers) {
+      var _this = this;
+
+      layers.filter(function (layer) {
+        return layer.inited;
+      }).filter(function (layer) {
+        return layer.isVisible();
+      }).map(function (layer) {
+        layer.hooks.beforeRenderData.call();
+        layer.hooks.beforeRender.call();
+
+        if (layer.masks.length > 0) {
+          // 清除上一次的模版缓存
+          _this.rendererService.clear({
+            stencil: 0,
+            depth: 1,
+            framebuffer: null
+          });
+
+          layer.masks.map(function (m) {
+            m.hooks.beforeRenderData.call();
+            m.hooks.beforeRender.call();
+            m.render();
+            m.hooks.afterRender.call();
+          });
+        }
+
+        layer.render();
+        layer.hooks.afterRender.call();
+      });
+    }
+  }, {
+    key: "renderMask",
+    value: function renderMask(layer) {
+      if (layer.inited && layer.isVisible() && layer.masks.length > 0) {
+        layer.hooks.beforeRender.call();
+        this.rendererService.clear({
+          stencil: 0,
+          depth: 1,
+          framebuffer: null
+        });
+        layer.masks.map(function (m) {
+          m.hooks.beforeRender.call();
+          m.render();
+          m.hooks.afterRender.call();
+        });
+        layer.hooks.afterRender.call();
+      }
+    }
+  }]);
+  return TileRenderService;
+}();
+
+exports.TileRenderService = TileRenderService;

package/lib/tile/{manager/tileConfigManager.js → style/TileStyleService.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TileStyleService = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -29,22 +29,22 @@ 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; } }
 
-var TileConfigManager = /*#__PURE__*/function (_EventEmitter) {
-  (0, _inherits2.default)(TileConfigManager, _EventEmitter);
+var TileStyleService = /*#__PURE__*/function (_EventEmitter) {
+  (0, _inherits2.default)(TileStyleService, _EventEmitter);
 
-  var _super = _createSuper(TileConfigManager);
+  var _super = _createSuper(TileStyleService);
 
-  function TileConfigManager() {
+  function TileStyleService() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, TileConfigManager);
+    (0, _classCallCheck2.default)(this, TileStyleService);
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "checkConfigList", []);
     _this.cacheConfig = new Map();
     return _this;
   }
 
-  (0, _createClass2.default)(TileConfigManager, [{
+  (0, _createClass2.default)(TileStyleService, [{
     key: "setConfig",
     value: function setConfig(key, value) {
       if (!this.checkConfigList.includes(key)) {
@@ -127,7 +127,7 @@ var TileConfigManager = /*#__PURE__*/function (_EventEmitter) {
       return scaleValue;
     }
   }]);
-  return TileConfigManager;
+  return TileStyleService;
 }(_eventemitter.default);
 
-exports.default = TileConfigManager;
+exports.TileStyleService = TileStyleService;

package/lib/tile/style/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.Attributes = void 0;
+
+/**
+ * 瓦片图层的样式
+ */
+var Attributes = ['size', 'color', 'shape'];
+exports.Attributes = Attributes;
+var common = ['opacity', 'zIndex'];
+var rasterLayer = ['mask', 'rampColors', 'domain', 'clampHigh', 'clampLow', 'pixelConstant', 'pixelConstantR', 'pixelConstantG', 'pixelConstantB', 'pixelConstantRGB'].concat(common);
+var pointLayer = ['stroke', 'strokeWidth', 'strokeOpacity', 'color', 'shape', 'size'].concat(common);
+var lineLayer = ['stroke', 'strokeWidth', 'strokeOpacity', 'color', 'shape', 'size'].concat(common);
+var polygonLayer = ['color', 'shape'].concat(common);
+var styles = {
+  'PointLayer': pointLayer,
+  'LineLayer': lineLayer,
+  'PolygonLayer': polygonLayer,
+  'RasterLayer': rasterLayer,
+  'MaskLayer': [],
+  'TileDebugLayer': []
+};
+exports.styles = styles;