@ruijingrs/deckgl-windy-layer

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]	粒子颜色