我是新手，但我正在尝试为宾夕法尼亚州半昏暗的小镇中的街道制作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
});
});
任何帮助将不胜感激！
提供的样本存在以下问题：
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资源：