根据真实世界尺寸 (2D) 缩放要素尺寸

尝试一下在线预览

此示例演示如何根据真实世界的大小或测量值来可视化 2D 点要素。此应用程序中的图层包含表示树位置的点数据。该数据有一个字段，其中包含以英尺为单位的树冠大小。我们将使用该字段中的数据创建符号，以表示与其他地图要素相关的树冠的真实世界大小，而不管比例如何。

在本例中，我们将使用带有视觉变量的 SimpleRenderer ，根据每个要素在现实世界中的实际直径改变其直径。

在完成以下步骤之前，您应该熟悉 views ， Map 和 FeatureLayer。如果有必要，请先完成以下教程：

此应用程序的基本组件，例如创建 Map 和 MapView 类的实例以及理解 HTML 和 CSS 结构将不会被审查。如果您需要熟悉此应用程序中的这些组件，请参阅上面列出的教程。作为一般规则，上述教程中讨论的介绍性原则适用于文档中的大多数示例。

1. 创建一个 SimpleRenderer 并给它分配一个默认符号

在这个应用程序中，我们需要在渲染器的符号属性上设置一个默认符号。我们不需要在符号上设置 color 或 size 等值，因为这些值无论如何都会被视觉变量覆盖。

const renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: { type: "simple-marker" }
};

2. 在渲染器上设置大小和颜色视觉变量

要根据每个要素相对于其他要素的实际大小来缩放每个要素的大小，我们必须在渲染器的 visualVariables 属性上设置一个大小视觉变量。在这种情况下，设置可视变量的 valueUnit 和 valueRepresentation 属性很重要。这些属性向渲染器表明，要素的屏幕尺寸必须根据存储在指定 field中的实际尺寸进行缩放。

const renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: { type: "simple-marker" }, // autocasts as new SimpleMarkerSymbol()
  visualVariables: [
    {
      type: "size",
      field: "Width_EW", // tree canopy diameter
      valueUnit: "feet", // values of Width_EW are expressed in feet
      valueRepresentation: "diameter" // indicates the value in `field` is a diameter
    },
    {
      type: "color",
      field: "C_Storage", // Carbon storage
      stops: [
        { value: 0, color: "#f7fcb9" }, // features with zero carbon
        { value: 8000, color: "#31a354" } // features with 8000 carbon
      ]
      // Values between 0-8000 will be assigned a color proportionally along the ramp
    }
  ]
};