@antv/l7-layers 2.10.6 → 2.10.9

package/lib/point/models/text.js

@@ -107,85 +107,55 @@ var TextModel = /*#__PURE__*/function (_BaseModel) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "textureHeight", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "textCount", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preTextStyle", {});
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildModels", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(callbackModel) {
-        var _ref2, _ref2$mask, mask, _ref2$maskInside, maskInside;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mapping", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _this.initGlyph(); //
 
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _ref2 = _this.layer.getLayerConfig(), _ref2$mask = _ref2.mask, mask = _ref2$mask === void 0 ? false : _ref2$mask, _ref2$maskInside = _ref2.maskInside, maskInside = _ref2$maskInside === void 0 ? true : _ref2$maskInside;
 
-                _this.mapping();
+              _this.updateTexture();
 
-                _this.layer.buildLayerModel({
-                  moduleName: 'pointText',
-                  vertexShader: textVert,
-                  fragmentShader: textFrag,
-                  triangulation: TextTriangulation.bind((0, _assertThisInitialized2.default)(_this)),
-                  depth: {
-                    enable: false
-                  },
-                  blend: _this.getBlend(),
-                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
-                }).then(function (model) {
-                  callbackModel([model]);
-                }).catch(function (err) {
-                  console.warn(err);
-                  callbackModel([]);
-                });
+              _context.next = 4;
+              return _this.reBuildModel();
 
-              case 3:
-              case "end":
-                return _context.stop();
-            }
+            case 4:
+            case "end":
+              return _context.stop();
           }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mapping", function () {
