@antv/l7-layers 2.10.3 → 2.10.5

package/lib/tile/manager/base.js

@@ -7,152 +7,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Base = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 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 _l7Core = require("@antv/l7-core");
+var _tileFactory = require("../tileFactory");
 
-var _utils = require("../style/utils");
+var _utils = require("../utils");
 
 var Base = /*#__PURE__*/function () {
   function Base() {
     (0, _classCallCheck2.default)(this, Base);
     (0, _defineProperty2.default)(this, "tileCache", new Map());
-    (0, _defineProperty2.default)(this, "tileLayerCache", new Map());
   }
 
   (0, _createClass2.default)(Base, [{
-    key: "initTileLayers",
-    value: function () {
-      var _initTileLayers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(layers, tile) {
-        var _this = this;
-
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                return _context2.abrupt("return", Promise.all(layers.map( /*#__PURE__*/function () {
-                  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(layer) {
-                    var container;
-                    return _regenerator.default.wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            container = (0, _l7Core.createLayerContainer)(_this.parent.sceneContainer);
-                            layer.setContainer(container, _this.parent.sceneContainer);
-                            _context.next = 4;
-                            return layer.init();
-
-                          case 4:
-                            _this.addChild(layer);
-
-                            tile.layerLoad();
-
-                            _this.render();
-
-                          case 7:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
-                    }, _callee);
-                  }));
-
-                  return function (_x3) {
-                    return _ref.apply(this, arguments);
-                  };
-                }())));
-
-              case 1:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-
-      function initTileLayers(_x, _x2) {
-        return _initTileLayers.apply(this, arguments);
-      }
-
-      return initTileLayers;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      this.parent.renderLayers();
-    }
-  }, {
     key: "hasTile",
     value: function hasTile(tile) {
-      return this.tileCache.has(tile.key);
-    } // 添加图层
-
+      return !!this.tileCache.has(tile.key);
+    }
   }, {
     key: "addTile",
-    value: function () {
-      var _addTile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(tile) {
-        var layerCollections;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                if (!this.hasTile(tile)) {
-                  _context3.next = 2;
-                  break;
-                }
+    value: function addTile(tile) {
+      var _tile$layerIDList;
 
-                return _context3.abrupt("return", {
-                  layers: []
-                });
+      // oldTile 存在的时候暂时直接结束
+      // TODO：合并不存在的时候
+      if (this.hasTile(tile)) return {
+        layers: [],
+        layerIDList: []
+      }; // 存储当前 tile
 
-              case 2:
-                // 存储当前 tile
-                this.tileCache.set(tile.key, tile); // 创建 tile 对应的 layers
+      this.tileCache.set(tile.key, tile); // 创建 tile 对应的 layers
 
-                layerCollections = this.tileFactory.createTile(tile, this.initOptions); // // 初始化图层
+      var layerCollections = this.tileFactory.createTile(tile, this.initOptions); // regist layer 将创建出来的 layer 进行注册初始化操作
 
-                _context3.next = 6;
-                return this.initTileLayers(layerCollections.layers, tile);
+      (0, _utils.registerLayers)(this.parent, layerCollections.layers);
 
-              case 6:
-                this.tileLayerCache.set(tile.key, layerCollections.layers); // const visible =  tile.parent ? tile.parent.children.every(t=>this.tileLayerCache.has(t.key)) : true
-                // tile.parent?.children.forEach((t)=>{
-                //   updateLayersConfig(this.getLayers(t),'visible',visible)
-                // })
+      (_tile$layerIDList = tile.layerIDList).push.apply(_tile$layerIDList, (0, _toConsumableArray2.default)(layerCollections.layerIDList)); // add layer into layerGroup
 
-                return _context3.abrupt("return", layerCollections);
-
-              case 8:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3, this);
-      }));
-
-      function addTile(_x4) {
-        return _addTile.apply(this, arguments);
-      }
 
