大小视觉变量主题

尝试一下在线预览

T此示例演示如何生成具有不同主题的数据驱动的连续大小可视化：above ，below 和 above-and-below。这是通过 univariateColorSize 或 size 渲染器创建者对象中的 createContinuousRenderer() 方法完成的。

这些主题非常适合某些数据变量，例如两年之间的人口变化。此示例中的图层使用 Arcade 表达式来计算从 2000 年到 2010 年的人口变化。

// TOTHU10 = Total population in 2010
// TOTHU00 = Total population in 2000
$feature.TOTHU10 - $feature.TOTHU00

您可以使用该变量创建几个很好的可视化效果。上面提到的主题帮助用户回答以下问题。

从 2000 年到 2010 年，家庭数量在哪里增加？

主题: above

const params = {
  layer,
  view,
  theme: `above`,
  valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
  valueExpressionTitle: `Increase in number of households 2000-2010`,
  minValue: -1000,
  maxValue: 2000
};

const { renderer } = await sizeRendererCreator.createContinuousRenderer(params);
layer.renderer = renderer;

size-themes-above

从 2000 年到 2010 年，家庭数量在哪里减少？

主题: below

const params = {
  layer,
  view,
  theme: `below`,
  valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
  valueExpressionTitle: `Decrease in number of households 2000-2010`,
  minValue: -1000,
  maxValue: 2000
};

const { renderer } = await sizeRendererCreator.createContinuousRenderer(params);
layer.renderer = renderer;

size-themes-below

从 2000 年到 2010 年，家庭数量在哪里增加或减少？

主题: above-and-below

const params = {
  layer,
  view,
  theme: `above-and-below`,
  valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
  valueExpressionTitle: `Change in number of households 2000-2010`,
  symbolOptions: {
    // Other symbol styles include the following:
    //
    // "caret" | "circle-caret" | "arrow" | "circle-arrow" |
    // "plus-minus" | "circle-plus-minus" | "square" | "circle" |
    // "triangle" | "happy-sad" | "thumb"
    symbolStyle: "arrow"
  }
  minValue: -1000,
  maxValue: 2000
};

const { renderer } = await univariateColorSizeRendererCreator.createContinuousRenderer(params);
layer.renderer = renderer;

size-themes-above-and-below

注意

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