@antv/l7-layers 2.14.1 → 2.14.3

package/lib/tile/tileLayer/BaseLayer.js

@@ -32,8 +32,46 @@ var _tileFactory = require("../tileFactory");
 var BaseTileLayer = /*#__PURE__*/function () {
   // 瓦片数据管理器
   function BaseTileLayer(parent) {
+    var _this = this;
+
     (0, _classCallCheck2.default)(this, BaseTileLayer);
     (0, _defineProperty2.default)(this, "initedTileset", false);
+    (0, _defineProperty2.default)(this, "mapchange", function () {
+      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 < 2 && visible) {
+          _this.parent.updateLayerConfig({
+            visible: false
+          });
+
+          _this.layerService.reRender();
+        } else if (zoom >= 2 && !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);
+    });
     (0, _defineProperty2.default)(this, "viewchange", (0, _lodash.debounce)(this.mapchange, 24));
     this.parent = parent;
     var container = this.parent.getContainer();
@@ -62,7 +100,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
   (0, _createClass2.default)(BaseTileLayer, [{
     key: "initTileSetManager",
     value: function initTileSetManager() {
-      var _this$tilesetManager;
+      var _this$tilesetManager2;
 
       var source = this.parent.getSource();
       this.tilesetManager = source.tileset;
@@ -72,47 +110,11 @@ var BaseTileLayer = /*#__PURE__*/function () {
         this.initedTileset = true;
       }
 
-      var _this$getCurrentView = this.getCurrentView(),
-          latLonBounds = _this$getCurrentView.latLonBounds,
-          zoom = _this$getCurrentView.zoom;
-
-      (_this$tilesetManager = this.tilesetManager) === null || _this$tilesetManager === void 0 ? void 0 : _this$tilesetManager.update(zoom, latLonBounds);
-    }
-  }, {
-    key: "mapchange",
-    value: function mapchange() {
-      var _this$tilesetManager2;
-
       var _this$getCurrentView2 = this.getCurrentView(),
           latLonBounds = _this$getCurrentView2.latLonBounds,
           zoom = _this$getCurrentView2.zoom;
 
-      if (this.mapService.version === 'GAODE1.x') {
-        var _this$parent$getLayer = this.parent.getLayerConfig(),
-            visible = _this$parent$getLayer.visible;
-
-        if (zoom < 2 && visible) {
-          this.parent.updateLayerConfig({
-            visible: false
-          });
-          this.layerService.reRender();
-        } else if (zoom >= 2 && !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$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 ? void 0 : _this$tilesetManager2.throttleUpdate(zoom, latLonBounds);
+      (_this$tilesetManager2 = this.tilesetManager) === null || _this$tilesetManager2 === void 0 ? void 0 : _this$tilesetManager2.update(zoom, latLonBounds);
     }
   }, {
     key: "getCurrentView",
@@ -128,7 +130,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
   }, {
     key: "bindTilesetEvent",
     value: function bindTilesetEvent() {
-      var _this = this;
+      var _this2 = this;
 
       // 瓦片数据加载成功
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -137,25 +139,21 @@ var BaseTileLayer = /*#__PURE__*/function () {
 
       this.tilesetManager.on('tile-unload', function (tile) {
         // 将事件抛出，图层上可以监听使用
-        _this.tileUnLoad(tile);
+        _this2.tileUnLoad(tile);
       }); // 瓦片数据加载失败
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
       this.tilesetManager.on('tile-error', function (error, tile) {
         // 将事件抛出，图层上可以监听使用
-        _this.tileError(error);
+        _this2.tileError(error);
       }); // 瓦片显隐状态更新
 
       this.tilesetManager.on('tile-update', function () {
-        _this.tileUpdate();
+        _this2.tileUpdate();
       }); // 地图视野发生改变
 
-      this.mapService.on('zoomend', function () {
-        return _this.mapchange();
-      });
-      this.mapService.on('moveend', function () {
-        return _this.viewchange();
-      });
+      this.mapService.on('zoomend', this.mapchange);
+      this.mapService.on('moveend', this.viewchange);
     }
   }, {
     key: "render",
@@ -171,6 +169,11 @@ var BaseTileLayer = /*#__PURE__*/function () {
     key: "getTiles",
     value: function getTiles() {
       return this.tileLayerService.getTiles();
+    }
+  }, {
+    key: "getTile",
+    value: function getTile(key) {
+      return this.tileLayerService.getTile(key);
     } //  防抖操作
 
   }, {
@@ -188,6 +191,8 @@ var BaseTileLayer = /*#__PURE__*/function () {
     value: function destroy() {
       var _this$tilesetManager3;
 
+      this.mapService.off('zoomend', this.mapchange);
+      this.mapService.off('moveend', this.viewchange);
       (_this$tilesetManager3 = this.tilesetManager) === null || _this$tilesetManager3 === void 0 ? void 0 : _this$tilesetManager3.destroy();
       this.tileLayerService.destroy();
     }
@@ -200,7 +205,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
     key: "tileUpdate",
     value: function () {
       var _tileUpdate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _this2 = this;
+        var _this3 = this;
 
         var minZoom, maxZoom;
         return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -235,25 +240,25 @@ var BaseTileLayer = /*#__PURE__*/function () {
                       while (1) {
                         switch (_context.prev = _context.next) {
                           case 0:
-                            if (_this2.tileLayerService.hasTile(tile.key)) {
+                            if (_this3.tileLayerService.hasTile(tile.key)) {
                               _context.next = 9;
                               break;
                             }
 
-                            tileInstance = (0, _tileFactory.getTileFactory)(_this2.parent);
-                            tileLayer = new tileInstance(tile, _this2.parent);
+                            tileInstance = (0, _tileFactory.getTileFactory)(_this3.parent);
+                            tileLayer = new tileInstance(tile, _this3.parent);
                             _context.next = 5;
                             return tileLayer.initTileLayer();
 
                           case 5:
-                            _this2.tilePickService.setPickState();
+                            _this3.tilePickService.setPickState();
 
                             if (tileLayer.getLayers().length !== 0) {
-                              _this2.tileLayerService.addTile(tileLayer);
+                              _this3.tileLayerService.addTile(tileLayer);
 
-                              _this2.tileLayerService.updateTileVisible(tile);
+                              _this3.tileLayerService.updateTileVisible(tile);
 
-                              _this2.layerService.reRender();
+                              _this3.layerService.reRender();
                             }
 
                             _context.next = 12;
@@ -261,11 +266,11 @@ var BaseTileLayer = /*#__PURE__*/function () {
 
                           case 9:
                             // 已加载瓦片
-                            _this2.tileLayerService.updateTileVisible(tile);
+                            _this3.tileLayerService.updateTileVisible(tile);
 
-                            _this2.tilePickService.setPickState();
+                            _this3.tilePickService.setPickState();
 
-                            _this2.layerService.reRender();
+                            _this3.layerService.reRender();
 
                           case 12:
                           case "end":
@@ -329,7 +334,7 @@ var BaseTileLayer = /*#__PURE__*/function () {
   }, {
     key: "proxy",
     value: function proxy(parent) {
-      var _this3 = this;
+      var _this4 = this;
 
       _constants.ProxyFuncs.forEach(function (func) {
         // @ts-ignore
@@ -342,14 +347,14 @@ var BaseTileLayer = /*#__PURE__*/function () {
 
           oldStyleFunc.apply(void 0, args);
 
-          _this3.getLayers().map(function (child) {
+          _this4.getLayers().map(function (child) {
             // @ts-ignore
             child[func].apply(child, args);
           }); // Tip: 目前在更新 RasterData 的 colorTexture 的时候需要额外优化
 
 
           if (func === 'style') {
-            _this3.getTiles().forEach(function (tile) {
+            _this4.getTiles().forEach(function (tile) {
               return tile.styleUpdate.apply(tile, args);
             });
           }

package/lib/utils/stencil.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStencil = getStencil;
+exports.getStencilMask = getStencilMask;
+
+var _l7Core = require("@antv/l7-core");
+
+// 掩膜配置
+function getStencil(mask, maskInside) {
+  return {
+    enable: mask,
+    mask: 0xff,
+    func: {
+      cmp: _l7Core.gl.EQUAL,
+      // gl.EQUAL,
+      ref: maskInside ? 1 : 0,
+      mask: 1
+    }
+  };
+}
+
+// 模版配置
+function getStencilMask(option) {
+  if (option.maskOperation === _l7Core.MaskOperation.OR) {
+    return {
+      enable: true,
+      mask: 0xff,
+      func: {
+        cmp: _l7Core.gl.ALWAYS,
+        ref: 1,
+        mask: 0xff
+      },
+      opFront: {
+        fail: _l7Core.gl.KEEP,
+        zfail: _l7Core.gl.REPLACE,
+        zpass: _l7Core.gl.REPLACE
+      }
+    };
+  }
+
+  return {
+    enable: true,
+    mask: 0xff,
+    func: {
+      cmp: option.stencilType === _l7Core.StencilType.SINGLE // 单层
+      ? _l7Core.gl.ALWAYS : option.stencilIndex === 0 // 多层
+      ? _l7Core.gl.ALWAYS : _l7Core.gl.LESS,
+      ref: option.stencilType === _l7Core.StencilType.SINGLE ? 1 : option.stencilIndex === 0 ? 2 : 1,
+      mask: 0xff
+    },
+    opFront: {
+      fail: _l7Core.gl.KEEP,
+      zfail: _l7Core.gl.REPLACE,
+      zpass: _l7Core.gl.REPLACE
+    }
+  };
+}

package/lib/wind/index.js

@@ -83,8 +83,10 @@ var WindLayer = /*#__PURE__*/function (_BaseLayer) {
   }, {
     key: "renderModels",
     value: function renderModels() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
       if (this.layerModel) {
-        this.layerModel.render(); // 独立的渲染流程
+        this.layerModel.render(options); // 独立的渲染流程
       }
 
       return this;

package/lib/wind/models/wind.js

@@ -77,14 +77,14 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
 
   (0, _createClass2.default)(WindModel, [{
     key: "render",
-    value: function render() {
+    value: function render(options) {
       var _this2 = this;
 
-      // Tip: 控制风场的平均更新频率
+      this.drawColorMode(options); // Tip: 控制风场的平均更新频率
+
       this.frequency.run(function () {
         _this2.drawWind();
       });
-      this.drawColorMode();
     }
   }, {
     key: "getUninforms",
@@ -100,13 +100,13 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
             _source$data2$images,
             _this3 = this;
 
-        var _ref, _ref$uMin, uMin, _ref$uMax, uMax, _ref$vMin, vMin, _ref$vMax, vMax, _ref$fadeOpacity, fadeOpacity, _ref$speedFactor, speedFactor, _ref$dropRate, dropRate, _ref$dropRateBump, dropRateBump, _ref$rampColors, rampColors, _ref$sizeScale, sizeScale, _ref$mask, mask, _ref$maskInside, maskInside, createTexture2D, source, glContext, model;
+        var _ref, _ref$uMin, uMin, _ref$uMax, uMax, _ref$vMin, vMin, _ref$vMax, vMax, _ref$fadeOpacity, fadeOpacity, _ref$speedFactor, speedFactor, _ref$dropRate, dropRate, _ref$dropRateBump, dropRateBump, _ref$rampColors, rampColors, _ref$sizeScale, sizeScale, createTexture2D, source, glContext, model;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _ref = this.layer.getLayerConfig(), _ref$uMin = _ref.uMin, uMin = _ref$uMin === void 0 ? -21.32 : _ref$uMin, _ref$uMax = _ref.uMax, uMax = _ref$uMax === void 0 ? 26.8 : _ref$uMax, _ref$vMin = _ref.vMin, vMin = _ref$vMin === void 0 ? -21.57 : _ref$vMin, _ref$vMax = _ref.vMax, vMax = _ref$vMax === void 0 ? 21.42 : _ref$vMax, _ref$fadeOpacity = _ref.fadeOpacity, fadeOpacity = _ref$fadeOpacity === void 0 ? 0.996 : _ref$fadeOpacity, _ref$speedFactor = _ref.speedFactor, speedFactor = _ref$speedFactor === void 0 ? 0.25 : _ref$speedFactor, _ref$dropRate = _ref.dropRate, dropRate = _ref$dropRate === void 0 ? 0.003 : _ref$dropRate, _ref$dropRateBump = _ref.dropRateBump, dropRateBump = _ref$dropRateBump === void 0 ? 0.01 : _ref$dropRateBump, _ref$rampColors = _ref.rampColors, rampColors = _ref$rampColors === void 0 ? defaultRampColors : _ref$rampColors, _ref$sizeScale = _ref.sizeScale, sizeScale = _ref$sizeScale === void 0 ? 0.5 : _ref$sizeScale, _ref$mask = _ref.mask, mask = _ref$mask === void 0 ? false : _ref$mask, _ref$maskInside = _ref.maskInside, maskInside = _ref$maskInside === void 0 ? true : _ref$maskInside;
+                _ref = this.layer.getLayerConfig(), _ref$uMin = _ref.uMin, uMin = _ref$uMin === void 0 ? -21.32 : _ref$uMin, _ref$uMax = _ref.uMax, uMax = _ref$uMax === void 0 ? 26.8 : _ref$uMax, _ref$vMin = _ref.vMin, vMin = _ref$vMin === void 0 ? -21.57 : _ref$vMin, _ref$vMax = _ref.vMax, vMax = _ref$vMax === void 0 ? 21.42 : _ref$vMax, _ref$fadeOpacity = _ref.fadeOpacity, fadeOpacity = _ref$fadeOpacity === void 0 ? 0.996 : _ref$fadeOpacity, _ref$speedFactor = _ref.speedFactor, speedFactor = _ref$speedFactor === void 0 ? 0.25 : _ref$speedFactor, _ref$dropRate = _ref.dropRate, dropRate = _ref$dropRate === void 0 ? 0.003 : _ref$dropRate, _ref$dropRateBump = _ref.dropRateBump, dropRateBump = _ref$dropRateBump === void 0 ? 0.01 : _ref$dropRateBump, _ref$rampColors = _ref.rampColors, rampColors = _ref$rampColors === void 0 ? defaultRampColors : _ref$rampColors, _ref$sizeScale = _ref.sizeScale, sizeScale = _ref$sizeScale === void 0 ? 0.5 : _ref$sizeScale;
                 createTexture2D = this.rendererService.createTexture2D;
                 source = this.layer.getSource();
                 this.texture = createTexture2D({
@@ -162,9 +162,7 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
                   primitive: _l7Core.gl.TRIANGLES,
                   depth: {
                     enable: false
-                  },
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside),
-                  blend: this.getBlend()
+                  }
                 });
 
               case 10:
@@ -328,6 +326,8 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
     value: function drawColorMode() {
       var _this$colorModel;
 
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
       var _ref3 = this.layer.getLayerConfig(),
           opacity = _ref3.opacity;
 
@@ -338,7 +338,9 @@ var WindModel = /*#__PURE__*/function (_BaseModel) {
         uniforms: {
           u_opacity: opacity || 1.0,
           u_texture: this.texture
-        }
+        },
+        blend: this.getBlend(),
+        stencil: this.getStencil(options)
       });
       this.layer.hooks.afterRender.call();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.14.1",
+  "version": "2.14.3",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -27,10 +27,10 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.2.9",
-    "@antv/l7-core": "2.14.1",
-    "@antv/l7-maps": "2.14.1",
-    "@antv/l7-source": "2.14.1",
-    "@antv/l7-utils": "2.14.1",
+    "@antv/l7-core": "2.14.3",
+    "@antv/l7-maps": "2.14.3",
+    "@antv/l7-source": "2.14.3",
+    "@antv/l7-utils": "2.14.3",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.2.0",
     "@turf/clone": "^6.5.0",
@@ -53,7 +53,7 @@
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.14.1",
+    "@antv/l7-test-utils": "2.14.3",
     "@types/d3-array": "^2.0.0",
     "@types/d3-color": "^1.2.2",
     "@types/d3-interpolate": "1.1.6",
@@ -62,7 +62,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "892e2cbffcaae6e5b2d0f62f90ad579f4eefd90c",
+  "gitHead": "1f2a9a2a15b32d0ec72f29d20fc1ac6a622e8c0d",
   "publishConfig": {
     "access": "public"
   }