加载器-loader
加载器，也称loader，框架中默认使用 # + 内置loader名称 的表现形式，如#res，#degree2arc等等。用在样式配置中，这样通过样式文件来配置的时候也可以调用函数。
#res-资源加载器
资源加载器，就是根据资源ID获取资源管理器中的资源。当资源是stopRules的时候支持field参数，用于替换资源中自带的fieldName。
const json await getJSON("public/demos/data/autostation011.json");
const dataSource = new CimissStationFeatureProvider(json);
const layer = new LGeoJSONLayer().setDataSource(dataSource).setDrawOptions({
point:{
color:"color-temp#res?field=TEM",
}
})
layer.addTo(map);
上面示例中的"color-temp#res?field=TEM"表示获取资源管理器中资源ID为"color-temp"的资源。因为该资源是个stopRules类型，并且该stops中默认的fieldName是"0"，所以这里需要设置field=TEM用来替换资源中自带的fieldName。
我们再看下资源构建文件中构建了哪些资源。（省略号表示类似配置）
{
"images": {
"precp": "demos/images/rain.png",
"heart": "demos/images/heart.png",
...
},
"stopRules": {
"color-temp": "demos/styles/temp.color.rules.json",】
...
},
"featureStyles": {
"tempStyle": "demos/styles/temp.feature.style.json",
...
},
"jsonFiles": {
"mask-china": "demos/data/china.bounds.zip",
}
}
上面示例中颜色的配置color:"color-temp#res?field=TEM"中加载的资源就是对应这里资源ID为"color-temp"的资源。
我们再看一个使用资源加载器获取图片类型资源的例子。
const json await getJSON("public/demos/data/autostation011.json");
const dataSource = new CimissStationFeatureProvider(json);
const layer = new LGeoJSONLayer().setDataSource(dataSource).setDrawOptions({
point: {
color: "color-temp#res?field=TEM",
label: [{
image: {
data: "precp#res",
offset: [-32, -16],
shadowColor: "red",
visible: false
},
}]
}
})
layer.addTo(map);
这里的data: "precp#res"表示使用资源ID为precp的图片。可以发现，上面的资源构建文件中是有配置资源ID为precp的内容的。
上面两个例子都是矢量样式，我们再看一个格点样式中使用#res资源加载器的情况。fillColor: "color-precp#res"这里也是获取的分段规则，因为这里是格点数据，格点数据设置分段规则时fieldName表示格点序列值，因为stops中默认的fieldName是"0"，就是表示格点值的，所以这里不再需要替换fieldName。
const style: IPixelLayerStyleOptions = {
fillColor: "color-precp#res",
fillMode: GridDataGLFillMode.bitmap
}
const layer = new LPixelLayer().setDrawOptions(style).setDataSource(provider);
map.addLayer(layer);
#decimal-取固定小数位
这个#decimal加载器是一个取固定小数位的函数，将提供的数值，根据参数中len字段的配置进行精度设置。不传len的话，默认是保留1位小数。我们分别在矢量样式和格点样式中看下是如何使用的。
在矢量样式中，#decimal设置的数值就是#decimal之前的数据，看下面示例是LGeoJSONLayer图层的一个样式配置
const style = {
point: {
size: 3,
color: "color-precp#res?field=PRE_Sum_24h",
label: [
text: {
data: "$PRE_Sum_24h#decimal?len=1" //点标签的文本值取PRE_Sum_24h字段并保留1位小数
}
]
}
}
所以上面示例 data: "$PRE_Sum_24h#decimal?len=1" 表示点标签为保留1位小数的24小时降水的值。
在格点样式中，#decimal设置的数值就是格点值，下面示例表示格点标签图层，设置格点值保留1位小数。
const labelLayer = new LGridLabelLayer().setDataSource(provider).setDrawOptions({
text: {
data: "#decimal?len=1" //格点值保留1位小数
}
});
#wind-将风速值转换为风杆字体编码
#wind是加载一个将风速转换为风杆字体标号的函数用于值转换
#wind前面的值表示需要被转换的值，该值将作为参数传进后面的loader函数，下面示例表示在点上加了一个字体风杆的标签，
const style = {
point: {
size: 3,
label: [
text: {
data: "$WIN_S_INST#wind", //将风速值转为风杆字体标号
font: "bold 45px wind", //用wind字体显示
angle: "$WIN_D_INST#degree2arc" //旋转角度
},
]
}
}
上面这个示例中还使用了 #degree2arc loader来进行旋转，#degree2arc 在下面有介绍，可往下查看。
在格点样式中，#wind的使用是一样的，只是格点情况下，默认是对格点值进行转换的，所以#wind前没有任何变量。下面示例是格点风杆字体的样式配置。
const windLabelStyle: IGridLabelStyleOptions = {
text: {
data: "#wind", //将风速值转为风杆字体标号
font: "bold 45px wind", //用wind字体显示
angle: "#degree2arc|1" //旋转角度
}
}
const windLabelLayer = new LGridLabelLayer().setDrawOptions(windLabelStyle).setDataSource(windProvider);
map.addLayer(windLabelLayer);
#degree2arc-将角度值转换为弧度
上面的例子中都使用了#degree2arc，#degree2arc是加载一个将角度值转换为弧度的函数用于值转换，因为我们角度默认是度，而系统使用要求是弧度，所以需要进行数据转换。
在下面的格点样式中，使用方式稍有不同，angle: "#degree2arc|1" ｜后面的值表示格点单元中数据序列，一般用在风场格点数据中，风场格点数据中格点单元有风向风速两个分量，所以|1表示取第2个分量即风向。
const windLabelStyle: IGridLabelStyleOptions = {
text: {
data: "#wind", //将风速值转为风杆字体标号
font: "bold 45px wind", //用wind字体显示
angle: "#degree2arc|1" //旋转角度
}
}
const windLabelLayer = new LGridLabelLayer().setDrawOptions(windLabelStyle).setDataSource(windProvider);
map.addLayer(windLabelLayer);
#subImage-截取图片资源函数
subImage函数的功能是从现有的图片资源中截取一部分，可以同x y w h四个参数表示原图像中开始的xy位置和截取宽高，截取后的图像大小为wh，具体表现尺寸可以在具体的渲染样式中设置。
下面是一个显示格点风杆的图层，风杆使用的是图片资源。
const windLabelStyle: IGridLabelStyleOptions = {
image: {
data: "image-wind#res",
angle: "#degree2arc|1",
color: "color-wind#res"
}
}
const windLabelLayer = new LGridLabelLayer().setDrawOptions(windLabelStyle).setDataSource(windProvider);
map.addLayer(windLabelLayer);
到目前为止还没有出现#subImage，上面设置了图片内容是资源ID为image-wind的资源，我们再看下image-wind这个分级规则中的内容。
{
"stops": [
{
"value": 2,
"stop": "wind#subImage?x=0&y=0&w=32&h=32"
},
{
"value": 4,
"stop": "wind#subImage?x=32&y=0&w=32&h=32"
},
{
"value": 6,
"stop": "wind#subImage?x=64&y=0&w=32&h=32"
},
... //省略类似内容
],
"fieldName": "0"
}
这个分级规则表示从资源ID为wind的图片中截取，从x为0，y为0的位置开始，截取宽度为32，高度为32的一部分图片。
#anaVals-获取分段规则中分析值
该函数的作用是根据资源ID获取分段渲染规则，从分段渲染规则中获取stop值数组返回。内置的loader除了通过"#+loader名称"的方式使用方法外，还可以通过 getFieldLoader 方法直接获取到函数。
import { getFieldLoader } from "quickearth";
const anaVals = getFieldLoader("anaVals")("color-temp");
console.log(anaVals); //[-60, -40, -32, -24, -16, -8, ...]
这样就能获取到资源ID为color-temp的分级规则中所有的value
#weather-将天气现象编码转变为天气现象字体编码
注册新的函数加载器
除了上面这些框架中内置的loader外，我们还可以注册新的函数为loader。
比如我们想使用loader在展示自动站数据中能见度要素时，过滤缺测值，将单位m转换为km，并且保留2位小数。
import { registerFieldLoader } from "quickearth";
registerFieldLoader("vis", (val) => {
if (val > 999990) {
return "";
}
const res = parseFloat((val / 1000).toFixed(2));
return res;
});
注册好后，我们就可以在样式配置中直接使用了
const style = {
point: {
size: 3,
label: [
text: {
data: "$VIS#vis" //点标签的文本值取VIS字段并使用vis这个loader进行数据处理
}
]
}
}
No Comments