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资源：

我的建筑物没有在arcgis 3D中挤压

1 个答案:

缺少CORS标头

挤出的缺少高度属性