@antv/l7-layers 2.21.1 → 2.21.2

package/es/wind/models/windShader.js

@@ -4,9 +4,148 @@
  * updateProgram        updateVert updateFrag
  * fullScreenProgram    fullScreenVert fullScreenFrag
  */
-export var drawVert = "\n precision mediump float;\n\n attribute float a_index;\n\n uniform sampler2D u_particles;\n uniform float u_particles_res;\n\n varying vec2 v_particle_pos;\n\n void main() {\n     vec4 color = texture2D(u_particles, vec2(\n         fract(a_index / u_particles_res),\n         floor(a_index / u_particles_res) / u_particles_res)\n     );\n\n     // decode current particle position from the pixel's RGBA value\n     v_particle_pos = vec2( color.r / 255.0 + color.b, color.g / 255.0 + color.a);\n\n     gl_PointSize = 1.0;\n     gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);\n }";
-export var drawFrag = "\n precision mediump float;\n\n uniform sampler2D u_wind;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform sampler2D u_color_ramp;\n\n varying vec2 v_particle_pos;\n\n void main() {\n     vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n     float speed_t = length(velocity) / length(u_wind_max);\n\n     // color ramp is encoded in a 16x16 texture\n     vec2 ramp_pos = vec2( fract(16.0 * speed_t), floor(16.0 * speed_t) / 16.0);\n\n     gl_FragColor = texture2D(u_color_ramp, ramp_pos);\n }";
-export var updateVert = "\n precision mediump float;\n\n attribute vec2 a_pos;\n\n varying vec2 v_tex_pos;\n\n void main() {\n     v_tex_pos = a_pos;\n     gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n     // framebuffer \u59CB\u7EC8\u7528\u94FA\u6EE1\u5C4F\u5E55\u7684 texture\n }";
-export var updateFrag = "\n precision highp float;\n\n uniform sampler2D u_particles;\n uniform sampler2D u_wind;\n uniform vec2 u_wind_res;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform float u_rand_seed;\n uniform float u_speed_factor;\n uniform float u_drop_rate;\n uniform float u_drop_rate_bump;\n\n varying vec2 v_tex_pos;\n\n // pseudo-random generator\n const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\n float rand(const vec2 co) {\n float t = dot(rand_constants.xy, co);\n     return fract(sin(t) * (rand_constants.z + t));\n }\n\n // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\n vec2 lookup_wind(const vec2 uv) {\n     // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n     vec2 px = 1.0 / u_wind_res;\n     vec2 vc = (floor(uv * u_wind_res)) * px;\n     vec2 f = fract(uv * u_wind_res);\n     vec2 tl = texture2D(u_wind, vc).rg;\n     vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n     vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n     vec2 br = texture2D(u_wind, vc + px).rg;\n     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n }\n\n void main() {\n     vec4 color = texture2D(u_particles, v_tex_pos);\n     vec2 pos = vec2(\n         color.r / 255.0 + color.b,\n         color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n     float speed_t = length(velocity) / length(u_wind_max);\n\n     // take EPSG:4236 distortion into account for calculating where the particle moved\n     float distortion = cos(radians(pos.y * 180.0 - 90.0));\n     vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n\n     // update particle position, wrapping around the date line\n     pos = fract(1.0 + pos + offset);\n\n     // a random seed to use for the particle drop\n     vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n\n     // drop rate is a chance a particle will restart at random position, to avoid degeneration\n     float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;\n     float drop = step(1.0 - drop_rate, rand(seed));\n\n     vec2 random_pos = vec2(\n         rand(seed + 1.3),\n         rand(seed + 2.1));\n         pos = mix(pos, random_pos, drop);\n\n     // encode the new particle position back into RGBA\n     gl_FragColor = vec4(\n         fract(pos * 255.0),\n         floor(pos * 255.0) / 255.0);\n }";
-export var fullScreenVert = "\n     precision mediump float;\n\n     attribute vec2 a_pos;\n\n     varying vec2 v_tex_pos;\n\n     void main() {\n         v_tex_pos = a_pos;\n         gl_Position = vec4(1.0 - 2.0 * a_pos, 0.0, 1.0);\n         gl_PointSize = 100.0;\n }";
-export var fullScreenFrag = "\n precision mediump float;\n\n uniform sampler2D u_screen;\n uniform float u_opacity;\n varying vec2 v_tex_pos;\n\n void main() {\n     vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n\n     // a hack to guarantee opacity fade out even with a value close to 1.0\n     gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n }";
+export const drawVert = `
+ precision mediump float;
+
+ attribute float a_index;
+
+ uniform sampler2D u_particles;
+ uniform float u_particles_res;
+
+ varying vec2 v_particle_pos;
+
+ void main() {
+     vec4 color = texture2D(u_particles, vec2(
+         fract(a_index / u_particles_res),
+         floor(a_index / u_particles_res) / u_particles_res)
+     );
+
+     // decode current particle position from the pixel's RGBA value
+     v_particle_pos = vec2( color.r / 255.0 + color.b, color.g / 255.0 + color.a);
+
+     gl_PointSize = 1.0;
+     gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);
+ }`;
+export const drawFrag = `
+ precision mediump float;
+
+ uniform sampler2D u_wind;
+ uniform vec2 u_wind_min;
+ uniform vec2 u_wind_max;
+ uniform sampler2D u_color_ramp;
+
+ varying vec2 v_particle_pos;
+
+ void main() {
+     vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);
+     float speed_t = length(velocity) / length(u_wind_max);
+
+     // color ramp is encoded in a 16x16 texture
+     vec2 ramp_pos = vec2( fract(16.0 * speed_t), floor(16.0 * speed_t) / 16.0);
+
+     gl_FragColor = texture2D(u_color_ramp, ramp_pos);
+ }`;
+export const updateVert = `
+ precision mediump float;
+
+ attribute vec2 a_pos;
+
+ varying vec2 v_tex_pos;
+
+ void main() {
+     v_tex_pos = a_pos;
+     gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);
+     // framebuffer 始终用铺满屏幕的 texture
+ }`;
+export const updateFrag = `
+ precision highp float;
+
+ uniform sampler2D u_particles;
+ uniform sampler2D u_wind;
+ uniform vec2 u_wind_res;
+ uniform vec2 u_wind_min;
+ uniform vec2 u_wind_max;
+ uniform float u_rand_seed;
+ uniform float u_speed_factor;
+ uniform float u_drop_rate;
+ uniform float u_drop_rate_bump;
+
+ varying vec2 v_tex_pos;
+
+ // pseudo-random generator
+ const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);
+ float rand(const vec2 co) {
+ float t = dot(rand_constants.xy, co);
+     return fract(sin(t) * (rand_constants.z + t));
+ }
+
+ // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation
+ vec2 lookup_wind(const vec2 uv) {
+     // return texture2D(u_wind, uv).rg; // lower-res hardware filtering
+     vec2 px = 1.0 / u_wind_res;
+     vec2 vc = (floor(uv * u_wind_res)) * px;
+     vec2 f = fract(uv * u_wind_res);
+     vec2 tl = texture2D(u_wind, vc).rg;
+     vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;
+     vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;
+     vec2 br = texture2D(u_wind, vc + px).rg;
+     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+ }
+
+ void main() {
+     vec4 color = texture2D(u_particles, v_tex_pos);
+     vec2 pos = vec2(
+         color.r / 255.0 + color.b,
+         color.g / 255.0 + color.a); // decode particle position from pixel RGBA
+     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));
+     float speed_t = length(velocity) / length(u_wind_max);
+
+     // take EPSG:4236 distortion into account for calculating where the particle moved
+     float distortion = cos(radians(pos.y * 180.0 - 90.0));
+     vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
+
+     // update particle position, wrapping around the date line
+     pos = fract(1.0 + pos + offset);
+
+     // a random seed to use for the particle drop
+     vec2 seed = (pos + v_tex_pos) * u_rand_seed;
+
+     // drop rate is a chance a particle will restart at random position, to avoid degeneration
+     float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;
+     float drop = step(1.0 - drop_rate, rand(seed));
+
+     vec2 random_pos = vec2(
+         rand(seed + 1.3),
+         rand(seed + 2.1));
+         pos = mix(pos, random_pos, drop);
+
+     // encode the new particle position back into RGBA
+     gl_FragColor = vec4(
+         fract(pos * 255.0),
+         floor(pos * 255.0) / 255.0);
+ }`;
+export const fullScreenVert = `
+     precision mediump float;
+
+     attribute vec2 a_pos;
+
+     varying vec2 v_tex_pos;
+
+     void main() {
+         v_tex_pos = a_pos;
+         gl_Position = vec4(1.0 - 2.0 * a_pos, 0.0, 1.0);
+         gl_PointSize = 100.0;
+ }`;
+export const fullScreenFrag = `
+ precision mediump float;
+
+ uniform sampler2D u_screen;
+ uniform float u_opacity;
+ varying vec2 v_tex_pos;
+
+ void main() {
+     vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);
+
+     // a hack to guarantee opacity fade out even with a value close to 1.0
+     gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);
+ }`;

