生成数据驱动的连续大小可视化

此示例演示如何基于从 FeatureLayer 中的数字字段返回的统计数据生成数据驱动的连续大小可视化。

这是通过大小渲染器创建者帮助对象中的 createContinuousRenderer() 来完成的。生成渲染器所需的只是要素图层和字段名称。

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 。

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 的统计信息设置滑块后，您可以侦听其事件以使用事件对象中的输出视觉变量更新图层的渲染器。

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 的可视化创作应用程序。在所有其他情况下，渲染器应保存到图层或使用任何渲染器类手动创建。