格点填值
我们先看看格点标签图层最常见的应用格点填值
创建数据解析器
格点标签图层是用来展示格点数据的,所以这里应该使用格点类数据解析器。下面示例中使用的是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: {
...
}
}
完整示例
该示例中包含了格点填色以及格点填值图层
No Comments