package/lib/canvas/index.d.ts

@@ -0,0 +1,18 @@
+import BaseLayer from '../core/BaseLayer';
+import type { ICanvasLayerOptions } from '../core/interface';
+import type { CanvasModelType } from './models';
+import { CanvasModel } from './models';
+export default class CanvasLayer extends BaseLayer<ICanvasLayerOptions> {
+    type: string;
+    layerModel: CanvasModel;
+    protected getDefaultConfig(): Partial<ICanvasLayerOptions>;
+    buildModels(): Promise<void>;
+    getModelType(): CanvasModelType;
+    draw(draw: ICanvasLayerOptions['draw']): this;
+    getLayerConfig(): any;
+    render(): this;
+    getCanvas(): HTMLCanvasElement | null;
+    show(): this;
+    hide(): this;
+    destroy(): void;
+}

package/lib/canvas/index.js

@@ -5,124 +5,75 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _BaseLayer2 = _interopRequireDefault(require("../core/BaseLayer"));
+var _BaseLayer = _interopRequireDefault(require("../core/BaseLayer"));
 var _models = require("./models");
-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; } } // import type { ILayerConfig } from '@antv/l7-core';
-var CanvasLayer = exports.default = /*#__PURE__*/function (_BaseLayer) {
-  (0, _inherits2.default)(CanvasLayer, _BaseLayer);
-  var _super = _createSuper(CanvasLayer);
-  function CanvasLayer() {
-    var _this;
-    (0, _classCallCheck2.default)(this, CanvasLayer);
-    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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "type", 'CanvasLayer');
-    return _this;
+// import type { ILayerConfig } from '@antv/l7-core';
+
+class CanvasLayer extends _BaseLayer.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "type", 'CanvasLayer');
   }
