@antv/l7-layers 2.25.7 → 2.25.9

package/es/wind/models/windShader.js

@@ -0,0 +1,151 @@
+/**
+ * drawProgram          drawVert drawFrag
+ * screenProgram        screenVert screenFrag
+ * updateProgram        updateVert updateFrag
+ * fullScreenProgram    fullScreenVert fullScreenFrag
+ */
+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/es/wind/shaders/wind_frag.glsl

@@ -0,0 +1,9 @@
+precision mediump float;
+uniform float u_opacity: 1.0;
+uniform sampler2D u_texture;
+varying vec2 v_texCoord;
+void main() {
+  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));
+  gl_FragColor = color;
+  gl_FragColor.a *= u_opacity;
+}

package/es/wind/shaders/wind_vert.glsl

@@ -0,0 +1,14 @@
+precision highp float;
+uniform mat4 u_ModelMatrix;
+
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;
+
+varying vec2 v_texCoord;
+#pragma include "projection"
+void main() {
+  v_texCoord = a_Uv;
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _BaseLayer = _interopRequireDefault(require("../core/BaseLayer"));
+var _models = require("./models");
+// import type { ILayerConfig } from '@antv/l7-core';
+
+class CanvasLayer extends _BaseLayer.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "type", 'CanvasLayer');
+  }
+  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;
+    }
+    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';
+    }
+    return this;
+  }
+  hide() {
+    const canvas = this.getCanvas();
+    if (canvas) {
+      canvas.style.display = 'none';
+    }
+    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;
+}

package/lib/canvas/models/canvas.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CanvasModel = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _interface = require("../../core/interface");
+var _constants = require("./constants");
+class CanvasModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "canvas", null);
+    (0, _defineProperty2.default)(this, "ctx", void 0);
+    (0, _defineProperty2.default)(this, "ctxType", void 0);
+    (0, _defineProperty2.default)(this, "viewportSize", void 0);
+    (0, _defineProperty2.default)(this, "initCanvas", () => {
+      var _this$mapService$getC, _this$mapService$getC2, _this$mapService, _this$mapService$getM, _this$mapService2;
+      const {
+        zIndex,
+        getContext
+      } = this.layerConfig;
+      const canvas = document.createElement('canvas');
+      const modelType = this.layer.getModelType();
+      this.canvas = canvas;
+      canvas.classList.add('l7-canvas-layer');
+      canvas.style.position = 'absolute';
+      canvas.style.top = '0';
+      canvas.style.left = '0';
+      canvas.style.zIndex = String(zIndex);
+      this.resetCanvasSize();
+      const container = (_this$mapService$getC = (_this$mapService$getC2 = (_this$mapService = this.mapService).getCanvasOverlays) === null || _this$mapService$getC2 === void 0 ? void 0 : _this$mapService$getC2.call(_this$mapService)) !== null && _this$mapService$getC !== void 0 ? _this$mapService$getC : (_this$mapService$getM = (_this$mapService2 = this.mapService).getMapCanvasContainer) === null || _this$mapService$getM === void 0 ? void 0 : _this$mapService$getM.call(_this$mapService2);
+      container === null || container === void 0 || container.appendChild(canvas);
+      this.ctx = getContext ? getContext(canvas) : canvas.getContext(_constants.CanvasContextTypeMap[modelType]);
+      if (!this.ctx) {
+        console.error('Failed to get rendering context for canvas');
+      }
+      this.bindListeners();
+    });
+    (0, _defineProperty2.default)(this, "resetViewportSize", () => {
+      const {
+        width: viewWidth,
+        height: viewHeight
+      } = this.rendererService.getViewportSize();
+      this.viewportSize = [viewWidth, viewHeight];
+    });
+    (0, _defineProperty2.default)(this, "resetCanvasSize", () => {
+      const canvas = this.canvas;
+      if (!canvas) {
+        return;
+      }
+      this.resetViewportSize();
+      const [width, height] = this.mapService.getSize();
+      const [viewWidth, viewHeight] = this.viewportSize;
+      canvas.width = viewWidth;
+      canvas.height = viewHeight;
+      canvas.style.width = width + 'px';
+      canvas.style.height = height + 'px';
+    });
+    (0, _defineProperty2.default)(this, "renderCanvas", () => {
+      var _ref;
+      if (!this.canvas) {
+        this.initCanvas();
+      }
+      const {
+        draw,
+        drawingOnCanvas
+      } = this.layerConfig;
+      const [width, height] = this.viewportSize;
+      const bounds = this.mapService.getBounds();
+      (_ref = draw !== null && draw !== void 0 ? draw : drawingOnCanvas) === null || _ref === void 0 || _ref({
+        canvas: this.canvas,
+        ctx: this.ctx,
+        container: {
+          width,
+          height,
+          bounds
+        },
+        size: [width, height],
+        utils: {
+          lngLatToContainer: this.lngLatToContainer
+        },
+        mapService: this.mapService
+      });
+    });
+    (0, _defineProperty2.default)(this, "removeCanvas", () => {
+      if (this.canvas) {
+        var _this$canvas$parentEl;
+        (_this$canvas$parentEl = this.canvas.parentElement) === null || _this$canvas$parentEl === void 0 || _this$canvas$parentEl.removeChild(this.canvas);
+        this.canvas = null;
+      }
+      this.unbindListeners();
+    });
+    (0, _defineProperty2.default)(this, "onMapResize", () => {
+      requestAnimationFrame(() => {
+        this.resetCanvasSize();
+        this.renderCanvas();
+      });
+    });
+    (0, _defineProperty2.default)(this, "lngLatToContainer", lngLat => {
+      const {
+        x,
+        y
+      } = this.mapService.lngLatToContainer(lngLat);
+      return {
+        x: x * window.devicePixelRatio,
+        y: y * window.devicePixelRatio
+      };
+    });
+  }
+  get layerConfig() {
+    return this.layer.getLayerConfig();
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this.renderCanvas();
+      return [];
+    })();
+  }
+  bindListeners() {
+    this.mapService.on('resize', this.onMapResize);
+    const {
+      trigger,
+      update
+    } = this.layerConfig;
+    if (update === _interface.CanvasUpdateType.ALWAYS || trigger === 'change') {
+      this.mapService.on('mapchange', this.renderCanvas);
+    } else {
+      this.mapService.on('zoomstart', this.removeCanvas);
+      this.mapService.on('zoomend', this.renderCanvas);
+      this.mapService.on('movestart', this.removeCanvas);
+      this.mapService.on('moveend', this.renderCanvas);
+    }
+  }
+  unbindListeners() {
+    this.mapService.off('resize', this.onMapResize);
+    this.mapService.off('mapchange', this.renderCanvas);
+    this.mapService.off('zoomstart', this.removeCanvas);
+    this.mapService.off('zoomend', this.renderCanvas);
+    this.mapService.off('movestart', this.removeCanvas);
+    this.mapService.off('moveend', this.renderCanvas);
+  }
+  registerBuiltinAttributes() {}
+}
+exports.CanvasModel = CanvasModel;

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

