尝试一下在线预览此示例演示如何根据从 3D SceneView 中 FeatureLayer 中的数字字段返回的统计信息,使用连续颜色和大小生成单变量数据驱动的可视化。
这是通过 univariateColorSize 渲染器创建者帮助对象 中的 createContinuousRenderer() 来完成的。 生成 3D 渲染器所需的只是要素图层、字段名称、符号类型和 SceneView 实例。
1
2
3
4
5
6
7
8
9
10
11
12
13
const params = {
layer: layer,
field: "POP",
view: view,
symbolType: "3d-volumetric",
minValue: 0,
maxValue: 1500000
};
colorAndSizeRendererCreator.createContinuousRenderer(params).then((response) => {
// set the renderer to the layer
povLayer.renderer = response.renderer;
});
要生成滑块使用的直方图,只需将类似的参数传递给 histogram() 函数。然后你可以将结果对象传递给ColorSizeSlider 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
histogram({
layer: layer,
field: params.field,
numBins: 40,
minValue: params.minValue,
maxValue: params.maxValue
})
.then((histogramResult) => {
const slider = ColorSizeSlider.fromRendererResult(rendererResult, histogramResult);
slider.container = "slider";
view.ui.add("containerDiv", "bottom-left");
})
使用 FeatureLayer 的统计信息设置滑块后,您可以侦听其事件以使用事件对象中的输出视觉变量更新图层的渲染器。
1
2
3
4
5
6
7
function changeEventHandler () {
const renderer = layer.renderer.clone();
renderer.visualVariables = slider.updateVisualVariables(renderer.visualVariables);
layer.renderer = renderer;
}
slider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);
注意
请记住,在大多数应用程序中应避免 生成 渲染器,因为会影响最终用户的性能成本。 如 智能制图 指南主题所述,Smart Mapping API 设计用于两种类型的应用程序:数据探索应用程序和类似于 GeoScene Online 的可视化创作应用程序。 在所有其他情况下,渲染器应保存到图层或使用任何 渲染器类 手动创建。
其他可视化示例和资源