@antv/l7-layers 2.25.7 → 2.25.10

package/lib/wind/models/wind.d.ts

@@ -0,0 +1,38 @@
+import type { IModel, IModelUniform, IRenderOptions, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class WindModel 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;
+        UV: number;
+    };
+    protected texture: ITexture2D;
+    private colorModel;
+    private wind;
+    private imageCoords;
+    private sizeScale;
+    private frequency;
+    private cacheZoom;
+    render(options: Partial<IRenderOptions>): void;
+    getUninforms(): IModelUniform;
+    initModels(): Promise<IModel[]>;
+    getWindSize(): {
+        imageWidth: number;
+        imageHeight: number;
+    };
+    buildModels(): Promise<IModel[]>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+    private getZoomScale;
+    private drawWind;
+    private drawColorMode;
+}

package/lib/wind/models/wind.js

@@ -0,0 +1,248 @@
+"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 _l7Core = require("@antv/l7-core");
+var _l7Utils = require("@antv/l7-utils");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _triangulation = require("../../core/triangulation");
+var _windRender = require("./windRender");
+/* babel-plugin-inline-import '../shaders/wind_frag.glsl' */
+const WindFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nvoid main() {\n  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));\n  gl_FragColor = color;\n  gl_FragColor.a *= u_opacity;\n}\n";
+/* babel-plugin-inline-import '../shaders/wind_vert.glsl' */
+const WindVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\n\nlayout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nvarying vec2 v_texCoord;\n#pragma include \"projection\"\nvoid main() {\n  v_texCoord = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));\n}\n";
+const defaultRampColors = {
+  0.0: '#3288bd',
+  0.1: '#66c2a5',
+  0.2: '#abdda4',
+  0.3: '#e6f598',
+  0.4: '#fee08b',
+  0.5: '#fdae61',
+  0.6: '#f46d43',
+  1.0: '#d53e4f'
+};
+class WindModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "texture", void 0);
+    (0, _defineProperty2.default)(this, "colorModel", void 0);
+    (0, _defineProperty2.default)(this, "wind", void 0);
+    (0, _defineProperty2.default)(this, "imageCoords", void 0);
+    (0, _defineProperty2.default)(this, "sizeScale", 0.5);
+    // https://mapbox.github.io/webgl-wind/demo/
+    // source: 'http://nomads.ncep.noaa.gov',
+    (0, _defineProperty2.default)(this, "frequency", new _l7Utils.FrequencyController(7.2));
+    (0, _defineProperty2.default)(this, "cacheZoom", void 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      UV: 9
+    });
+  }
+  render(options) {
+    this.drawColorMode(options);
+    // Tip: 控制风场的平均更新频率
+    this.frequency.run(() => {
+      this.drawWind();
+    });
+  }
+  getUninforms() {
+    throw new Error('Method not implemented.');
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      var _source$data, _source$data2;
+      const {
+        uMin = -21.32,
+        uMax = 26.8,
+        vMin = -21.57,
+        vMax = 21.42,
+        fadeOpacity = 0.996,
+        speedFactor = 0.25,
+        dropRate = 0.003,
+        dropRateBump = 0.01,
+        rampColors = defaultRampColors,
+        sizeScale = 0.5
+        // mask
+      } = _this.layer.getLayerConfig();
+      const {
+        createTexture2D
+      } = _this.rendererService;
+      const source = _this.layer.getSource();
+      _this.texture = createTexture2D({
+        height: 0,
+        width: 0
+      });
+      _this.cacheZoom = Math.floor(_this.mapService.getZoom());
+      const glContext = _this.rendererService.getGLContext();
+      _this.imageCoords = (_source$data = source.data) === null || _source$data === void 0 ? void 0 : _source$data.dataArray[0].coordinates;
+      (_source$data2 = source.data) === null || _source$data2 === void 0 || (_source$data2 = _source$data2.images) === null || _source$data2 === void 0 || _source$data2.then(imageData => {
+        var _this$texture;
+        _this.sizeScale = sizeScale * _this.getZoomScale();
+        const {
+          imageWidth,
+          imageHeight
+        } = _this.getWindSize();
+        const options = {
+          glContext,
+          imageWidth,
+          imageHeight,
+          fadeOpacity,
+          speedFactor,
+          dropRate,
+          dropRateBump,
+          rampColors
+        };
+        _this.wind = new _windRender.Wind(options);
+
+        // imageData[0] 风场图
+        _this.wind.setWind({
+          uMin,
+          uMax,
+          vMin,
+          vMax,
+          image: imageData[0]
+        });
+        (_this$texture = _this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+        _this.texture = createTexture2D({
+          width: imageWidth,
+          height: imageHeight
+        });
+        _this.layerService.reRender();
+      });
+      const model = yield _this.layer.buildLayerModel({
+        moduleName: 'wind',
+        vertexShader: WindVert,
+        fragmentShader: WindFrag,
+        defines: _this.getDefines(),
+        triangulation: _triangulation.RasterImageTriangulation,
+        primitive: _l7Core.gl.TRIANGLES,
+        depth: {
+          enable: false
+        }
+      });
+      _this.colorModel = model;
+      return [model];
+    })();
+  }
+  getWindSize() {
+    const p1 = this.mapService.lngLatToPixel(this.imageCoords[0]);
+    const p2 = this.mapService.lngLatToPixel(this.imageCoords[1]);
+    const imageWidth = Math.min(Math.floor((p2.x - p1.x) * this.sizeScale), 2048);
+    const imageHeight = Math.min(Math.floor((p1.y - p2.y) * this.sizeScale), 2048);
+    return {
+      imageWidth,
+      imageHeight
+    };
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      return _this2.initModels();
+    })();
+  }
+  clearModels() {
+    var _this$texture2, _this$wind;
+    (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+    (_this$wind = this.wind) === null || _this$wind === void 0 || _this$wind.destroy();
+  }
+  registerBuiltinAttributes() {
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
+      }
+    });
+  }
+  getZoomScale() {
+    return Math.min((this.cacheZoom + 4) / 30 * 2, 2);
+  }
+  drawWind() {
+    if (this.wind) {
+      const {
+        uMin = -21.32,
+        uMax = 26.8,
+        vMin = -21.57,
+        vMax = 21.42,
+        numParticles = 65535,
+        fadeOpacity = 0.996,
+        speedFactor = 0.25,
+        dropRate = 0.003,
+        dropRateBump = 0.01,
+        rampColors = defaultRampColors,
+        sizeScale = 0.5
+      } = this.layer.getLayerConfig();
+      let newNumParticles = numParticles;
+      const currentZoom = Math.floor(this.mapService.getZoom());
+      if (typeof sizeScale === 'number' && sizeScale !== this.sizeScale || currentZoom !== this.cacheZoom) {
+        const zoomScale = this.getZoomScale();
+        this.sizeScale = sizeScale;
+        newNumParticles *= zoomScale;
+        const {
+          imageWidth,
+          imageHeight
+        } = this.getWindSize();
+        this.wind.reSize(imageWidth, imageHeight);
+        this.cacheZoom = currentZoom;
+      }
+      this.wind.updateWindDir(uMin, uMax, vMin, vMax);
+      this.wind.updateParticelNum(newNumParticles);
+      this.wind.updateColorRampTexture(rampColors);
+      this.wind.fadeOpacity = fadeOpacity;
+      this.wind.speedFactor = speedFactor;
+      this.wind.dropRate = dropRate;
+      this.wind.dropRateBump = dropRateBump;
+      const {
+        d,
+        w,
+        h
+      } = this.wind.draw();
+      // 恢复 L7 渲染流程中 gl 状态
+      this.rendererService.setBaseState();
+      this.texture.update({
+        data: d,
+        width: w,
+        height: h
+      });
+    }
+  }
+  drawColorMode(options = {}) {
+    var _this$colorModel;
+    const {
+      opacity
+    } = this.layer.getLayerConfig();
+    this.layerService.beforeRenderData(this.layer);
+    this.layer.hooks.beforeRender.call();
+    this.layerService.renderMask(this.layer.masks);
+    (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 || _this$colorModel.draw({
+      uniforms: {
+        u_opacity: opacity || 1.0,
+        u_texture: this.texture
+      },
+      blend: this.getBlend(),
+      stencil: this.getStencil(options)
+    });
+    this.layer.hooks.afterRender.call();
+  }
+}
+exports.default = WindModel;