-  (0, _createClass2.default)(CanvasLayer, [{
-    key: "getDefaultConfig",
-    value: function getDefaultConfig() {
-      return {
-        zIndex: 3,
-        contextType: 'canvas2d',
-        trigger: 'change'
-      };
-    }
-  }, {
-    key: "buildModels",
-    value: function () {
-      var _buildModels = (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.layerModel = new _models.CanvasModel(this);
-              _context.next = 3;
-              return this.initLayerModels();
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function buildModels() {
-        return _buildModels.apply(this, arguments);
-      }
-      return buildModels;
-    }()
-  }, {
-    key: "getModelType",
-    value: function getModelType() {
-      return this.getLayerConfig().contextType || 'canvas2d';
-    }
-  }, {
-    key: "draw",
-    value: function draw(_draw) {
-      this.updateLayerConfig({
-        draw: _draw
-      });
-      this.render();
-      return this;
-    }
-  }, {
-    key: "getLayerConfig",
-    value: function getLayerConfig() {
-      var config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.getDefaultConfig()), (0, _get2.default)((0, _getPrototypeOf2.default)(CanvasLayer.prototype), "getLayerConfig", this).call(this));
-      if (config.zIndex < 3) {
-        config.zIndex = 3;
-      }
-      return config;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$layerModel;
-      (_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 || _this$layerModel.renderCanvas();
-      return this;
-    }
-  }, {
-    key: "getCanvas",
-    value: function getCanvas() {
-      var _this$layerModel2;
-      return (_this$layerModel2 = this.layerModel) === null || _this$layerModel2 === void 0 ? void 0 : _this$layerModel2.canvas;
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      var canvas = this.getCanvas();
-      if (canvas) {
-        canvas.style.display = 'unset';
-      }
-      return this;
+  getDefaultConfig() {
+    return {
+      zIndex: 3,
+      contextType: 'canvas2d',
+      trigger: 'change'
+    };
+  }
+  buildModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this.layerModel = new _models.CanvasModel(_this);
+      yield _this.initLayerModels();
+    })();
+  }
+  getModelType() {
+    return this.getLayerConfig().contextType || 'canvas2d';
+  }
+  draw(draw) {
+    this.updateLayerConfig({
+      draw
+    });
+    this.render();
+    return this;
+  }
+  getLayerConfig() {
+    const config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.getDefaultConfig()), super.getLayerConfig());
+    if (config.zIndex < 3) {
+      config.zIndex = 3;
     }
