비동기 작업 후 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의 좌표가 폴리 라인 좌표 형식과 일치하지 않을 수 있습니다.

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