-      return addTile;
-    }()
+      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);
-      var layers = this.tileLayerCache.get(tile.key);
-      this.tileLayerCache.delete(tile.key);
-      this.removeLayers(layers, false);
+      this.removeChildren(tile.layerIDList, false);
     }
   }, {
     key: "addChild",
@@ -167,16 +78,18 @@ var Base = /*#__PURE__*/function () {
       (_this$children = this.children).push.apply(_this$children, (0, _toConsumableArray2.default)(layers));
     }
   }, {
-    key: "removeLayers",
-    value: function removeLayers() {
-      var layers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    key: "removeChildren",
+    value: function removeChildren(layerIDList) {
       var refresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      this.children = this.children.filter(function (child) {
-        return !layers.includes(child);
+      var remveLayerList = [];
+      var cacheLayerList = [];
+      this.children.filter(function (child) {
+        layerIDList.includes(child.id) ? remveLayerList.push(child) : cacheLayerList.push(child);
       });
-      layers.map(function (layer) {
+      remveLayerList.map(function (layer) {
         return layer.destroy(refresh);
       });
+      this.children = cacheLayerList;
     }
   }, {
     key: "removeChild",
@@ -190,10 +103,11 @@ var Base = /*#__PURE__*/function () {
       layer.destroy();
     }
   }, {
-    key: "getLayers",
-    value: function getLayers(tile) {
-      if (!tile) return [];
-      return this.tileLayerCache.get(tile.key) || [];
+    key: "getChildren",
+    value: function getChildren(layerIDList) {
+      return this.children.filter(function (child) {
+        return layerIDList.includes(child.id);
+      });
     }
   }, {
     key: "getChild",
@@ -217,11 +131,14 @@ var Base = /*#__PURE__*/function () {
     }
   }, {
     key: "initTileFactory",
-    value: function initTileFactory() {// this.tileFactory = new TileFactory({
-      //   parent: this.parent,
-      //   mapService: this.mapService,
-      //   rendererService: this.rendererService,
-      // });
+    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
+      });
     }
   }, {
     key: "getSourceLayer",
@@ -234,92 +151,9 @@ var Base = /*#__PURE__*/function () {
         return sourceLayer;
       }
     }
-  }, {
-    key: "updateTileVisible",
-    value: function updateTileVisible(tile, layerService) {
-      var layers = this.getLayers(tile);
-      if (layers.length === 0) return;
-
-      if (tile.isVisible) {
-        // 如果可见直接进行渲染，父级发
-        (0, _utils.updateLayersConfig)(layers, 'visible', tile.isVisible);
-      } else {
-        // 如果不可见，放大，等到子瓦片渲染完成，缩小：父级渲染成功
-        // console.log('updateTileVisible',`${tile.x}_${tile.y}_${tile.z}`,tile.isVisible)
-        // console.log(tile);
-        // console.log(`子瓦片${tile.x}/${tile.y}/${tile.z}`,tile.children.length)
-        // tile.children.forEach((t)=>{
-        //   console.log(`${t.x}/${t.y}/${t.z}`)
-        // })
-        (0, _utils.updateLayersConfig)(layers, 'visible', tile.isVisible);
-      } // this.listenLoad(tile, () => {
-      //   this.isTileAllLoad(tile) && updateLayersConfig(layers, 'visible', tile.isVisible);
-      // })
-
-    }
-  }, {
-    key: "listenLoad",
-    value: function listenLoad(tile, callback) {
-      var _tile$parent;
-
-      tile.once('layerLoaded', function () {
-        callback();
-      });
-      tile.children.map(function (childTile) {
-        childTile.once('layerLoaded', function () {
-          callback();
-        });
-      });
-      (_tile$parent = tile.parent) === null || _tile$parent === void 0 ? void 0 : _tile$parent.once('layerLoaded', function () {
-        callback();
-      });
-    }
-  }, {
-    key: "isTileLoaded",
-    value: function isTileLoaded(tile) {
-      if (tile.isLoad) return true;
-      var isLoad = this.getLayers(tile).length === tile.loadedLayers;
-      tile.isLoad = isLoad;
-      return isLoad;
-    }
-  }, {
-    key: "isTileChildLoaded",
-    value: function isTileChildLoaded(tile) {
-      var _this2 = this;
-
-      if (tile.isChildLoad) return true;
-      var children = tile.children;
-      var isLoad = children.filter(function (child) {
-        return _this2.isTileLoaded(child);
-      }).length === children.length;
-      tile.isChildLoad = isLoad;
-      return isLoad;
-    }
-  }, {
-    key: "isTileParentLoaded",
-    value: function isTileParentLoaded(tile) {
-      var parent = tile.parent;
-
-      if (!parent) {
-        return true;
-      } else {
-        return this.isTileLoaded(parent);
-      }
-    }
-  }, {
-    key: "isTileAllLoad",
-    value: function isTileAllLoad(tile) {
-      var tileLoaded = this.isTileLoaded(tile);
-      var tileChildLoaded = this.isTileChildLoaded(tile);
-      var tileParentLoaded = this.isTileParentLoaded(tile);
-      return tileLoaded && tileChildLoaded && tileParentLoaded;
-    }
   }, {
     key: "destroy",
-    value: function destroy() {
-      this.tileCache.clear();
-      this.tileLayerCache.clear();
-    }
+    value: function destroy() {}
   }]);
   return Base;
 }();

package/lib/tile/manager/layerManager.js

