涌浪

这里我们将使用LWindLayer图层来实现涌浪的效果。

创建数据解析器

首先解析我们的格点数据,这里使用的涌浪的数据与风场数据类似，都是由UV分量进行表示，存储格式上也是常见的数组形式，在QE中，数组类型的格点数据可以使用Array2DGridDataProvider来解析，然后合并为一个矢量场的数据解析器即可。

const json = await getJSON("public/demos/data/wave.json");
const options: IGridDataOptions = {
  xStart: 72,
  xDelta: 0.375,
  xSize: 209,
  yStart: 66.5,
  yDelta: -0.375,
  ySize: 178
}
ensureGridDataOptions(options);
const uProvider = new Array2DGridDataProvider(json[0].data, { gridOptions: options });
const vProvider = new Array2DGridDataProvider(json[1].data, { gridOptions: options });
const waveProvider = new MemoryWindDataProvider(uProvider, vProvider, { isUV: true, lazyCalc: true });

创建样式

然后创建样式。涌浪的样式和风场基本类似，唯一区别的是我们使用了一张图片（texture）来进行涌浪的模拟，因为常规的风场是流线型的，而涌浪有所区别。

const windStyle: IWindLayerStyleOptions = {
  usePoint: true,                          //是否使用点渲染
  pointSize: isMoblie() ? 32 : 16,         //点的尺寸
  color: "color-wind#res",                 //颜色规则
  fadeRate: 0.96,                          //消失速度
  minOpacity: 0.3,                         //最小透明度
  interpMethod: WindInterpMethodType.fast, //数据插值方式
  texture: "wave-32#res",                  //点贴图
  speedFactor: 0.5,                        //速度缩放系数
}

创建图层

const windLayer = new LWindLayer({
  name: "涌浪",                             //图层名称
  count: 64,                               //粒子数量参数
}).setDrawOptions(windStyle).setDataSource(waveProvider);
map.addLayer(windLayer);

完整示例