-      _this.initGlyph();
-
-      _this.updateTexture();
-
-      _this.filterGlyphs();
-
-      _this.reBuildModel();
-    });
+        }
+      }, _callee);
+    })));
     return _this;
   }
 
   (0, _createClass2.default)(TextModel, [{
     key: "getUninforms",
     value: function getUninforms() {
-      var _ref3 = this.layer.getLayerConfig(),
-          _ref3$opacity = _ref3.opacity,
-          opacity = _ref3$opacity === void 0 ? 1.0 : _ref3$opacity,
-          _ref3$stroke = _ref3.stroke,
-          stroke = _ref3$stroke === void 0 ? '#fff' : _ref3$stroke,
-          _ref3$strokeWidth = _ref3.strokeWidth,
-          strokeWidth = _ref3$strokeWidth === void 0 ? 0 : _ref3$strokeWidth,
-          _ref3$textAnchor = _ref3.textAnchor,
-          textAnchor = _ref3$textAnchor === void 0 ? 'center' : _ref3$textAnchor,
-          _ref3$textAllowOverla = _ref3.textAllowOverlap,
-          textAllowOverlap = _ref3$textAllowOverla === void 0 ? false : _ref3$textAllowOverla,
-          _ref3$halo = _ref3.halo,
-          halo = _ref3$halo === void 0 ? 0.5 : _ref3$halo,
-          _ref3$gamma = _ref3.gamma,
-          gamma = _ref3$gamma === void 0 ? 2.0 : _ref3$gamma,
-          _ref3$raisingHeight = _ref3.raisingHeight,
-          raisingHeight = _ref3$raisingHeight === void 0 ? 0 : _ref3$raisingHeight;
+      var _ref2 = this.layer.getLayerConfig(),
+          _ref2$opacity = _ref2.opacity,
+          opacity = _ref2$opacity === void 0 ? 1.0 : _ref2$opacity,
+          _ref2$stroke = _ref2.stroke,
+          stroke = _ref2$stroke === void 0 ? '#fff' : _ref2$stroke,
+          _ref2$strokeWidth = _ref2.strokeWidth,
+          strokeWidth = _ref2$strokeWidth === void 0 ? 0 : _ref2$strokeWidth,
+          _ref2$textAnchor = _ref2.textAnchor,
+          textAnchor = _ref2$textAnchor === void 0 ? 'center' : _ref2$textAnchor,
+          _ref2$textAllowOverla = _ref2.textAllowOverlap,
+          textAllowOverlap = _ref2$textAllowOverla === void 0 ? false : _ref2$textAllowOverla,
+          _ref2$halo = _ref2.halo,
+          halo = _ref2$halo === void 0 ? 0.5 : _ref2$halo,
+          _ref2$gamma = _ref2.gamma,
+          gamma = _ref2$gamma === void 0 ? 2.0 : _ref2$gamma,
+          _ref2$raisingHeight = _ref2.raisingHeight,
+          raisingHeight = _ref2$raisingHeight === void 0 ? 0 : _ref2$raisingHeight;
 
       var _this$fontService = this.fontService,
           canvas = _this$fontService.canvas,
           mapping = _this$fontService.mapping;
 
-      if (Object.keys(mapping).length !== this.textCount) {
+      if (mapping && Object.keys(mapping).length !== this.textCount && canvas) {
         this.updateTexture();
         this.textCount = Object.keys(mapping).length;
       }
@@ -242,40 +212,122 @@ var TextModel = /*#__PURE__*/function (_BaseModel) {
         u_sdf_map: this.texture,
         u_halo_blur: halo,
         u_gamma_scale: gamma,
-        u_sdf_map_size: [canvas.width, canvas.height]
+        u_sdf_map_size: [(canvas === null || canvas === void 0 ? void 0 : canvas.width) || 1, (canvas === null || canvas === void 0 ? void 0 : canvas.height) || 1]
       };
     }
   }, {
     key: "initModels",
-    value: function initModels(callbackModel) {
-      this.layer.on('remapping', this.mapping);
-      this.extent = this.textExtent();
+    value: function () {
+      var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _ref3, _ref3$textAnchor, textAnchor, _ref3$textAllowOverla, textAllowOverlap;
+
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                // 绑定事件
+                if (!this.layer.inited) {
+                  this.bindEvent();
+                }
+
+                this.extent = this.textExtent();
+                _ref3 = this.layer.getLayerConfig(), _ref3$textAnchor = _ref3.textAnchor, textAnchor = _ref3$textAnchor === void 0 ? 'center' : _ref3$textAnchor, _ref3$textAllowOverla = _ref3.textAllowOverlap, textAllowOverlap = _ref3$textAllowOverla === void 0 ? true : _ref3$textAllowOverla;
+                this.preTextStyle = {
+                  textAnchor: textAnchor,
+                  textAllowOverlap: textAllowOverlap
+                };
+                _context2.next = 6;
+                return this.buildModels();
+
+              case 6:
+                return _context2.abrupt("return", _context2.sent);
+
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
 
-      var _ref4 = this.layer.getLayerConfig(),
-          _ref4$textAnchor = _ref4.textAnchor,
-          textAnchor = _ref4$textAnchor === void 0 ? 'center' : _ref4$textAnchor,
-          _ref4$textAllowOverla = _ref4.textAllowOverlap,
-          textAllowOverlap = _ref4$textAllowOverla === void 0 ? true : _ref4$textAllowOverla;
+      function initModels() {
+        return _initModels.apply(this, arguments);
+      }
 
-      this.preTextStyle = {
-        textAnchor: textAnchor,
-        textAllowOverlap: textAllowOverlap
-      };
-      this.buildModels(callbackModel);
-    }
+      return initModels;
+    }()
+  }, {
+    key: "buildModels",
+    value: function () {
+      var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var _ref4, _ref4$mask, mask, _ref4$maskInside, maskInside, _ref4$textAllowOverla, textAllowOverlap, model;
+
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _ref4 = this.layer.getLayerConfig(), _ref4$mask = _ref4.mask, mask = _ref4$mask === void 0 ? false : _ref4$mask, _ref4$maskInside = _ref4.maskInside, maskInside = _ref4$maskInside === void 0 ? true : _ref4$maskInside, _ref4$textAllowOverla = _ref4.textAllowOverlap, textAllowOverlap = _ref4$textAllowOverla === void 0 ? false : _ref4$textAllowOverla; //  this.mapping(); 重复调用
+
+                this.initGlyph(); //
+
+                this.updateTexture();
+
+                if (!textAllowOverlap) {
+                  this.filterGlyphs();
+                }
+
+                _context3.next = 6;
+                return this.layer.buildLayerModel({
+                  moduleName: 'pointText',
+                  vertexShader: textVert,
+                  fragmentShader: textFrag,
+                  triangulation: TextTriangulation.bind(this),
+                  depth: {
+                    enable: false
+                  },
+                  blend: this.getBlend(),
+                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                });
+
+              case 6:
+                model = _context3.sent;
+                return _context3.abrupt("return", [model]);
+
+              case 8:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function buildModels() {
+        return _buildModels.apply(this, arguments);
+      }
+
+      return buildModels;
+    }()
   }, {
     key: "needUpdate",
     value: function needUpdate() {
       var _ref5 = this.layer.getLayerConfig(),
           _ref5$textAllowOverla = _ref5.textAllowOverlap,
-          textAllowOverlap = _ref5$textAllowOverla === void 0 ? false : _ref5$textAllowOverla; // textAllowOverlap 发生改变
+          textAllowOverlap = _ref5$textAllowOverla === void 0 ? false : _ref5$textAllowOverla;
+
+      var data = this.layer.getEncodedData();
+
+      if (data.length < 5 || textAllowOverlap) {
+        // 小于不做避让
+        return false;
+      } // textAllowOverlap 发生改变
 
 
       var zoom = this.mapService.getZoom();
       var extent = this.mapService.getBounds();
       var flag = (0, _l7Utils.boundsContains)(this.extent, extent); // 文本不能压盖则进行过滤
 
-      if (!textAllowOverlap && (Math.abs(this.currentZoom - zoom) > 1 || !flag) || textAllowOverlap !== this.preTextStyle.textAllowOverlap) {
+      if (Math.abs(this.currentZoom - zoom) > 1 || !flag || textAllowOverlap !== this.preTextStyle.textAllowOverlap) {
+        // TODO this.mapping 数据未变化，避让
         this.reBuildModel();
         return true;
       }
@@ -288,7 +340,8 @@ var TextModel = /*#__PURE__*/function (_BaseModel) {
       var _this$texture, _this$dataTexture;
 
       (_this$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
-      (_this$dataTexture = this.dataTexture) === null || _this$dataTexture === void 0 ? void 0 : _this$dataTexture.destroy();
+      (_this$dataTexture = this.dataTexture) === null || _this$dataTexture === void 0 ? void 0 : _this$dataTexture.destroy(); // TODO this.mapping
+
       this.layer.off('remapping', this.mapping);
     }
   }, {
@@ -366,6 +419,14 @@ var TextModel = /*#__PURE__*/function (_BaseModel) {
         }
       });
     }
+  }, {
+    key: "bindEvent",
+    value: function bindEvent() {
+      if (!this.layer.isTileLayer) {
+        // 重新绑定
+        this.layer.on('remapping', this.mapping);
+      }
+    }
   }, {
     key: "textExtent",
     value: function textExtent() {
@@ -530,7 +591,7 @@ var TextModel = /*#__PURE__*/function (_BaseModel) {
 
         var centroid = feature.version === 'GAODE2.x' ? feature.originCentroid : feature.centroid;
         var size = feature.size;
-        var fontScale = size / 24;
+        var fontScale = size / 16;
 
         var pixels = _this3.mapService.lngLatToContainer(centroid);
 
@@ -598,35 +659,48 @@ var TextModel = /*#__PURE__*/function (_BaseModel) {
     }
   }, {
     key: "reBuildModel",
-    value: function reBuildModel() {
-      var _this4 = this;
-
-      var _ref10 = this.layer.getLayerConfig(),
-          _ref10$mask = _ref10.mask,
-          mask = _ref10$mask === void 0 ? false : _ref10$mask,
-          _ref10$maskInside = _ref10.maskInside,
-          maskInside = _ref10$maskInside === void 0 ? true : _ref10$maskInside;
-
-      this.filterGlyphs();
-      this.layer.buildLayerModel({
-        moduleName: 'pointText',
-        vertexShader: textVert,
-        fragmentShader: textFrag,
-        triangulation: TextTriangulation.bind(this),
-        depth: {
-          enable: false
-        },
-        blend: this.getBlend(),
-        stencil: (0, _l7Utils.getMask)(mask, maskInside)
-      }).then(function (model) {
-        _this4.layer.models = [model];
-
-        _this4.layerService.throttleRenderLayers();
-      }).catch(function (err) {
-        console.warn(err);
-        _this4.layer.models = [];
-      });
-    }
+    value: function () {
+      var _reBuildModel = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+        var _ref10, _ref10$mask, mask, _ref10$maskInside, maskInside, model;
+
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _ref10 = this.layer.getLayerConfig(), _ref10$mask = _ref10.mask, mask = _ref10$mask === void 0 ? false : _ref10$mask, _ref10$maskInside = _ref10.maskInside, maskInside = _ref10$maskInside === void 0 ? true : _ref10$maskInside;
+                this.filterGlyphs();
+                _context4.next = 4;
+                return this.layer.buildLayerModel({
+                  moduleName: 'pointText',
+                  vertexShader: textVert,
+                  fragmentShader: textFrag,
+                  triangulation: TextTriangulation.bind(this),
+                  depth: {
+                    enable: false
+                  },
+                  blend: this.getBlend(),
+                  stencil: (0, _l7Utils.getMask)(mask, maskInside)
+                });
+
+              case 4:
+                model = _context4.sent;
+                // TODO 渲染流程待修改
+                this.layer.models = [model]; // this.layerService.throttleRenderLayers();
+
+              case 6:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this);
+      }));
+
+      function reBuildModel() {
+        return _reBuildModel.apply(this, arguments);
+      }
+
+      return reBuildModel;
+    }()
   }]);
   return TextModel;
 }(_BaseModel2.default);

