为 3D 建筑物生成连续的颜色可视化

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

这是通过颜色渲染器创建者帮助对象中的 createContinuousRenderer() 来完成的。生成渲染器所需的只是一个 SceneLayer 和一个字段名称。但是，您可以设置其他参数，包括主题。在这种情况下，我们使用一个above-and-below 主题，它返回一个从中点发散的两种颜色的方案。

const colorParams = {
  layer: layer,
  view: view,
  field: "CNSTRCT_YR",  // construction year
  theme: "above-and-below",
  minValue: 1800,
  maxValue: 2020
};

colorRendererCreator.createContinuousRenderer(colorParams)
  .then((response) => {

    // set the renderer to the layer
    layer.renderer = response.renderer;

    // create the color slider
    const colorSlider = new ColorSlider({
      primaryHandleEnabled: true,
      container: "slider",
      min: response.statistics.min,
      max: response.statistics.max,
      stops: response.visualVariable.stops,
      labelFormatFunction: (value) => {
        return value.toFixed(0);
      }
    });
    // Since data represents years, we don't
    // want values to show decimal places
    colorSlider.viewModel.precision = 0;

  });

使用 SceneLayer 的统计信息构造 ColorSlider 后，您可以监听其事件以事件对象中的输出视觉变量更新图层的渲染器

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

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

注意

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