@antv/l7-layers 2.21.0 → 2.21.2

package/es/geometry/models/sprite.js

@@ -1,289 +1,231 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 import { gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
 /* babel-plugin-inline-import '../shaders/sprite_frag.glsl' */
-var spriteFrag = "\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_Scale;\n};\nuniform sampler2D u_texture;\n\nin vec3 v_Color;\nin float v_d;\nout vec4 outputColor;\n\nvoid main() {\n\n  if(v_d < 0.0) {\n    discard;\n  }\n\n  if(u_mapFlag > 0.0) {\n    outputColor = texture(SAMPLER_2D(u_texture), gl_PointCoord);\n    outputColor.a *= u_opacity;\n  } else {\n    outputColor = vec4(v_Color, u_opacity);\n  }\n}\n";
+const spriteFrag = "\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_Scale;\n};\nuniform sampler2D u_texture;\n\nin vec3 v_Color;\nin float v_d;\nout vec4 outputColor;\n\nvoid main() {\n\n  if(v_d < 0.0) {\n    discard;\n  }\n\n  if(u_mapFlag > 0.0) {\n    outputColor = texture(SAMPLER_2D(u_texture), gl_PointCoord);\n    outputColor.a *= u_opacity;\n  } else {\n    outputColor = vec4(v_Color, u_opacity);\n  }\n}\n";
 /* babel-plugin-inline-import '../shaders/sprite_vert.glsl' */
-var spriteVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec3 a_Color;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_Scale;\n};\n\nout vec3 v_Color;\nout float v_d;\n\n#pragma include \"projection\"\nvoid main() {\n   v_Color = a_Color.xyz;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_d = a_Position.z;\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));\ngl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;\n}\n";
+const spriteVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec3 a_Color;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_Scale;\n};\n\nout vec3 v_Color;\nout float v_d;\n\n#pragma include \"projection\"\nvoid main() {\n   v_Color = a_Color.xyz;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_d = a_Position.z;\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));\ngl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;\n}\n";
 var SPRITE_ANIMATE_DIR = /*#__PURE__*/function (SPRITE_ANIMATE_DIR) {
   SPRITE_ANIMATE_DIR["UP"] = "up";
   SPRITE_ANIMATE_DIR["DOWN"] = "down";
   return SPRITE_ANIMATE_DIR;
 }(SPRITE_ANIMATE_DIR || {});
