我的建筑物没有在 arcgis 3D 中突出显示

Question

我是新手，但我正在尝试制作宾夕法尼亚州一个半隐蔽小镇的街道的 3D 地图。我有一个 geojson 文件，它指定了房地产地块及其数据，但没有指定建筑物的高度或标高。我正在使用 ArcGis 开发人员。当页面呈现时，我得到了从我指定的角度看到的地块，但是建筑物没有正确拉伸。由于我正在修改我在网上找到的代码，因此我可能包含了一些不适用于我的页面的内容。我制作了一个 codepen，但它根本没有显示挤压：https://codepen.io/lschneiderman/pen/mdVJbOm?editors=0011

我收到以下错误消息：

[esri.layers.graphics.sources.GeoJSONSource] Some fields types couldn't be inferred from the features and were dropped 

dojo.js:253 [esri.views.3d.layers.graphics.Graphics3DCore] Graphic in layer 17285dfb501-layer-0 has no symbol and will not render

我的 HTML：

 <div id="viewDiv"></div>

CSS：

html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

JS：

require([
              "esri/Map",
              "esri/views/SceneView",
              "esri/layers/GeoJSONLayer",
              "esri/layers/SceneLayer"
            ], function(Map, SceneView, GeoJSONLayer, SceneLayer) {
              const geojsonLayer = new GeoJSONLayer({
                url:
                  "https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson"
              });

              geojsonLayer.elevationInfo = {
                mode: "relative-to-ground",
                featureExpressionInfo: {
                  expression: "$feature.elevation"
                },
                unit: "feet"
              };

              const heightVV = {
                type: "size",
                valueExpression: "$feature.height",
                valueUnit: "feet"
              };

              geojsonLayer.renderer = {
                type: "unique-value",
                field: "CLASSDESC__asmt",
                uniqueValueInfos: [
                  {
                    value: "COMMERCIAL",
                    symbol: {
                      type: "polygon-3d",
                      symbolLayers: [
                        {
                          type: "extrude",
                          material: {
                            color: "#D06152"
                          }
                        }
                      ]
                    }
                  },
                  {
                    value: "RESIDENTIAL",
                    symbol: {
                      type: "polygon-3d",
                      symbolLayers: [
                        {
                          type: "extrude",
                          material: {
                            color: "#4A9B89"
                          }
                        }
                      ]
                    }
                  }
                ],
                visualVariables: [heightVV]
              };

              const map = new Map({
                basemap: "gray-vector",
                ground: "world-elevation",
                layers: [
                  geojsonLayer,
                  new SceneLayer({
                    url:
                      "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Manhattan/SceneServer",
                    renderer: {
                      type: "simple",
                          symbol: {
                            type: "mesh-3d",
                                symbolLayers: [
                                      {
                                        type: "fill",
                                        material: {
                                          color: "white"
                                        },
                                        edges: {
                                          type: "solid",
                                          color: [100, 100, 100, 0.5],
                                          size: 0.5
                                        }
                                      }
                                ]
                          } //end symbol, line 93
                      } //end renderer
                  })//end SceneLayer
              ] //end layers
            });


              const view = new SceneView({
               container: "viewDiv",
                map: map
              });

            view.goTo({
              target: [-79.869331, 40.350433], // coordinates of crossing
              heading: 90,
              tilt: 45,
                zoom: 30 // instead of a z-value, we provide the zoom level
            }, {
              duration: 0 // tell view not to animate camera movement
            });     
        });

任何帮助将不胜感激！

Answer 1

提供的样本存在以下问题：

缺少 CORS 标头

API 尝试加载 GeoJSON，但浏览器拒绝它并显示以下错误消息：

Access to fetch at 'https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

您必须在运行脚本的同一主机上托管 GeoJSON 文件，或者将 CORS 标头添加到托管 GeoJSON 文件的服务器。对于下面的 CodePen，我下载了 GeoJSON 并将其作为 CodePen 资产再次上传，其中 CORS 标头已正确设置以使其工作：

const geojsonLayer = new GeoJSONLayer({
  url: "https://assets.codepen.io/2969649/parcels-fifth1922.geojson"
});

缺少拉伸的高度属性

GeoJSON 中列出的要素（在本例中为地块）没有高度信息。提供的示例使用 size 视觉变量通过 height 属性挤压多边形：

const heightVV = {
  type: "size",
  valueExpression: "$feature.height",
  valueUnit: "feet"
};

因为没有名为height 的属性，所以所有多边形都被拉伸到 0 英尺。您可以为 GeoJSON 中的所有特征添加相应的属性，也可以简单地在示例中定义一个常量，该常量将应用于所有拉伸多边形：

geojsonLayer.renderer = {
  type: "simple",
  symbol: {
    type: "polygon-3d",
    symbolLayers: [{
      type: "extrude",
      size: 50,  // extrude all buildings by 50 meters
      material: {
        color: "#D06152"
      }
    }]
  }
}

请参阅以下 CodePen 以获取具有上述包裹的工作版本： https://codepen.io/arnofiva/pen/474ecc855475ced8d50f3f121988649f?editors=0010

您可能需要查看以下 ArcGIS API for JavaScript 资源：

• Sample: extruding building footprints
• Fundamentals for Building 3D Web Apps (Youtube)
• Practical Guide for Building a 3D Web App from 2D Data (Youtube)