尝试一下在线预览此示例演示如何基于从 FeatureLayer 中的数字字段返回的统计数据生成数据驱动的连续大小可视化。
这是通过 大小渲染器创建者帮助对象 中的 createContinuousRenderer() 来完成的。 生成渲染器所需的只是要素图层和字段名称。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var params = {
layer: layer,
view: view,
valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
legendOptions: {
title: "% population living in poverty"
},
minValue: 15,
maxValue: 60,
outlineOptimizationEnabled: true
};
sizeRendererCreator.createContinuousRenderer(params).then(function(response) {
// set the renderer to the layer
povLayer.renderer = response.renderer;
});
要生成滑块使用的直方图,只需将类似的参数传递给 histogram() 函数。 然后,您可以将生成的对象传递给 SizeSlider 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
histogram({
layer: povLayer,
view: view,
valueExpression: sizeParams.valueExpression,
minValue: sizeParams.minValue,
maxValue: sizeParams.maxValue
}).then(function(histogram) {
// add the histogram to the size slider
const sizeSlider = SizeSlider.fromRendererResult(rendererResult, histogramResult);
sizeSlider.container = "slider";
sizeSlider.labelFormatFunction = function(value){
return value.toFixed(1);
}
view.ui.add("containerDiv", "bottom-left");
});
使用 FeatureLayer 的统计信息设置滑块后,您可以侦听其事件以使用事件对象中的输出视觉变量更新图层的渲染器。
1
2
3
4
5
6
7
8
function changeEventHandler () {
const renderer = layer.renderer.clone();
const sizeVariable = renderer.visualVariables[0];
renderer.visualVariables = [ sizeSlider.updateVisualVariable(sizeVariable) ];
layer.renderer = renderer;
}
sizeSlider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);
注意
请记住,在大多数应用程序中应避免 生产 渲染器,因为会影响最终用户的性能成本。 如 智能制图 指南主题所述,Smart Mapping API 设计用于两种类型的应用程序:数据探索应用程序和类似于 GeoScene Online 的可视化创作应用程序。 在所有其他情况下,渲染器应保存到图层或使用任何 渲染器类 手动创建。
其他可视化示例和资源