@antv/l7-layers 2.10.2 → 2.10.4

package/lib/tile/tileLayer/base.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Base = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _lodash = require("lodash");
+
+var _utils = require("../utils");
+
+var Base = /*#__PURE__*/function () {
+  function Base() {
+    (0, _classCallCheck2.default)(this, Base);
+    (0, _defineProperty2.default)(this, "initedTileset", false);
+    (0, _defineProperty2.default)(this, "viewchange", (0, _lodash.debounce)(this.mapchange, 200));
+  }
+
+  (0, _createClass2.default)(Base, [{
+    key: "children",
+    get: function get() {
+      return this.tileLayerManager.children;
+    }
+  }, {
+    key: "mapchange",
+    value: function mapchange() {
+      var _this$tilesetManager;
+
+      var _this$getCurrentView = this.getCurrentView(),
+          latLonBounds = _this$getCurrentView.latLonBounds,
+          zoom = _this$getCurrentView.zoom;
+
+      if (this.mapService.version === 'GAODE1.x') {
+        var _this$parent$getLayer = this.parent.getLayerConfig(),
+            visible = _this$parent$getLayer.visible;
+
+        if (zoom < 3 && visible) {
+          this.parent.updateLayerConfig({
+            visible: false
+          });
+          this.layerService.reRender();
+        } else if (zoom >= 3 && !visible) {
+          this.parent.updateLayerConfig({
+            visible: true
+          });
+          this.layerService.reRender();
+        }
+      }
+
+      if (this.lastViewStates && this.lastViewStates.zoom === zoom && this.lastViewStates.latLonBounds.toString() === latLonBounds.toString()) {
+        return;
+      }
+
+      this.lastViewStates = {
+        zoom: zoom,
+        latLonBounds: latLonBounds
+      };
+      (_this$tilesetManager = this.tilesetManager) === null || _this$tilesetManager === void 0 ? void 0 : _this$tilesetManager.throttleUpdate(zoom, latLonBounds);
+    }
+  }, {
+    key: "getCurrentView",
+    value: function getCurrentView() {
+      var bounds = this.mapService.getBounds();
+      var latLonBounds = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
+      var zoom = this.mapService.getZoom();
+      return {
+        latLonBounds: latLonBounds,
+        zoom: zoom
+      };
+    }
+  }, {
+    key: "initTileSetManager",
+    value: function initTileSetManager() {
+      var _this$tilesetManager2;
+
+      var source = this.parent.getSource();
+      this.tilesetManager = source.tileset;
+
+      if (!this.initedTileset) {
+        this.bindTilesetEvent();
+        this.initedTileset = true;
+      }
+
+      var _this$getCurrentView2 = this.getCurrentView(),
+          latLonBounds = _this$getCurrentView2.latLonBounds,
+          zoom = _this$getCurrentView2.zoom;
+
+      (_this$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 ? void 0 : _this$tilesetManager2.update(zoom, latLonBounds);
+    }
+  }, {
+    key: "bindTilesetEvent",
+    value: function bindTilesetEvent() {
+      var _this = this;
+
+      if (!this.tilesetManager) {
+        return;
+      } // 瓦片数据加载成功
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+      this.tilesetManager.on('tile-loaded', function (tile) {// 将事件抛出，图层上可以监听使用
+      }); // 瓦片数据从缓存删除或被执行重新加载
+
+      this.tilesetManager.on('tile-unload', function (tile) {
+        // 将事件抛出，图层上可以监听使用
+        _this.tileUnLoad(tile);
+      }); // 瓦片数据加载失败
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+      this.tilesetManager.on('tile-error', function (error, tile) {
+        // 将事件抛出，图层上可以监听使用
+        _this.tileError(error);
+      }); // 瓦片显隐状态更新
+
+      this.tilesetManager.on('tile-update', function () {
+        _this.tileUpdate();
+      }); // 地图视野发生改变
+
+      this.mapService.on('zoomend', function () {
+        return _this.viewchange();
+      });
+      this.mapService.on('moveend', function () {
+        return _this.viewchange();
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      this.tileLayerManager.render();
+    } //  防抖操作
+
+  }, {
+    key: "tileLoaded",
+    value: // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function tileLoaded(tile) {//
+    }
+  }, {
+    key: "tileError",
+    value: function tileError(error) {
+      console.warn('error:', error);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$tilesetManager3;
+
+      (_this$tilesetManager3 = this.tilesetManager) === null || _this$tilesetManager3 === void 0 ? void 0 : _this$tilesetManager3.destroy();
+      this.tileLayerManager.destroy();
+    }
+  }, {
+    key: "tileUnLoad",
+    value: function tileUnLoad(tile) {
+      this.tileLayerManager.removeTile(tile);
+    }
+  }, {
+    key: "tileUpdate",
+    value: function tileUpdate() {
+      var _this2 = this;
+
+      if (!this.tilesetManager) {
+        return;
+      }
+
+      this.tilesetManager.tiles.filter(function (tile) {
+        return tile.isLoaded;
+      }).map(function (tile) {
+        if (!_this2.isTileReady(tile)) return;
+
+        if (!_this2.tileLayerManager.hasTile(tile)) {
+          var _this2$tileLayerManag = _this2.tileLayerManager.addTile(tile),
+              layers = _this2$tileLayerManag.layers;
+
+          _this2.setPickState(layers);
+        } else {
+          if (!tile.isVisibleChange) {
+            return;
+          }
+
+          var _layers = _this2.tileLayerManager.getChildren(tile.layerIDList);
+
+          (0, _utils.updateTileVisible)(tile, _layers, _this2.layerService);
+
+          _this2.setPickState(_layers);
+        }
+      });
+
+      if (this.tilesetManager.isLoaded) {
+        // 将事件抛出，图层上可以使用瓦片
+        this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
+      }
+    }
+  }, {
+    key: "isTileReady",
+    value: function isTileReady(tile) {
+      var _tile$data;
+
+      if ((_tile$data = tile.data) !== null && _tile$data !== void 0 && _tile$data.layers && this.sourceLayer) {
+        // vector
+        var vectorTileLayer = tile.data.layers[this.sourceLayer];
+        var features = vectorTileLayer === null || vectorTileLayer === void 0 ? void 0 : vectorTileLayer.features;
+
+        if (!(Array.isArray(features) && features.length > 0)) {
+          return false;
+        }
+      }
+
+      return true;
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  }, {
+    key: "setPickState",
+    value: function setPickState(layers) {}
+  }]);
+  return Base;
+}();
+
+exports.Base = Base;

package/lib/tile/utils.js

@@ -4,11 +4,24 @@ 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'];
 /**
  * 判断当前图层是否是瓦片图层
@@ -23,6 +36,70 @@ 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 {
@@ -32,4 +109,75 @@ 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.colorStyleMapping = colorStyleMapping;
-exports.floatStyleMapping = floatStyleMapping;
-exports.styleDataMapping = styleDataMapping;
+exports.handleStyleColor = handleStyleColor;
+exports.handleStyleDataMapping = handleStyleDataMapping;
+exports.handleStyleFloat = handleStyleFloat;
 
 var _lodash = require("lodash");
 
@@ -25,7 +25,7 @@ function registerStyleAttribute(fieldName, layer, field, values, updateOptions)
  */
 
 
-function styleDataMapping(configToUpdate, layer) {
+function handleStyleDataMapping(configToUpdate, layer) {
   // 瓦片图层不需要进行样式数据映射
   if (layer.tileLayer || layer.isTileLayer) {
     return;
@@ -33,37 +33,37 @@ function styleDataMapping(configToUpdate, layer) {
 
   if (configToUpdate.opacity) {
     // 处理 style 中 opacity 属性的数据映射
-    floatStyleMapping('opacity', layer, configToUpdate.opacity);
+    handleStyleFloat('opacity', layer, configToUpdate.opacity);
   }
 
   if (configToUpdate.strokeWidth) {
     // 处理 style 中 strokeWidth 属性的数据映射
-    floatStyleMapping('strokeWidth', layer, configToUpdate.strokeWidth);
+    handleStyleFloat('strokeWidth', layer, configToUpdate.strokeWidth);
   }
 
   if (configToUpdate.strokeOpacity) {
     // 处理 style 中 strokeOpacity 属性的数据映射
-    floatStyleMapping('strokeOpacity', layer, configToUpdate.strokeOpacity);
+    handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
   }
 
   if (configToUpdate.stroke) {
     // 处理 style 中 stroke (strokeColor) 属性的数据映射
-    colorStyleMapping('stroke', layer, configToUpdate.stroke);
+    handleStyleColor('stroke', layer, configToUpdate.stroke);
   }
 
   if (configToUpdate.offsets) {
     // 处理 style 中 offsets 属性的数据映射
-    offsetStyleMapping('offsets', layer, configToUpdate.offsets);
+    handleStyleOffsets('offsets', layer, configToUpdate.offsets);
   }
 
   if (configToUpdate.textOffset) {
     // 处理 style 中 textOffset 属性的数据映射
-    offsetStyleMapping('textOffset', layer, configToUpdate.textOffset);
+    handleStyleOffsets('textOffset', layer, configToUpdate.textOffset);
   }
 
   if (configToUpdate.thetaOffset) {
     // 处理 style 中 thetaOffset 属性的数据映射
-    floatStyleMapping('thetaOffset', layer, configToUpdate.thetaOffset);
+    handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset);
   }
 }
 /**
@@ -71,14 +71,15 @@ function styleDataMapping(configToUpdate, layer) {
  */
 
 
-function floatStyleMapping(fieldName, layer, styleFloat) {
+function handleStyleFloat(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])) {
@@ -104,7 +105,7 @@ function floatStyleMapping(fieldName, layer, styleFloat) {
  */
 
 
-function offsetStyleMapping(fieldName, layer, styleOffsets) {
+function handleStyleOffsets(fieldName, layer, styleOffsets) {
   if ((0, _lodash.isString)(styleOffsets)) {
     // 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
     registerStyleAttribute(fieldName, layer, styleOffsets, function (value) {
@@ -129,9 +130,10 @@ function offsetStyleMapping(fieldName, layer, styleOffsets) {
  */
 
 
-function colorStyleMapping(fieldName, layer, styleColor) {
-  if ((0, _lodash.isString)(styleColor)) {// 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
-    // registerStyleAttribute(fieldName, layer, styleColor, undefined);
+function handleStyleColor(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) {
+function applyAttributeMapping(attribute, record, minimumColor) {
   var _attribute$scale;
 
   if (!attribute.scale) {
@@ -123,10 +123,15 @@ function applyAttributeMapping(attribute, record) {
     }
   });
   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, layer) {
+function mapping(attributes, data, fontService, mapService, minimumColor, layer) {
   var _ref2 = layer === null || layer === void 0 ? void 0 : layer.getLayerConfig(),
       _ref2$arrow = _ref2.arrow,
       arrow = _ref2$arrow === void 0 ? {
@@ -141,7 +146,7 @@ function mapping(attributes, data, fontService, mapService, layer) {
     attributes.filter(function (attribute) {
       return attribute.scale !== undefined;
     }).forEach(function (attribute) {
-      var values = applyAttributeMapping(attribute, record);
+      var values = applyAttributeMapping(attribute, record, minimumColor);
       attribute.needRemapping = false; // TODO: 支持每个属性配置 postprocess
 
       if (attribute.name === 'color') {
@@ -176,10 +181,11 @@ function mapping(attributes, data, fontService, mapService, 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, layer);
+  var mappedEncodeData = mapping(attributes, filterData, fontService, mapService, bottomColor, layer);
   source.destroy();
   return mappedEncodeData;
 }

package/lib/wind/index.js

@@ -7,10 +7,6 @@ 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"));
@@ -54,32 +50,24 @@ var WindLayer = /*#__PURE__*/function (_BaseLayer) {
 
   (0, _createClass2.default)(WindLayer, [{
     key: "buildModels",
-    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);
-      }
+    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;
 
-      return buildModels;
-    }()
+      this.layerModel.buildModels(function (models) {
+        _this3.dispatchModelLoad(models);
+      });
+    }
   }, {
     key: "renderModels",
     value: function renderModels() {