矢量样式
矢量样式主要是LGeoJSONLayer
图层的样式配置。因为在QE中,矢量数据内部使用GeoJSON进行表达,我们知道GeoJSON对象包含了点线面,所以我们的矢量样式的配置内容也是点、线、面三个方面。这里我们重点从配置方式的角度展开。
常量
最简单的情况也就是配置一个固定值。
const style={
point:{
color:"red",
size:3,
strokeColor:"white"
},
polyline:{
color:"yellow",
width:3,
dashArray:[5,5,5,5]
},
polygon:{
color:"orange",
shadowColor:"rgba(200,200,100,0.6)"
}
}
const layer = new LGeoJSONLayer().setDataSource(provider).setDrawOptions(style);
在设置了点线面的样式后,点线面就会显示到地图的对应位置上,气象应用中经常会需要在点线面的附近展示数据信息,我们只需分别在点、线、面的样式中加上标签的样式配置即可。标签的配置是数组形式的,所以一个矢量单位的附近是可以添加多个标签的。可以增加文本标签和图片标签。
分级规则
如果想让点颜色按照气温值分级填色,可以使用分级规则stops
const style = {
point: {
color: {
"stops": [ //分级规则数组
{
"stop": "rgb(37, 0, 45)",
"value": -60
},
{
"stop": "rgb(119, 32, 117)",
"value": -40
},
{
"stop": "rgb(176, 33, 198)",
"value": -32
},
...
],
"fieldName": "TEM" //用于分段的属性字段名,必选项
}
}
}
函数
江苏省内的点显示红色,其余显示蓝色
const style = {
point:{
color:(feature) => {
if (feature.properties["Province"] === "江苏省") {
return "red";
} else {
return "blue";
}
},
}
}
属性选择器
$为属性选择器也称字段选择器,在配置标签值的时候,用于取geojson的properties里面的某个属性值。
const style = {
point: {
color: "red",
label: {
text: {
data: "$TEM",
}
}
}
}
loader
如果当资源管理器中已经存在该分段规则,则可使用资源loader(#res)来加载。
const style = {
point: {
color: "color-temp#res?field=TEM",
}
}
具体可配置的样式属性请查看IFeatureStyleOptions
。
No Comments