生成连续的颜色可视化

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

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

const colorParams = {
  layer: layer,
  valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
  view: view,
  theme: "above-and-below",
  outlineOptimizationEnabled: true
};

colorRendererCreator.createContinuousRenderer(colorParams)
  .then((response) => {
    // set the renderer to the layer
    layer.renderer = response.renderer;
});

要生成滑块使用的直方图，只需将类似的参数传递给 histogram() 函数。然后，您可以将生成的对象传递给 ColorSlider 。

histogram({
  layer: layer,
  valueExpression: colorParams.valueExpression,
  view: view,
  numBins: 70
}).then((histogramResult) => {
  // Construct a color slider from the result of both
  // smart mapping renderer and histogram methods
  const colorSlider = ColorSlider.fromRendererResult(rendererResult, histogramResult);
  colorSlider.container = "slider";
  colorSlider.primaryHandleEnabled = true;
  view.ui.add("containerDiv", "bottom-left");
});

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

function changeEventHandler () {
  const renderer = layer.renderer.clone();
  const colorVariable = renderer.visualVariables[0].clone();
  const outlineVariable = renderer.visualVariables[1].clone();
  colorVariable.stops = colorSlider.stops;
  renderer.visualVariables = [ colorVariable, outlineVariable ];
  layer.renderer = renderer;
}

colorSlider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);

注意

请记住，在大多数应用程序中应避免生成渲染器，因为会影响最终用户的性能成本。如智能制图指南主题所述，Smart Mapping API 设计用于两种类型的应用程序：数据探索应用程序和类似于 GeoScene Online 的可视化创作应用程序。在所有其他情况下，渲染器应保存到图层或使用任何渲染器类手动创建。