Hinzufügen von Grafik zu MapView nach asynchroner Operation

Question

Ich versuche, einige Json-Daten von Geoserver mit ESRI Arcgis Javascript 4.4 API zu ziehen. Alle Komponenten melden sich an der Konsole, aber die view.graphics.add() wirft diesen Fehler:

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) 

ich zu verstehen, warum ich versuche, was ich bin versucht, wird nicht wie erwartet funktioniert, und jede Hilfe würde geschätzt werden. Code ist unter:

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

Ihre Codes funktionieren, wenn ich diese Koordinaten als Pfade verwende. Vielleicht entsprechen Ihre Koordinaten von data.features[0].geometry.coordinates nicht dem Polylinienkoordinatenformat.

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); 
});