@@ -0,0 +1,275 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TileLayerManager = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _base = require("./base");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _utils = require("../utils");
+
+var _TileStyleService = require("../style/TileStyleService");
+
+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 (_Base) {
+  (0, _inherits2.default)(TileLayerManager, _Base);
+
+  var _super = _createSuper(TileLayerManager);
+
+  function TileLayerManager(parent, mapService, rendererService, pickingService, transforms) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TileLayerManager);
+    _this = _super.call(this);
+    _this.parent = parent;
+    _this.children = parent.layerChildren;
+    _this.mapService = mapService;
+    _this.rendererService = rendererService;
+    _this.transforms = transforms;
+    _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();
+
+    _this.setConfigListener();
+
+    _this.initTileFactory();
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TileLayerManager, [{
+    key: "render",
+    value: function render() {
+      this.tileStyleService.checkConfig(this.parent);
+      this.tileRenderService.render(this.children);
+    }
+  }, {
+    key: "pickLayers",
+    value: function pickLayers(target) {
+      return this.tilePickService.pick(this.children, target);
+    }
+  }, {
+    key: "setSubLayerInitOption",
+    value: function setSubLayerInitOption() {
+      var _source$data;
+
+      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$clampLow = _ref.clampLow,
+          clampLow = _ref$clampLow === void 0 ? true : _ref$clampLow,
+          _ref$clampHigh = _ref.clampHigh,
+          clampHigh = _ref$clampHigh === void 0 ? true : _ref$clampHigh,
+          _ref$domain = _ref.domain,
+          domain = _ref$domain === void 0 ? [0, 1] : _ref$domain,
+          _ref$rampColors = _ref.rampColors,
+          rampColors = _ref$rampColors === void 0 ? {
+        colors: ['rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)'],
+        positions: [0, 0.25, 0.5, 0.75, 1.0]
+      } : _ref$rampColors,
+          _ref$featureId = _ref.featureId,
+          featureId = _ref$featureId === void 0 ? 'id' : _ref$featureId,
+          _ref$workerEnabled = _ref.workerEnabled,
+          workerEnabled = _ref$workerEnabled === void 0 ? false : _ref$workerEnabled,
+          sourceLayer = _ref.sourceLayer,
+          _ref$pixelConstant = _ref.pixelConstant,
+          pixelConstant = _ref$pixelConstant === void 0 ? 0 : _ref$pixelConstant,
+          _ref$pixelConstantR = _ref.pixelConstantR,
+          pixelConstantR = _ref$pixelConstantR === void 0 ? 256 * 256 : _ref$pixelConstantR,
+          _ref$pixelConstantG = _ref.pixelConstantG,
+          pixelConstantG = _ref$pixelConstantG === void 0 ? 256 : _ref$pixelConstantG,
+          _ref$pixelConstantB = _ref.pixelConstantB,
+          pixelConstantB = _ref$pixelConstantB === void 0 ? 1 : _ref$pixelConstantB,
+          _ref$pixelConstantRGB = _ref.pixelConstantRGB,
+          pixelConstantRGB = _ref$pixelConstantRGB === void 0 ? 0.1 : _ref$pixelConstantRGB;
+
+      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) || {},
+          coords = _ref2.coords;
+
+      var parentParserType = source.getParserType();
+      var layerShape = (0, _utils.getLayerShape)(this.parent.type, this.parent);
+      this.initOptions = {
+        layerType: this.parent.type,
+        transforms: this.transforms,
+        shape: layerShape,
+        zIndex: zIndex,
+        opacity: opacity,
+        sourceLayer: this.getSourceLayer(parentParserType, sourceLayer),
+        coords: coords,
+        featureId: featureId,
+        color: colorValue,
+        size: sizeValue,
+        mask: (0, _utils.getMaskValue)(this.parent.type, mask),
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        strokeOpacity: strokeOpacity,
+        // raster tiff
+        clampLow: clampLow,
+        clampHigh: clampHigh,
+        domain: domain,
+        rampColors: rampColors,
+        // worker
+        workerEnabled: workerEnabled,
+        pixelConstant: pixelConstant,
+        pixelConstantR: pixelConstantR,
+        pixelConstantG: pixelConstantG,
+        pixelConstantB: pixelConstantB,
+        pixelConstantRGB: pixelConstantRGB
+      };
+
+      if (rampColors) {
+        // 构建统一的色带贴图
+        var createTexture2D = this.rendererService.createTexture2D;
+        var imageData = (0, _l7Utils.generateColorRamp)(rampColors);
+        var colorTexture = createTexture2D({
+          data: imageData.data,
+          width: imageData.width,
+          height: imageData.height,
+          flipY: false
+        });
+        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;
+
+      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) {
+          return _this2.updateStyle(key);
+        });
+      });
+    }
+  }, {
+    key: "updateAttribute",
+    value: function updateAttribute(style) {
+      var _this3 = this;
+
+      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;
+
+        if (!scaleValue) {
+          return;
+        }
+
+        this.children.map(function (child) {
+          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();
+
+        if (!(style in layerConfig)) {
+          return;
+        } // @ts-ignore
+
+
+        var config = layerConfig[style];
+        updateValue = config;
+
+        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.setInitOptionValue(style, updateValue);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.tilePickService.destroy();
+    }
+  }]);
+  return TileLayerManager;
+}(_base.Base);
+
+exports.TileLayerManager = TileLayerManager;