格点填值

我们先看看格点标签图层最常见的应用格点填值

创建数据解析器

格点标签图层是用来展示格点数据的，所以这里应该使用格点类数据解析器。下面示例中使用的是MQE格式的数据。

const gridOptions: IGridDataOptions = {
  xStart: 0,
  xDelta: 0.5,
  xSize: 720,
  yStart: 90,
  yDelta: -0.5,
  ySize: 361
};
ensureGridDataOptions(gridOptions);
const provider = await GrayImageGridDataProvider.fromURL("public/demos/data/mqe/GFS0P50_20220411020000_precp_single_33300.mqe", false, {
  gridOptions,
  scale: 0.1,
  offset: 0,
  dataType: GridDataType.UInt16,
  algo: 1,
  autoLoadToMemory: true
});

创建样式

格点标签图层的可配置样式，请查看IGridLabelStyleOptions

const style: IGridLabelStyleOptions = {
  text: {
    data: "#decimal?len=1",      //保留1位小数的格点值
    color: "black",
    strokeWidth:1,
    visible: (val: number) => {  //仅在格点值>=0.01时，值才可见
      return val >= 0.01;
    }
  }
}

创建图层

const labelLayer = new LGridLabelLayer({
  name: "格点填值",
}).setDrawOptions(style).setDataSource(provider)
map.addLayer(labelLayer);

Retina高清渲染

LGridLabelLayer图层支持Retina高清渲染，在全局配置retina生效的前提下consts.checkRetina = true（框架默认开启），将图层的构建参数ignoreRetina设置为false即可。

const labelLayer = new LGridLabelLayer({
  name: "格点填值",
  ignoreRetina: false
})

绘制间隔

样式中interval参数可控制标签的间隔，当需要调节标签显示的疏密时，可进行调节，默认是[50, 50]。

const style: IGridLabelStyleOptions = {
  interval: [30, 30]
  text: {
    ...
  }
}

完整示例

该示例中包含了格点填色以及格点填值图层