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