-var SpriteModel = /*#__PURE__*/function (_BaseModel) {
-  _inherits(SpriteModel, _BaseModel);
-  var _super = _createSuper(SpriteModel);
-  function SpriteModel() {
-    var _this;
-    _classCallCheck(this, SpriteModel);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "planeGeometryUpdateTriangulation", function () {
-      var _ref = _this.layer.getLayerConfig(),
-        _ref$spriteBottom = _ref.spriteBottom,
-        spriteBottom = _ref$spriteBottom === void 0 ? -100000 : _ref$spriteBottom;
-      var updateZ = _this.spriteUpdate;
-      var bottomZ = spriteBottom;
-      var topZ = _this.spriteTop;
-      for (var i = 0; i < _this.positions.length; i += 5) {
-        if (_this.spriteAnimate === SPRITE_ANIMATE_DIR.UP) {
-          _this.positions[i + 2] += updateZ;
-          if (_this.positions[i + 2] > topZ) {
-            _this.positions[i + 2] = bottomZ;
+export default class SpriteModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+    _defineProperty(this, "mapTexture", void 0);
+    _defineProperty(this, "positions", void 0);
+    _defineProperty(this, "indices", void 0);
+    _defineProperty(this, "timer", void 0);
+    _defineProperty(this, "spriteTop", void 0);
+    _defineProperty(this, "spriteUpdate", void 0);
+    _defineProperty(this, "spriteAnimate", void 0);
+    _defineProperty(this, "planeGeometryUpdateTriangulation", () => {
+      const {
+        spriteBottom = -100000
+      } = this.layer.getLayerConfig();
+      const updateZ = this.spriteUpdate;
+      const bottomZ = spriteBottom;
+      const topZ = this.spriteTop;
+      for (let i = 0; i < this.positions.length; i += 5) {
+        if (this.spriteAnimate === SPRITE_ANIMATE_DIR.UP) {
+          this.positions[i + 2] += updateZ;
+          if (this.positions[i + 2] > topZ) {
+            this.positions[i + 2] = bottomZ;
           }
         } else {
-          _this.positions[i + 2] -= updateZ;
-          if (_this.positions[i + 2] < bottomZ) {
-            _this.positions[i + 2] = topZ;
+          this.positions[i + 2] -= updateZ;
+          if (this.positions[i + 2] < bottomZ) {
+            this.positions[i + 2] = topZ;
           }
         }
       }
       return {
-        vertices: _this.positions,
-        indices: _this.indices,
+        vertices: this.positions,
+        indices: this.indices,
         size: 5
       };
     });
     /**
      * Recalculate and update position attribute.
      */
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
+    _defineProperty(this, "updatePosition", () => {
       var _this$styleAttributeS;
-      _this.planeGeometryUpdateTriangulation();
-      var vertexAttribute = (_this$styleAttributeS = _this.styleAttributeService.getLayerStyleAttribute('position')) === null || _this$styleAttributeS === void 0 ? void 0 : _this$styleAttributeS.vertexAttribute;
+      this.planeGeometryUpdateTriangulation();
+      const vertexAttribute = (_this$styleAttributeS = this.styleAttributeService.getLayerStyleAttribute('position')) === null || _this$styleAttributeS === void 0 ? void 0 : _this$styleAttributeS.vertexAttribute;
       if (vertexAttribute) {
         // [x1, y1, z1, x2, y2, z2...]
-        var updated = [];
-        for (var i = 0; i < _this.positions.length; i += 5) {
-          updated.push(_this.positions[i], _this.positions[i + 1], _this.positions[i + 2]);
+        const updated = [];
+        for (let i = 0; i < this.positions.length; i += 5) {
+          updated.push(this.positions[i], this.positions[i + 1], this.positions[i + 2]);
         }
         vertexAttribute.updateBuffer({
           data: updated,
           offset: 0
         });
       }
-      _this.layerService.throttleRenderLayers();
-      _this.timer = requestAnimationFrame(_this.updatePosition);
+      this.layerService.throttleRenderLayers();
+      this.timer = requestAnimationFrame(this.updatePosition);
     });
-    _defineProperty(_assertThisInitialized(_this), "planeGeometryTriangulation", function () {
-      var _this2;
-      var _ref2 = _this.layer.getLayerConfig(),
-        _ref2$center = _ref2.center,
-        center = _ref2$center === void 0 ? [120, 30] : _ref2$center,
-        _ref2$spriteCount = _ref2.spriteCount,
-        spriteCount = _ref2$spriteCount === void 0 ? 100 : _ref2$spriteCount,
-        _ref2$spriteRadius = _ref2.spriteRadius,
-        spriteRadius = _ref2$spriteRadius === void 0 ? 10 : _ref2$spriteRadius;
-      var _this$initSprite = (_this2 = _this).initSprite.apply(_this2, [spriteRadius, spriteCount].concat(_toConsumableArray(center))),
-        indices = _this$initSprite.indices,
-        positions = _this$initSprite.positions;
-      _this.positions = positions;
-      _this.indices = indices;
+    _defineProperty(this, "planeGeometryTriangulation", () => {
+      const {
+        center = [120, 30],
+        spriteCount = 100,
+        spriteRadius = 10
+      } = this.layer.getLayerConfig();
+      const {
+        indices,
+        positions
+      } = this.initSprite(spriteRadius, spriteCount, ...center);
+      this.positions = positions;
+      this.indices = indices;
       return {
         vertices: positions,
-        indices: indices,
+        indices,
         size: 5
       };
     });
-    return _this;
   }
-  _createClass(SpriteModel, [{
-    key: "initSprite",
-    value: function initSprite() {
-      var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-      var spriteCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
-      var lng = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 120;
-      var lat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
-      var indices = [];
-      var positions = [];
-      var mapService = this.mapService;
-      var heightLimit = this.spriteAnimate === SPRITE_ANIMATE_DIR.UP ? -this.spriteTop : this.spriteTop;
-      for (var i = 0; i < spriteCount; i++) {
-        var height = Math.random() * heightLimit;
-        positions.push.apply(positions, _toConsumableArray(getPos(height)));
-      }
-      for (var _i = 0; _i < spriteCount; _i++) {
-        indices.push(_i);
-      }
-      function getPos(z) {
-        var randomX = radius * Math.random();
-        var randomY = radius * Math.random();
-        var x = -radius / 2 + randomX;
-        var y = -radius / 2 + randomY;
-        if (mapService.version === 'GAODE2.x') {
-          // @ts-ignore
-          var _ref3 = mapService.lngLatToCoord([x + lng, -y + lat]),
-            _ref4 = _slicedToArray(_ref3, 2),
-            a = _ref4[0],
-            b = _ref4[1];
-          return [a, b, z, 0, 0];
-        } else {
-          return [x + lng, -y + lat, z, 0, 0];
-        }
-      }
-      return {
-        indices: indices,
-        positions: positions
-      };
+  initSprite(radius = 10, spriteCount = 100, lng = 120, lat = 30) {
+    const indices = [];
+    const positions = [];
+    const mapService = this.mapService;
+    const heightLimit = this.spriteAnimate === SPRITE_ANIMATE_DIR.UP ? -this.spriteTop : this.spriteTop;
+    for (let i = 0; i < spriteCount; i++) {
+      const height = Math.random() * heightLimit;
+      positions.push(...getPos(height));
     }
-  }, {
-    key: "getUninforms",
-    value: function getUninforms() {
-      var commoninfo = this.getCommonUniformsInfo();
-      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
-      this.updateStyleUnifoms();
-      return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+    for (let i = 0; i < spriteCount; i++) {
+      indices.push(i);
     }
-  }, {
-    key: "getCommonUniformsInfo",
-    value: function getCommonUniformsInfo() {
-      var _ref5 = this.layer.getLayerConfig(),
-        opacity = _ref5.opacity,
-        mapTexture = _ref5.mapTexture,
-        _ref5$spriteScale = _ref5.spriteScale,
-        spriteScale = _ref5$spriteScale === void 0 ? 1 : _ref5$spriteScale;
-      if (this.mapTexture !== mapTexture) {
-        var _this$texture;
-        this.mapTexture = mapTexture;
-        (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
-        this.textures = [];
-        this.updateTexture(mapTexture);
+    function getPos(z) {
+      const randomX = radius * Math.random();
+      const randomY = radius * Math.random();
+      const x = -radius / 2 + randomX;
+      const y = -radius / 2 + randomY;
+      if (mapService.version === 'GAODE2.x') {
+        // @ts-ignore
+        const [a, b] = mapService.lngLatToCoord([x + lng, -y + lat]);
+        return [a, b, z, 0, 0];
+      } else {
+        return [x + lng, -y + lat, z, 0, 0];
       }
-      var commonOptions = {
-        u_opacity: opacity || 1,
-        u_mapFlag: mapTexture ? 1 : 0,
-        u_Scale: spriteScale,
-        u_texture: this.texture
-      };
-      this.textures = [this.texture];
-      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
-      return commonBufferInfo;
     }
-  }, {
-    key: "clearModels",
-    value: function clearModels() {
-      var _this$texture2;
-      cancelAnimationFrame(this.timer);
-      (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+    return {
+      indices,
+      positions
+    };
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity,
+      mapTexture,
+      spriteScale = 1
+    } = this.layer.getLayerConfig();
+    if (this.mapTexture !== mapTexture) {
+      var _this$texture;
+      this.mapTexture = mapTexture;
+      (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
       this.textures = [];
+      this.updateTexture(mapTexture);
     }
-  }, {
-    key: "initModels",
-    value: function () {
-      var _initModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this3 = this;
-        var _ref6, mapTexture, _ref6$spriteTop, spriteTop, _ref6$spriteUpdate, spriteUpdate, _ref6$spriteAnimate, spriteAnimate, createTexture2D, model;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _ref6 = this.layer.getLayerConfig(), mapTexture = _ref6.mapTexture, _ref6$spriteTop = _ref6.spriteTop, spriteTop = _ref6$spriteTop === void 0 ? 5000000 : _ref6$spriteTop, _ref6$spriteUpdate = _ref6.spriteUpdate, spriteUpdate = _ref6$spriteUpdate === void 0 ? 10000 : _ref6$spriteUpdate, _ref6$spriteAnimate = _ref6.spriteAnimate, spriteAnimate = _ref6$spriteAnimate === void 0 ? SPRITE_ANIMATE_DIR.DOWN : _ref6$spriteAnimate;
-              this.initUniformsBuffer();
-              this.mapTexture = mapTexture;
-              this.spriteTop = spriteTop;
-              this.spriteUpdate = spriteUpdate;
-              spriteAnimate === 'up' ? this.spriteAnimate = SPRITE_ANIMATE_DIR.UP : this.spriteAnimate = SPRITE_ANIMATE_DIR.DOWN;
-              createTexture2D = this.rendererService.createTexture2D;
-              this.texture = createTexture2D({
-                height: 0,
-                width: 0
-              });
-              this.updateTexture(mapTexture);
-              setTimeout(function () {
-                _this3.updatePosition();
-              }, 100);
-              _context.next = 12;
-              return this.layer.buildLayerModel({
-                moduleName: 'geometrySprite',
-                vertexShader: spriteVert,
-                fragmentShader: spriteFrag,
-                triangulation: this.planeGeometryTriangulation,
-                inject: this.getInject(),
-                primitive: gl.POINTS,
-                depth: {
-                  enable: false
-                },
-                blend: this.getBlend()
-              });
-            case 12:
-              model = _context.sent;
-              return _context.abrupt("return", [model]);
-            case 14:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function initModels() {
-        return _initModels.apply(this, arguments);
-      }
-      return initModels;
-    }()
-  }, {
-    key: "buildModels",
-    value: function () {
-      var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              return _context2.abrupt("return", this.initModels());
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function buildModels() {
-        return _buildModels.apply(this, arguments);
-      }
-      return buildModels;
-    }()
-  }, {
-    key: "updateTexture",
-    value: function updateTexture(mapTexture) {
-      var _this4 = this;
-      var createTexture2D = this.rendererService.createTexture2D;
-      if (mapTexture) {
-        var img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.onload = function () {
-          _this4.texture = createTexture2D({
-            data: img,
-            width: img.width,
-            height: img.height,
-            wrapS: gl.CLAMP_TO_EDGE,
-            wrapT: gl.CLAMP_TO_EDGE
-          });
-          _this4.layerService.reRender();
-        };
-        img.src = mapTexture;
-      } else {
+    const commonOptions = {
+      u_opacity: opacity || 1,
+      u_mapFlag: mapTexture ? 1 : 0,
+      u_Scale: spriteScale,
+      u_texture: this.texture
+    };
+    this.textures = [this.texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  clearModels() {
+    var _this$texture2;
+    cancelAnimationFrame(this.timer);
+    (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+    this.textures = [];
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const {
+        mapTexture,
+        spriteTop = 5000000,
+        spriteUpdate = 10000,
+        spriteAnimate = SPRITE_ANIMATE_DIR.DOWN
+      } = _this.layer.getLayerConfig();
+      _this.initUniformsBuffer();
+      _this.mapTexture = mapTexture;
+      _this.spriteTop = spriteTop;
+      _this.spriteUpdate = spriteUpdate;
+      spriteAnimate === 'up' ? _this.spriteAnimate = SPRITE_ANIMATE_DIR.UP : _this.spriteAnimate = SPRITE_ANIMATE_DIR.DOWN;
+      const {
+        createTexture2D
+      } = _this.rendererService;
+      _this.texture = createTexture2D({
+        height: 0,
+        width: 0
+      });
+      _this.updateTexture(mapTexture);
+      setTimeout(() => {
+        _this.updatePosition();
+      }, 100);
+      const model = yield _this.layer.buildLayerModel({
+        moduleName: 'geometrySprite',
+        vertexShader: spriteVert,
+        fragmentShader: spriteFrag,
+        triangulation: _this.planeGeometryTriangulation,
+        inject: _this.getInject(),
+        primitive: gl.POINTS,
+        depth: {
+          enable: false
+        },
+        blend: _this.getBlend()
+      });
+      return [model];
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      return _this2.initModels();
+    })();
+  }
+  updateTexture(mapTexture) {
+    const {
+      createTexture2D
+    } = this.rendererService;
+    if (mapTexture) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
         this.texture = createTexture2D({
-          width: 1,
-          height: 1
+          data: img,
+          width: img.width,
+          height: img.height,
+          wrapS: gl.CLAMP_TO_EDGE,
+          wrapT: gl.CLAMP_TO_EDGE
         });
-      }
-    }
-  }, {
-    key: "registerBuiltinAttributes",
-    value: function registerBuiltinAttributes() {
-      return '';
+        this.layerService.reRender();
+      };
+      img.src = mapTexture;
+    } else {
+      this.texture = createTexture2D({
+        width: 1,
+        height: 1
+      });
     }
-  }]);
-  return SpriteModel;
-}(BaseModel);
-export { SpriteModel as default };
+  }
+  registerBuiltinAttributes() {
+    return '';
+  }
+}