package/lib/point/models/tile.js

@@ -7,6 +7,10 @@ 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"));
@@ -76,43 +80,83 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
     }
   }, {
     key: "initModels",
-    value: function initModels(callbackModel) {
-      this.buildModels(callbackModel);
-    }
+    value: function () {
+      var _initModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return this.buildModels();
+
+              case 2:
+                return _context.abrupt("return", _context.sent);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function initModels() {
+        return _initModels.apply(this, arguments);
+      }
+
+      return initModels;
+    }()
   }, {
     key: "buildModels",
-    value: function buildModels(callbackModel) {
-      var _ref2 = this.layer.getLayerConfig(),
-          _ref2$workerEnabled = _ref2.workerEnabled,
-          workerEnabled = _ref2$workerEnabled === void 0 ? false : _ref2$workerEnabled,
-          usage = _ref2.usage;
-
-      this.layer.triangulation = _triangulation.PointFillTriangulation;
-      this.layer.buildLayerModel({
-        moduleName: 'pointTile_' + usage,
-        vertexShader: point_tile_vert,
-        fragmentShader: point_tile_frag,
-        triangulation: _triangulation.PointFillTriangulation,
-        depth: {
-          enable: false
-        },
-        cull: {
-          enable: true,
-          face: (0, _l7Utils.getCullFace)(this.mapService.version)
-        },
-        blend: this.getBlend(),
-        workerEnabled: workerEnabled,
-        workerOptions: {
-          modelType: 'pointTile'
-        },
-        pick: usage !== 'basemap'
-      }).then(function (model) {
-        callbackModel([model]);
-      }).catch(function (err) {
-        console.warn(err);
-        callbackModel([]);
-      });
-    }
+    value: function () {
+      var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _ref2, _ref2$workerEnabled, workerEnabled, usage, model;
+
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _ref2 = this.layer.getLayerConfig(), _ref2$workerEnabled = _ref2.workerEnabled, workerEnabled = _ref2$workerEnabled === void 0 ? false : _ref2$workerEnabled, usage = _ref2.usage;
+                this.layer.triangulation = _triangulation.PointFillTriangulation;
+                _context2.next = 4;
+                return this.layer.buildLayerModel({
+                  moduleName: 'pointTile_' + usage,
+                  vertexShader: point_tile_vert,
+                  fragmentShader: point_tile_frag,
+                  triangulation: _triangulation.PointFillTriangulation,
+                  depth: {
+                    enable: false
+                  },
+                  cull: {
+                    enable: true,
+                    face: (0, _l7Utils.getCullFace)(this.mapService.version)
+                  },
+                  blend: this.getBlend(),
+                  workerEnabled: workerEnabled,
+                  workerOptions: {
+                    modelType: 'pointTile'
+                  },
+                  pick: usage !== 'basemap'
+                });
+
+              case 4:
+                model = _context2.sent;
+                return _context2.abrupt("return", [model]);
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function buildModels() {
+        return _buildModels.apply(this, arguments);
+      }
+
+      return buildModels;
+    }()
   }, {
     key: "clearModels",
     value: function clearModels() {}