使用ArcGIS API for JavaScript在3D中堆叠挤出的多边形

Question

我有多边形几何体，并使用 ExtrudeSymbol3DLayer 将它们可视化为 3D，如 SDK 文档 和 示例 中所述：

var symbol = {
  type: "polygon-3d",  // autocasts as new PolygonSymbol3D()
  symbolLayers: [{
    type: "extrude",  // autocasts as new ExtrudeSymbol3DLayer()
    size: 5,  // 5 meters in height
    material: { color: "red" }
  }]
};

有没有办法将这些3D挤出物堆叠在一起？例如，如果我有一个纽约市的几何体，我想从底部向上延伸到大约5米，用一种颜色，从5米到10米用一种颜色，以此类推。有点像制作堆积条形图，但是以更地理化的方式呈现。任何意见都将不胜感激！

- JB94

Answer 1

这可以通过拉伸几何体并使用图层上的 elevationInfo 属性将它们放置在特定高度实现。下面的示例假设您有一个带有多边形几何体的图层（例如FeatureLayer或GeoJSONLayer）。

对于拉伸，告诉图层使用 ExtrudeSymbol3DLayer 渲染多边���。在下面的代码片段中，所有多边形的高度都为5米。

layer.renderer = {
  type: "simple",
  symbol: {
    type: "polygon-3d",
    symbolLayers: [
      {
        type: "extrude",
        size: 5, // height in meters
        material: {
          color: "red"
        }
      }
    ]
  }
}

在那之后，您可以通过将挤出的多边形放置在某个高度相对于地面来使它们飞行。下面的示例将呈现所有多边形在地面上方10米。

layer.elevationInfo = {
  mode: "relative-to-ground",
  offset: 10,
  unit: "meters"
}

由于所有多边形的颜色、高度和离地面的高度都相同，因此它们不会堆叠。我们基本上希望在上述代码片段中为每个多边形设置不同的值。

以下示例代码通过添加以下内容实现：

• elevationInfo的Arcade表达式
• 用于多边形挤压高度的VisualVariable
• 使用UniqueValueRenderer为每个多边形使用不同的颜色

它们都依赖于多边形要素的属性，因此可以通过更改属性值来进行微调。

// Make elevation offset depend on the attribute "elevation"
layer.elevationInfo = {
    mode: "relative-to-ground",
    featureExpressionInfo: {
      expression: "$feature.elevation"
    },
    unit: "meters"
  };

layer.renderer = {
  type: "unique-value",
  visualVariables: [
    // Make the extrusion height depend on the attribute "height"
    {
      type: "size",
      valueExpression: "$feature.height",
      valueUnit: "meters"
    }
  ],
  // Make the color depend on the attribute "usage"
  field: "usage",
  uniqueValueInfos: [
    {
      value: "office",
      symbol: {
        type: "polygon-3d",
        symbolLayers: [
          {
            type: "extrude",
            material: {
              color: "#D06152"
            }
          }
        ]
      }
     },
     ... // Add unique value info for each usage
  ]
};

这是一个运行示例，展示了纽约中央公园中的一些拉伸多边形。 https://codepen.io/arnofiva/pen/4071d4e79a3cb921f42d6a9e83f5b418?editors=1010

- Arno Fiva