根据实际高度拉伸建筑覆盖区

此示例演示如何基于存储在属性字段中的实际高度在 3D 模式下拉伸建筑物覆盖区（面要素）。在某些情况下，用户只想知道要素的位置，例如工程区域、道路、建筑物等。数据可以存储在单个图层中，其中所有要素必须使用相同的符号或唯一类型进行可视化。

在本例中，我们将使用 UniqueValueRenderer 根据每个要素的建筑类型对其进行着色。我们还将使用可视化变量根据数值属性拉伸每个要素。

在完成以下步骤之前，您应该熟悉视图、地图和 FeatureLayer。如有必要，请先完成以下教程：

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

1. 为每种类型的类型创建一个符号

虽然 3D SceneViews 支持所有符号类型，但建议仅在 SceneViews 中工作时使用 3D 符号。

由于建筑物覆盖区图层中的要素是面，因此我们需要为具有不同颜色的每种建筑物类型创建 PolygonSymbol3D。PolygonSymbol3D 与所有其他 3D 符号一起是保存一个或多个符号图层的容器。Symbol3DLayer 类定义了 3D 符号的颜色和大小。

在这种情况下，我们需要将一个 ExtrudeSymbol3DLayer 添加到 PolygonSymbol3D，以便我们可以从表面拉伸多面。为了更好地区分拉伸的 3D 形状，我们在 ExtrudeSymbol3DLayer 上设置了边属性，以渲染轮廓边。

要详细了解 3D 符号及其与符号图层的关系，请参阅 Symbol3D、Symbol3DLayer 及其子类的文档。在下面的示例中，我们生成带有函数的符号。

function getSymbol(color) {
  return {
    type: "polygon-3d", // autocasts as new PolygonSymbol3D()
    symbolLayers: [
      {
        type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
        material: {
          color: color
        },
        edges: {
          type: "solid",
          color: "#999",
          size: 0.5
        }
      }
    ]
  }
}

2. 创建 UniqueValueRenderer 的实例

在定义如何基于字段值可视化要素时，我们必须使用 UniqueValueRenderer。最多可以使用三个字段来创建各种类型组合。在本例中，我们将基于一个字段对具有不同颜色的要素进行着色：TYPE。

const renderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()
  // the default symbol indicates all other building types
  defaultSymbol: getSymbol("#FFFFFF"),
  defaultLabel: "其他",
  field: "TYPE" // building type
};

3. 将唯一值与每个符号匹配

您可以通过以下两种方式之一将符号与唯一字段值进行匹配：在构造函数中使用 uniqueValueInfos...

const renderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()
  // the default symbol indicates all other building types
  defaultSymbol: getSymbol("#FFFFFF"),
  defaultLabel: "其他",
  field: "TYPE",

  // match symbols to unique values here
  uniqueValueInfos: [
    {
      value: "Residential",
      symbol: getSymbol("#A7C636"),
      label: "Residential"
    },
    {
      value: "Commercial",
      symbol: getSymbol("#FC921F"),
      label: "Commercial"
    },
    {
      value: "Hotel/Motel",
      symbol: getSymbol("#ED5151"),
      label: "Hotel/Motel"
    },
    {
      value: "Apartment Rentals",
      symbol: getSymbol("#149ECE"),
      label: "Apartment Rentals"
    }
  ]
};

或使用 addUniqueValueInfo() 方法。

hwyRenderer.addUniqueValueInfo("Residential", getSymbol("#A7C636"));

4. 添加大小视觉变量以拉伸实际高度

最后，为了拉伸每个建筑物的实际高度，我们将向渲染器中的 visualVariables 数组添加一个大小可视化变量。这只需要三个属性：type、field 名称，以及 valueUnit 如果拉伸值采用米以外的任何单位。在本例中，拉伸值以米为单位，因此我们仅设置 type 和 field。

const renderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()

  // set properties from previous steps here

  // define size visual variable based on height values in a field
  visualVariables: [
    {
      type: "size",
      field: "HEIGHT"
    }
  ]
};