-  }, {
-    key: "hide",
-    value: function hide() {
-      var canvas = this.getCanvas();
-      if (canvas) {
-        canvas.style.display = 'none';
-      }
-      return this;
+    return config;
+  }
+  render() {
+    var _this$layerModel;
+    (_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 || _this$layerModel.renderCanvas();
+    return this;
+  }
+  getCanvas() {
+    var _this$layerModel2;
+    return (_this$layerModel2 = this.layerModel) === null || _this$layerModel2 === void 0 ? void 0 : _this$layerModel2.canvas;
+  }
+  show() {
+    const canvas = this.getCanvas();
+    if (canvas) {
+      canvas.style.display = 'unset';
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.layerModel.removeCanvas();
-      (0, _get2.default)((0, _getPrototypeOf2.default)(CanvasLayer.prototype), "destroy", this).call(this);
+    return this;
+  }
+  hide() {
+    const canvas = this.getCanvas();
+    if (canvas) {
+      canvas.style.display = 'none';
     }
-  }]);
-  return CanvasLayer;
-}(_BaseLayer2.default);
+    return this;
+  }
+  destroy() {
+    this.layerModel.removeCanvas();
+    super.destroy();
+  }
+}
+exports.default = CanvasLayer;

package/lib/canvas/models/canvas.d.ts

@@ -0,0 +1,23 @@
+import BaseModel from '../../core/BaseModel';
+import { type ICanvasLayerOptions } from '../../core/interface';
+export declare class CanvasModel extends BaseModel {
+    canvas: HTMLCanvasElement | null;
+    ctx: any;
+    ctxType: string;
+    viewportSize: [number, number];
+    get layerConfig(): ICanvasLayerOptions;
+    initModels(): Promise<never[]>;
+    initCanvas: () => void;
+    resetViewportSize: () => void;
+    resetCanvasSize: () => void;
+    renderCanvas: () => void;
+    removeCanvas: () => void;
+    onMapResize: () => void;
+    bindListeners(): void;
+    unbindListeners(): void;
+    lngLatToContainer: (lngLat: [number, number]) => {
+        x: number;
+        y: number;
+    };
+    registerBuiltinAttributes(): void;
+}