@antv/l7-layers 2.9.27-alpha.2 → 2.9.27-alpha.3

package/lib/polygon/shaders/water/polygon_water_frag.glsl

@@ -5,8 +5,6 @@ uniform float u_opacity: 1.0;
 
 varying vec4 v_Color;
 varying vec2 v_uv;
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
-
 
 float rand(vec2 n) { return 0.5 + 0.5 * fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453); }
 
@@ -64,7 +62,7 @@ float calSpc() {
 }
 
 void main() {
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   gl_FragColor = v_Color;
   gl_FragColor.a *= opacity;
 

package/lib/polygon/shaders/water/polygon_water_vert.glsl

@@ -7,44 +7,15 @@ uniform mat4 u_Mvp;
 varying vec4 v_Color;
 varying vec2 v_uv;
 uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
 
 #pragma include "projection"
 
 void main() {
   v_uv = a_uv;
-  // cal style mapping - 数据纹理映射部分的计算
-styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   v_Color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
-  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));

package/lib/raster/buffers/triangulation.js

@@ -11,10 +11,7 @@ var _martini = _interopRequireDefault(require("@mapbox/martini"));
 
 // @ts-ignore
 function RasterTriangulation(parserData) {
-  var coordinates = parserData.coordinates,
-      data = parserData.data,
-      min = parserData.min,
-      max = parserData.max,
+  var data = parserData.data,
       width = parserData.width,
       height = parserData.height;
   var maxlength = Math.max(width, height);

package/lib/raster/index.js

@@ -58,7 +58,9 @@ var RaterLayer = /*#__PURE__*/function (_BaseLayer) {
       this.layerModel.initModels(function (models) {
         _this2.models = models;
 
-        _this2.renderLayers();
+        _this2.emit('modelLoaded', null);
+
+        _this2.layerService.throttleRenderLayers();
       });
     }
   }, {
@@ -67,7 +69,9 @@ var RaterLayer = /*#__PURE__*/function (_BaseLayer) {
       var _this3 = this;
 
       this.layerModel.buildModels(function (models) {
-        return _this3.models = models;
+        _this3.models = models;
+
+        _this3.emit('modelLoaded', null);
       });
     }
   }, {

package/lib/raster/models/raster.js

@@ -116,7 +116,8 @@ var RasterModel = /*#__PURE__*/function (_BaseModel) {
         depth: {
           enable: false
         },
-        stencil: (0, _l7Utils.getMask)(mask, maskInside)
+        stencil: (0, _l7Utils.getMask)(mask, maskInside),
+        pick: false
       }).then(function (model) {
         callbackModel([model]);
       }).catch(function (err) {
@@ -153,7 +154,7 @@ var RasterModel = /*#__PURE__*/function (_BaseModel) {
             type: _l7Core.gl.FLOAT
           },
           size: 2,
-          update: function update(feature, featureIdx, vertex, attributeIdx) {
+          update: function update(feature, featureIdx, vertex) {
             return [vertex[3], vertex[4]];
           }
         }

package/lib/shader/minify_frag.glsl

@@ -0,0 +1,7 @@
+uniform float u_opacity : 1.0;
+uniform vec4 u_color;
+
+void main() {
+  gl_FragColor = u_color;
+  gl_FragColor.a *= u_opacity;
+}

package/lib/shader/minify_picking_frag.glsl

@@ -0,0 +1,10 @@
+uniform float u_opacity : 1.0;
+varying vec4 v_color;
+
+#pragma include "picking"
+
+void main() {
+  gl_FragColor = v_color;
+  gl_FragColor.a *= u_opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/lib/tile/manager/baseMapTileLayerManager.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseMapTileLayerManager = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _tileFactory = require("../tileFactory");
+
+var _utils = require("../utils");
+
+var BaseMapTileLayerManager = /*#__PURE__*/function () {
+  // only support vector layer
+  function BaseMapTileLayerManager(parent, mapService, rendererService) {
+    (0, _classCallCheck2.default)(this, BaseMapTileLayerManager);
+    this.parent = parent;
+    this.children = parent.layerChildren;
+    this.mapService = mapService;
+    this.rendererService = rendererService;
+    this.setSubLayerInitOptipn();
+    this.initTileFactory();
+  }
+
+  (0, _createClass2.default)(BaseMapTileLayerManager, [{
+    key: "createTile",
+    value: function createTile(tile) {
+      return this.tileFactory.createTile(tile, this.initOptions);
+    }
+  }, {
+    key: "updateLayersConfig",
+    value: function updateLayersConfig(layers, key, value) {
+      layers.map(function (layer) {
+        if (key === 'mask') {
+          // Tip: 栅格瓦片生效、设置全局的 mask、瓦片被全局的 mask 影响
+          layer.style({
+            mask: value
+          });
+        } else {
+          layer.updateLayerConfig((0, _defineProperty2.default)({}, key, value));
+        }
+      });
+    }
+  }, {
+    key: "addChild",
+    value: function addChild(layer) {
+      this.children.push(layer);
+    }
+  }, {
+    key: "addChilds",
+    value: function addChilds(layers) {
+      var _this$children;
+
+      (_this$children = this.children).push.apply(_this$children, (0, _toConsumableArray2.default)(layers));
+    }
+  }, {
+    key: "removeChilds",
+    value: function removeChilds(layerIDList) {
+      var refresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var remveLayerList = [];
+      var cacheLayerList = [];
+      this.children.filter(function (child) {
+        layerIDList.includes(child.id) ? remveLayerList.push(child) : cacheLayerList.push(child);
+      });
+      remveLayerList.map(function (layer) {
+        return layer.destroy(refresh);
+      });
+      this.children = cacheLayerList;
+    }
+  }, {
+    key: "removeChild",
+    value: function removeChild(layer) {
+      var layerIndex = this.children.indexOf(layer);
+
+      if (layerIndex > -1) {
+        this.children.splice(layerIndex, 1);
+      }
+
+      layer.destroy();
+    }
+  }, {
+    key: "getChilds",
+    value: function getChilds(layerIDList) {
+      return this.children.filter(function (child) {
+        return layerIDList.includes(child.id);
+      });
+    }
+  }, {
+    key: "getChild",
+    value: function getChild(layerID) {
+      return this.children.filter(function (child) {
+        return child.id === layerID;
+      })[0];
+    }
+  }, {
+    key: "clearChild",
+    value: function clearChild() {
+      this.children.forEach(function (layer) {
+        layer.destroy();
+      });
+      this.children.slice(0, this.children.length);
+    }
+  }, {
+    key: "hasChild",
+    value: function hasChild(layer) {
+      return this.children.includes(layer);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      this.children.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: "setSubLayerInitOptipn",
+    value: function setSubLayerInitOptipn() {
+      var _colorAttribute$scale, _sizeAttribute$scale;
+
+      var _ref = this.parent.getLayerConfig(),
+          _ref$zIndex = _ref.zIndex,
+          zIndex = _ref$zIndex === void 0 ? 0 : _ref$zIndex,
+          _ref$opacity = _ref.opacity,
+          opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+          _ref$mask = _ref.mask,
+          mask = _ref$mask === void 0 ? false : _ref$mask,
+          _ref$stroke = _ref.stroke,
+          stroke = _ref$stroke === void 0 ? '#fff' : _ref$stroke,
+          _ref$strokeWidth = _ref.strokeWidth,
+          strokeWidth = _ref$strokeWidth === void 0 ? 0 : _ref$strokeWidth,
+          _ref$strokeOpacity = _ref.strokeOpacity,
+          strokeOpacity = _ref$strokeOpacity === void 0 ? 1 : _ref$strokeOpacity,
+          _ref$workerEnabled = _ref.workerEnabled,
+          workerEnabled = _ref$workerEnabled === void 0 ? false : _ref$workerEnabled,
+          sourceLayer = _ref.sourceLayer;
+
+      var source = this.parent.getSource();
+      var parentParserType = source.getParserType();
+      var colorAttribute = this.parent.getAttribute('color');
+      var basemapColor = (colorAttribute === null || colorAttribute === void 0 ? void 0 : (_colorAttribute$scale = colorAttribute.scale) === null || _colorAttribute$scale === void 0 ? void 0 : _colorAttribute$scale.field) || '#fff';
+      var sizeAttribute = this.parent.getAttribute('size');
+      var basemapSize = (sizeAttribute === null || sizeAttribute === void 0 ? void 0 : (_sizeAttribute$scale = sizeAttribute.scale) === null || _sizeAttribute$scale === void 0 ? void 0 : _sizeAttribute$scale.field) || 1;
+      var layerShape = (0, _utils.getLayerShape)(this.parent.type, this.parent);
+      this.initOptions = {
+        usage: 'basemap',
+        layerType: this.parent.type,
+        shape: layerShape,
+        zIndex: zIndex,
+        opacity: opacity,
+        sourceLayer: this.getSourceLayer(parentParserType, sourceLayer),
+        basemapColor: basemapColor,
+        basemapSize: basemapSize,
+        mask: (0, _utils.getMaskValue)(this.parent.type, mask),
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        strokeOpacity: strokeOpacity,
+        // worker
+        workerEnabled: workerEnabled
+      };
+    }
+  }, {
+    key: "getSourceLayer",
+    value: function getSourceLayer(parentParserType, sourceLayer) {
+      if (parentParserType === 'geojsonvt') {
+        return 'geojsonvt';
+      } else if (parentParserType === 'testTile') {
+        return 'testTile';
+      } else {
+        return sourceLayer;
+      }
+    }
+  }, {
+    key: "initTileFactory",
+    value: function initTileFactory() {
+      var source = this.parent.getSource();
+      var TileFactory = (0, _tileFactory.getTileFactory)(this.parent.type, source.parser);
+      this.tileFactory = new TileFactory({
+        parent: this.parent,
+        mapService: this.mapService,
+        rendererService: this.rendererService
+      });
+    }
+  }]);
+  return BaseMapTileLayerManager;
+}();
+
+exports.BaseMapTileLayerManager = BaseMapTileLayerManager;

package/lib/tile/manager/tileLayerManager.js

@@ -26,14 +26,14 @@ var _tileConfigManager = _interopRequireDefault(require("./tileConfigManager"));
 var _tilePickerManager = _interopRequireDefault(require("./tilePickerManager"));
 
 var TileLayerManager = /*#__PURE__*/function () {
-  function TileLayerManager(parent, mapService, rendererService, pickingService, layerService, transforms) {
+  function TileLayerManager(parent, mapService, rendererService, pickingService, transforms) {
     (0, _classCallCheck2.default)(this, TileLayerManager);
     this.parent = parent;
     this.children = parent.layerChildren;
     this.mapService = mapService;
     this.rendererService = rendererService;
     this.transforms = transforms;
-    this.tilePickManager = new _tilePickerManager.default(parent, rendererService, pickingService, this.children, layerService);
+    this.tilePickManager = new _tilePickerManager.default(parent, rendererService, pickingService, this.children);
     this.tileConfigManager = new _tileConfigManager.default();
     this.setSubLayerInitOptipn();
     this.setConfigListener();

package/lib/tile/manager/tilePickerManager.js

@@ -32,7 +32,7 @@ var TilePickManager = /*#__PURE__*/function (_EventEmitter) {
 
   var _super = _createSuper(TilePickManager);
 
-  function TilePickManager(parent, rendererService, pickingService, children, layerService) {
+  function TilePickManager(parent, rendererService, pickingService, children) {
     var _this;
 
     (0, _classCallCheck2.default)(this, TilePickManager);
@@ -41,7 +41,6 @@ var TilePickManager = /*#__PURE__*/function (_EventEmitter) {
     _this.parent = parent;
     _this.rendererService = rendererService;
     _this.pickingService = pickingService;
-    _this.layerService = layerService;
     _this.children = children;
     return _this;
   }

package/lib/tile/models/tileModel.js

@@ -21,6 +21,8 @@ var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 
 var _tmsTileLayer = require("../tmsTileLayer");
 
+var _tmsMapTileLayer = require("../tmsMapTileLayer");
+
 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; } }
@@ -40,13 +42,28 @@ var TileModel = /*#__PURE__*/function (_BaseModel) {
     value: function getUninforms() {
       return {};
     }
+  }, {
+    key: "getTileLayer",
+    value: function getTileLayer(usage) {
+      switch (usage) {
+        case 'basemap':
+          return _tmsMapTileLayer.TMSBaseMapTileLayer;
+
+        default:
+          return _tmsTileLayer.TMSTileLayer;
+      }
+    }
   }, {
     key: "initModels",
     value: function initModels() {
       var source = this.layer.getSource();
 
-      if (source !== null && source !== void 0 && source.data.isTile) {
-        this.layer.tileLayer = new _tmsTileLayer.TMSTileLayer({
+      var _this$layer$getLayerC = this.layer.getLayerConfig(),
+          usage = _this$layer$getLayerC.usage;
+
+      if (source !== null && source !== void 0 && source.data.isTile && !this.layer.tileLayer) {
+        var tileLayer = this.getTileLayer(usage);
+        this.layer.tileLayer = new tileLayer({
           parent: this.layer,
           rendererService: this.rendererService,
           mapService: this.mapService,

package/lib/tile/tileFactory/base.js

@@ -33,12 +33,21 @@ var turf = _interopRequireWildcard(require("@turf/helpers"));
 
 var _union = _interopRequireDefault(require("@turf/union"));
 
+var _clone = _interopRequireDefault(require("@turf/clone"));
+
 var _polygonToLine = _interopRequireDefault(require("@turf/polygon-to-line"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var EMPTY_FEATURE_DATA = {
+  features: [],
+  featureId: null,
+  vectorTileLayer: null,
+  source: null
+};
+
 var TileFactory = /*#__PURE__*/function () {
   // 用于记录图层内事件，辅助判断图层外事件逻辑
   function TileFactory(option) {
@@ -57,7 +66,8 @@ var TileFactory = /*#__PURE__*/function () {
     var source = this.parentLayer.getSource();
     this.zoomOffset = source.parser.zoomOffset || 0;
     this.tilesetManager = source.tileset;
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   (0, _createClass2.default)(TileFactory, [{
     key: "createTile",
@@ -70,44 +80,41 @@ var TileFactory = /*#__PURE__*/function () {
   }, {
     key: "getFeatureData",
     value: function getFeatureData(tile, initOptions) {
-      var emptyData = {
-        features: [],
-        featureId: null,
-        vectorTileLayer: null,
-        source: null
-      };
       var sourceLayer = initOptions.sourceLayer,
           featureId = initOptions.featureId,
-          transforms = initOptions.transforms,
+          _initOptions$transfor = initOptions.transforms,
+          transforms = _initOptions$transfor === void 0 ? [] : _initOptions$transfor,
           layerType = initOptions.layerType,
           shape = initOptions.shape;
 
       if (!sourceLayer) {
-        return emptyData;
+        return EMPTY_FEATURE_DATA;
       }
 
       var vectorTileLayer = tile.data.layers[sourceLayer];
       var features = vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.features;
 
       if (!(Array.isArray(features) && features.length > 0)) {
-        return emptyData;
+        return EMPTY_FEATURE_DATA;
       } else {
         var geofeatures = [];
 
         if (layerType === 'LineLayer' && shape === 'simple') {
           features.map(function (feature) {
-            if (feature.geometry.type === 'MultiPolygon') {
+            var cloneFeature = (0, _clone.default)(feature);
+
+            if (cloneFeature.geometry.type === 'MultiPolygon') {
               var _geofeatures;
 
               // @ts-ignore
-              var linefeatures = (0, _polygonToLine.default)(feature).features;
+              var linefeatures = (0, _polygonToLine.default)(cloneFeature).features;
 
               (_geofeatures = geofeatures).push.apply(_geofeatures, (0, _toConsumableArray2.default)(linefeatures));
-            } else if (feature.geometry.type === 'Polygon') {
-              feature.geometry.type = 'MultiLineString';
-              geofeatures.push(feature);
+            } else if (cloneFeature.geometry.type === 'Polygon') {
+              cloneFeature.geometry.type = 'MultiLineString';
+              geofeatures.push(cloneFeature);
             } else {
-              geofeatures.push(feature);
+              geofeatures.push(cloneFeature);
             }
           });
         } else {
@@ -120,7 +127,8 @@ var TileFactory = /*#__PURE__*/function () {
         }, {
           parser: {
             type: 'geojson',
-            featureId: featureId
+            featureId: featureId,
+            cancelExtent: true
           },
           transforms: transforms
         });
@@ -144,28 +152,43 @@ var TileFactory = /*#__PURE__*/function () {
           color = initOptions.color,
           layerType = initOptions.layerType,
           size = initOptions.size,
-          shape = initOptions.shape;
+          shape = initOptions.shape,
+          usage = initOptions.usage,
+          basemapColor = initOptions.basemapColor,
+          basemapSize = initOptions.basemapSize;
       var FactoryTileLayer = L7Layer ? L7Layer : _vectorLayer.default;
       var layer = new FactoryTileLayer((0, _objectSpread2.default)({
         visible: tile.isVisible,
         tileOrigin: vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.l7TileOrigin,
         coord: vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.l7TileCoord
-      }, this.getLayerInitOption(initOptions))); // vector layer set config
+      }, this.getLayerInitOption(initOptions)));
+      if (layerType) layer.type = layerType; // Tip: sign tile layer
+
+      layer.isTileLayer = true; // vector 、raster
+      // vector layer set event
 
-      if (layer.isVector) {
+      if (layer.isVector && usage !== 'basemap') {
         this.emitEvent([layer]);
-        layer.type = layerType;
         layer.select(true);
       } // set source
 
 
-      layer.source(source); // set scale
-
-      this.setScale(layer); // set scale attribute field
+      layer.source(source); // set scale attribute field
 
       this.setStyleAttributeField(layer, 'shape', shape);
-      this.setStyleAttributeField(layer, 'color', color);
-      this.setStyleAttributeField(layer, 'size', size); // set mask
+
+      if (usage !== 'basemap') {
+        // set scale
+        this.setScale(layer);
+        this.setStyleAttributeField(layer, 'color', color);
+        this.setStyleAttributeField(layer, 'size', size);
+      } else {
+        layer.style({
+          color: basemapColor,
+          size: basemapSize
+        });
+      } // set mask
+
 
       var layers = [layer];
 
@@ -173,7 +196,12 @@ var TileFactory = /*#__PURE__*/function () {
         var masklayer = new _mask.default().source({
           type: 'FeatureCollection',
           features: [tile.bboxPolygon]
-        }).shape('fill');
+        }, {
+          parser: {
+            type: 'geojson',
+            cancelExtent: true
+          }
+        });
         layers.push(masklayer);
         layer.addMaskLayer(masklayer);
       } // regist layer
@@ -193,7 +221,7 @@ var TileFactory = /*#__PURE__*/function () {
     value: function getDefautStyleAttributeField(layer, type) {
       switch (type) {
         case 'size':
-          return 2;
+          return 1;
 
         case 'color':
           return '#fff';
@@ -272,8 +300,7 @@ var TileFactory = /*#__PURE__*/function () {
       var tiles = this.tilesetManager.tiles.filter(function (t) {
         return t.key === "".concat(xy[0], ",").concat(xy[1], ",").concat(z);
       });
-      var tile = tiles[0];
-      return tile;
+      return tiles[0];
     }
   }, {
     key: "emitEvent",
@@ -292,7 +319,7 @@ var TileFactory = /*#__PURE__*/function () {
 
               var tile = _this.getTile(lng, lat);
 
-              _this.getFeatureAndEmitEvent(layer, 'subLayerClick', e, isVector, tile);
+              tile && _this.getFeatureAndEmitEvent(layer, 'subLayerClick', e, isVector, tile);
             } else {
               _this.getFeatureAndEmitEvent(layer, 'subLayerClick', e);
             }
@@ -307,7 +334,7 @@ var TileFactory = /*#__PURE__*/function () {
 
               var tile = _this.getTile(lng, lat);
 
-              _this.getFeatureAndEmitEvent(layer, 'subLayerMouseMove', e, isVector, tile);
+              tile && _this.getFeatureAndEmitEvent(layer, 'subLayerMouseMove', e, isVector, tile);
             } else {
               _this.getFeatureAndEmitEvent(layer, 'subLayerMouseMove', e);
             }
@@ -325,7 +352,7 @@ var TileFactory = /*#__PURE__*/function () {
 
               var tile = _this.getTile(lng, lat);
 
-              _this.getFeatureAndEmitEvent(layer, 'subLayerMouseMove', e, isVector, tile);
+              tile && _this.getFeatureAndEmitEvent(layer, 'subLayerMouseMove', e, isVector, tile);
             } else {
               _this.getFeatureAndEmitEvent(layer, 'subLayerMouseEnter', e);
             }

package/lib/tile/tileFactory/line.js

@@ -58,6 +58,9 @@ var VectorPolygonTile = /*#__PURE__*/function (_TileFactory) {
         vectorTileLayer: vectorTileLayer,
         source: source
       });
+      layer.once('modelLoaded', function () {
+        tile.layerLoad();
+      });
       return {
         layers: [layer],
         layerIDList: [layer.id]

package/lib/tile/tileFactory/point.js

@@ -58,6 +58,9 @@ var VectorPolygonTile = /*#__PURE__*/function (_TileFactory) {
         vectorTileLayer: vectorTileLayer,
         source: source
       });
+      layer.once('modelLoaded', function () {
+        tile.layerLoad();
+      });
       return {
         layers: [layer],
         layerIDList: [layer.id]

package/lib/tile/tileFactory/polygon.js

@@ -58,6 +58,9 @@ var VectorPolygonTile = /*#__PURE__*/function (_TileFactory) {
         vectorTileLayer: vectorTileLayer,
         source: source
       });
+      layer.once('modelLoaded', function () {
+        tile.layerLoad();
+      });
       return {
         layers: [layer],
         layerIDList: [layer.id]