尝试一下在线预览T此示例演示如何生成具有不同主题的数据驱动的连续大小可视化:above
,below
和 above-and-below
。 这是通过 univariateColorSize 或 size 渲染器创建者对象中的 createContinuousRenderer() 方法完成的。
这些主题非常适合某些数据变量,例如两年之间的人口变化。 此示例中的图层使用 Arcade 表达式来计算从 2000 年到 2010 年的人口变化。
1
2
3
// TOTHU10 = Total population in 2010
// TOTHU00 = Total population in 2000
$feature.TOTHU10 - $feature.TOTHU00
您可以使用该变量创建几个很好的可视化效果。上面提到的主题帮助用户回答以下问题。
从 2000 年到 2010 年,家庭数量在哪里增加?
主题: above
1
2
3
4
5
6
7
8
9
10
11
12
const params = {
layer,
view,
theme: `above`,
valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
valueExpressionTitle: `Increase in number of households 2000-2010`,
minValue: -1000,
maxValue: 2000
};
const { renderer } = await sizeRendererCreator.createContinuousRenderer(params);
layer.renderer = renderer;
从 2000 年到 2010 年,家庭数量在哪里减少?
主题: below
1
2
3
4
5
6
7
8
9
10
11
12
const params = {
layer,
view,
theme: `below`,
valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
valueExpressionTitle: `Decrease in number of households 2000-2010`,
minValue: -1000,
maxValue: 2000
};
const { renderer } = await sizeRendererCreator.createContinuousRenderer(params);
layer.renderer = renderer;
从 2000 年到 2010 年,家庭数量在哪里增加或减少?
主题: above-and-below
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const params = {
layer,
view,
theme: `above-and-below`,
valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
valueExpressionTitle: `Change in number of households 2000-2010`,
symbolOptions: {
// Other symbol styles include the following:
//
// "caret" | "circle-caret" | "arrow" | "circle-arrow" |
// "plus-minus" | "circle-plus-minus" | "square" | "circle" |
// "triangle" | "happy-sad" | "thumb"
symbolStyle: "arrow"
}
minValue: -1000,
maxValue: 2000
};
const { renderer } = await univariateColorSizeRendererCreator.createContinuousRenderer(params);
layer.renderer = renderer;
注意
请记住,在大多数应用程序中应避免 生成 渲染器,因为会影响最终用户的性能成本。 如 智能制图 指南主题所述,Smart Mapping API 设计用于两种类型的应用程序:数据探索应用程序和类似于 GeoScene Online 的可视化创作应用程序。 在所有其他情况下,渲染器应保存到图层或使用任何 渲染器类 手动创建。
其他可视化实例和资源