在异步操作之后向MapView添加图形

Question

我试图使用ESRI的Arcgis Javascript 4.4 API从Geoserver中提取一些json数据。所有组件都登录到控制台，但view.graphics.add（）抛出这个错误：

Uncaught TypeError: b.spatialReference.equals is not a function 
    at e._projectGeometry (MapView.js:505) 
    at e.doRender (MapView.js:503) 
    at e.b.processRender (MapView.js:293) 
    at b.renderChild (MapView.js:500) 
    at b.e.renderChildren (MapView.js:290) 
    at b.e.doRender (MapView.js:286) 
    at b.processRender (MapView.js:293) 
    at n.renderChild (MapView.js:427) 
    at n.e.renderChildren (MapView.js:290) 
    at n.e.doRender (MapView.js:286) 

我试图理解为什么什么我试图不按预期工作，任何帮助会不胜感激。代码如下：

function fetchJson(url) { 
    return xhr.get({ 
     url: url, 
     handleAs:"json", 
    }) 
} 
var map = new Map({ 
    basemap: "dark-gray" 
}); 
var view = new MapView({ 
    container: "view", 
    map: map, 
    zoom: 11, 
    center: [-84.34, 33.93], 
    padding: { 
     left: 320 
    } 
}); 
view.then(function() { 
    fetchJson(samplejsonlink) 
    .then(function (data) { 
     console.log(data.features[0].geometry.coordinates) 
     var polyline = { 
      type: "polyline", 
      paths: data.features[0].geometry.coordinates, 
      spatialReference: {wkid : 4326} 
     } 
     console.log(polyline); 
     var polylineSymbol = { 
       type: "simple-line", 
       color: [226, 119, 40], 
       width: 4 
      }; 
     console.log(polylineSymbol); 
     var polylineAtt = { 
       Name: "ExampleName",     
      }; 
     console.log(polylineAtt) 
     var polylineGraphic = new Graphic({ 
      geometry: polyline, 
      symbol: polylineSymbol, 
      attributes: polylineAtt 
     }) 
     console.log(polylineGraphic); 
     view.graphics.add(polylineGraphic); 
    }) 
}) 

Answer 1

当我使用此坐标作为路径时，您的代码正在工作。也许你的坐标从data.features[0].geometry.coordinates与Polyline坐标格式不匹配。

view.then(function() { 
    var polyline = { 
     type: "polyline", 
     paths: [ 
      [-111.30, 52.68], 
      [-98, 49.5], 
      [-93.94, 29.89] 
     ], 
     spatialReference: { wkid: 4326 } 
    } 
    console.log(polyline); 
    var polylineSymbol = { 
     type: "simple-line", 
     color: [226, 119, 40], 
     width: 4 
    }; 
    console.log(polylineSymbol); 
    var polylineAtt = { 
     Name: "ExampleName", 
    }; 
    console.log(polylineAtt) 
    var polylineGraphic = new Graphic({ 
     geometry: polyline, 
     symbol: polylineSymbol, 
     attributes: polylineAtt 
    }) 
    console.log(polylineGraphic); 
    view.graphics.add(polylineGraphic); 
});