@@ -0,0 +1,2 @@
+export type CanvasModelType = 'canvas2d' | 'webgl' | 'webgl2' | 'webgpu';
+export declare const CanvasContextTypeMap: Record<CanvasModelType, string>;

package/lib/canvas/models/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CanvasContextTypeMap = void 0;
+const CanvasContextTypeMap = exports.CanvasContextTypeMap = {
+  canvas2d: '2d',
+  webgl: 'webgl',
+  webgl2: 'webgl2',
+  webgpu: 'webgpu'
+};

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

@@ -0,0 +1,2 @@
+export * from './canvas';
+export * from './constants';

package/lib/canvas/models/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _canvas = require("./canvas");
+Object.keys(_canvas).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _canvas[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _canvas[key];
+    }
+  });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
+});

package/lib/citybuilding/building.d.ts

@@ -0,0 +1,7 @@
+import BaseLayer from '../core/BaseLayer';
+export default class CityBuildingLayer extends BaseLayer {
+    type: string;
+    buildModels(): Promise<void>;
+    setLight(t: number): void;
+    getModelType(): string;
+}

package/lib/citybuilding/building.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _BaseLayer = _interopRequireDefault(require("../core/BaseLayer"));
+var _build = _interopRequireDefault(require("./models/build"));
+class CityBuildingLayer extends _BaseLayer.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "type", 'CityBuildingLayer');
+  }
+  buildModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this.layerModel = new _build.default(_this);
+      yield _this.initLayerModels();
+    })();
+  }
+  setLight(t) {
+    this.updateLayerConfig({
+      time: t
+    });
+  }
+  getModelType() {
+    return 'citybuilding';
+  }
+}
+exports.default = CityBuildingLayer;

package/lib/citybuilding/models/build.d.ts

@@ -0,0 +1,33 @@
+import type { IModel } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class CityBuildModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+        NORMAL: number;
+        UV: number;
+    };
+    private cityCenter;
+    private cityMinSize;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    calCityGeo(): void;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+}