deckgl-windy-layer

A windy layer for deck.gl

Install

npm install @ruijingrs/deckgl-windy-layer
# or
yarn add @ruijingrs/deckgl-windy-layer

Use in React

import { useState } from 'react';
import StreamLineWindLayer from '@ruijingrs/deckgl-windy-layer';

export const useWindyLayer = () => {
  const [windyLayer, setWindyLayer] = useState<any[]>([]);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!visible) {
      setWindyLayer([]);
      return;
    }

    const image = new Image();
    image.crossOrigin = 'anonymous';
    const src = `windy tile url`;
    image.src = src;
    image.onload = () => {
      const windy = new StreamLineWindLayer(
        {
          id: 'windy-layer',
        },
        {
          image,
          bounds: [60, 16, 144, 64],
          p2p: 1 / 1500,
          maxAge: 200,
          minAge: 30,
          color: [40, 108, 255, 255],
        }
      );
      setWindyLayer([windy]);
    };
  }, []);

  return windyLayer;
};

import DeckGL from '@deck.gl/react/typed';

const Map = () => {
  const windyLayer = useWindyLayer();

  return <DeckGL layers={windyLayer} />;
};

Props

| 名称 | 类型 | 默认 | 描述 | | ---------- | ------------------------ | ----------------- | ---------------- | | p2p | number | 1 / 250 | 像素与粒子转换比 | | minAge | number | 60 | 粒子最小生命周期 | | maxAge | number | 300 | 粒子最大生命周期 | | width | number | 4 | 粒子尺寸 | | minWidth | number | 2 | 粒子最小尺寸 | | maxWidth | number | 4 | 粒子最大尺寸 | | widthScale | number | 1 | 粒子缩放比例 | | image | HTMLImageElement | null | null | 风向瓦片图片 | | color | number[] | [255,255,255,255] | 粒子颜色 |