package/lib/wind/models/windRender.d.ts

@@ -0,0 +1,104 @@
+export interface IWindData {
+    uMin: number;
+    uMax: number;
+    vMin: number;
+    vMax: number;
+    image: HTMLImageElement;
+}
+export interface IWind {
+    width: number;
+    height: number;
+    fadeOpacity: number;
+    speedFactor: number;
+    dropRate: number;
+    dropRateBump: number;
+    setWind: (windData: IWindData) => void;
+    draw: () => {
+        d: Uint8Array;
+        w: number;
+        h: number;
+    };
+    updateParticelNum: (num: number) => void;
+    updateWindDir: (uMin: number, uMax: number, vMin: number, vMax: number) => void;
+    updateColorRampTexture: (rampColors: {
+        [key: number]: string;
+    }) => void;
+    reSize: (width: number, height: number) => void;
+    destroy: () => void;
+}
+export interface IWindProps {
+    glContext: WebGLRenderingContext;
+    imageWidth: number;
+    imageHeight: number;
+    fadeOpacity: number;
+    speedFactor: number;
+    dropRate: number;
+    dropRateBump: number;
+    rampColors: {
+        [key: number]: string;
+    };
+}
+export declare class Wind {
+    width: number;
+    height: number;
+    pixels: Uint8Array;
+    fadeOpacity: number;
+    speedFactor: number;
+    dropRate: number;
+    dropRateBump: number;
+    private gl;
+    private drawProgram;
+    private fullScreenProgram;
+    private updateProgram;
+    private rampColors;
+    private numParticles;
+    private numParticlesSize;
+    private particleStateResolution;
+    private quadBuffer;
+    private particleIndexBuffer;
+    private framebuffer;
+    private colorRampTexture;
+    private backgroundTexture;
+    private screenTexture;
+    private particleStateTexture0;
+    private particleStateTexture1;
+    private windTexture;
+    private windData;
+    constructor(options: IWindProps);
+    init(): void;
+    setWind(windData: IWindData): void;
+    /**
+     * 更新风场粒子数量
+     * @param num
+     */
+    updateParticelNum(num: number): void;
+    /**
+     * 更新风场风向风速
+     * @param uMin
+     * @param uMax
+     * @param vMin
+     * @param vMax
+     */
+    updateWindDir(uMin: number, uMax: number, vMin: number, vMax: number): void;
+    /**
+     * update rampColors
+     * @param rampColors
+     */
+    updateColorRampTexture(rampColors: {
+        [key: number]: string;
+    }): void;
+    isColorChanged(rampColors: {
+        [key: number]: string;
+    }): boolean;
+    reSize(width: number, height: number): void;
+    draw(): {
+        d: Uint8Array;
+        w: number;
+        h: number;
+    };
+    drawScreen(): void;
+    drawFullTexture(texture: any, opacity: number): void;
+    drawParticles(): void;
+    updateParticles(): void;
+    destroy(): void;
+}