gis - 使用 ArcGIS API for JavaScript 在 3D 中堆叠拉伸(stretch)多边形

Question

我有多边形几何图形，并使用 ExtrudeSymbol3DLayer 在 3D 中可视化它们，如 SDK documentation 中所述和 sample :

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 挤压件吗？例如，如果我有一个纽约市的几何图形，我想从底部拉伸(stretch)到一种颜色的大约 5m，一种颜色的 5m 到 10m，等等。有点像制作堆叠条形图，但在更多地理方式。任何输入将不胜感激!

Answer 1

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

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

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

之后，您可以将挤出的多边形放置在一定的高度 relative-to-ground 使其飞起来。下面的示例将渲染地面以上 10 米的所有多边形。

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

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

下面的示例代码通过添加

• 一个Arcade elevationInfo
的表达式
• 一个VisualVariable对于多边形的拉伸(stretch)高度
• 一个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