格点风场

格点标签中除了包含文字标签外，也能添加图片标签。

创建数据解析器

风场数据我们使用风场解析器，MemoryWindDataProvider专门用于构建风场数据，风场数据由UV或者风向风速构成，在QE中，使用两个格点数据访问器（使用U和V，或者使用风向和风速）可以构建一个风场数据访问器MemoryWindDataProvider，MemoryWindDataProvider中可以进行UV和风向风速的自动换算。

const uBuffer = await getRaw("public/demos/data/u500.dat")
const uProvider = new QEGridDataProvider(uBuffer)
const vBuffer = await getRaw("public/demos/data/v500.dat")
const vProvider = new QEGridDataProvider(vBuffer);
const windProvider = new MemoryWindDataProvider(uProvider, vProvider, {
  lazyCalc: false, //不延迟计算，即在构建的时候就计算风向风速
  isUV: true       //是uv分量
});

创建样式

const windLabelStyle: IGridLabelStyleOptions = {
  text: {
    data: "#decimal",       //取格点数据并保留1位小数
    offset: [0, 15]         //文字离中心点的偏移量
  },
  image: {
    data: "image-wind#res", //"image-wind-arrow#res", 图片内容：获取资源ID为"image-wind"的分段规则，风杆图片
    angle: "#degree2arc|1", //图片旋转角度：格点单元中第二个序列值（即风向）的值转弧度
    color: "color-wind#res" //图片颜色：获取资源ID为"color-wind"的分段规则
  }
}

创建图层

const windLabelLayer = new LGridLabelLayer({
  name: "风向风速",
  debugShowPerformance: true,
  accurateYDelta: true //对于范围较大的数据，设置后会根据当前点所在的实际纬度计算y值在径向上的间隔变化，会稍微增加渲染时间。
}).setDrawOptions(windLabelStyle).setDataSource(windProvider);
map.addLayer(windLabelLayer);

格点风杆字体

风杆有两种显示方式，上面示例的风杆是使用的图片，格点标签图层中也可以使用风杆字体

...
const windLabelStyle: IGridLabelStyleOptions = {
    text: {
        data: "#wind",           //使用wind这个loader将风速值转换为风杆字体编码
        font: "bold 45px wind",  //格点字体
        angle: "#degree2arc|1"   //文字旋转角度：格点单元中第二个序列值（即风向）的值转弧度
    }
}
...

完整示例