此示例演示如何使用三个可视变量来有效地创建多元数据可视化,以表示与当前天气条件相关的三个数据值:
可视化变量沿着一个连续的斜坡可视化数据,允许数据自己说话,而不是局限于任意的类断点。
基于数据值重写呈现程序符号的颜色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const colorVariable = {
type: "color",
// attribute field to visualize
field: "TEMP",
// map data values to colors
// all other values are linearly interpolated
stops: [
{ value: 20, color: "#2b83ba" },
{ value: 35, color: "#abdda4" },
{ value: 50, color: "#ffffbf" },
{ value: 65, color: "#fdae61" },
{ value: 80, color: "#d7191c" }
]
}
根据数据值重写渲染器符号的大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const referenceScale = 9244650;
const sizeVariable = {
type: "size",
// attribute value to visualize
field: "WIND_SPEED",
// features with the minDataValue are bounded to the minSize
minDataValue: 0,
// features with the maxDataValue are bounded to the maxSize
maxDataValue: 60,
minSize: {
type: "size",
valueExpression: "$view.scale",
// adjust the minSize of the features by scale
stops: [
{ value: referenceScale, size: 8 },
{ value: referenceScale*2, size: 6 },
{ value: referenceScale*4, size: 4 },
{ value: referenceScale*8, size: 2 }
]
},
maxSize: {
type: "size",
valueExpression: "$view.scale",
// adjust the max size by scale
stops: [
{ value: referenceScale, size: 40 },
{ value: referenceScale*2, size: 30 },
{ value: referenceScale*4, size: 20 },
{ value: referenceScale*8, size: 10 }
]
}
};
基于属性字段的值旋转符号。该值按字面意思解释为地图上的地理角度。
1
2
3
4
5
const rotationVariable = {
type: "rotation",
field: "WIND_DIRECT",
rotationType: "geographic"
};
一个警告
虽然您可以向渲染器添加多个视觉变量,但使用太多视觉变量会使地图混乱且难以阅读。 这是一个很好的例子,说明两个或多个视觉变量因为彼此相关而可以很好地协同工作。
可视化多个互不相关的数据属性会产生误导,可能会给地图读取器带来混乱。
Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.