I want to move the points of a graphic created with the Sketch Widget programatically. Unfortunately I am seeing that when I change the geometry of a graphic via code, the graphic is not visible. I am wondering if there is a general approach toward manually editing locations of vertices in a graphics layer or if moving it via the map is the only way.
Here's a snippet of code showing my approach. Here is a Codepen for reproducing the problem: https://codepen.io/coxfsi/pen/mdpZbrG
if (graphicsLayer.graphics.length > 0){
let lineGraphic= graphicsLayer.graphics.getItemAt(0);
// Can't edit the geometry directly due to iterable error
// lineGraphic.geometry.paths[0][0] = 1000000;
// editing a point belonging to a clone does not throw error, but the line is invisible
let copyGraphic = lineGraphic.clone();
viewModel.layer.removeAll();
copyGraphic.geometry.paths[0][0] = 11311599;
viewModel.layer.add(copyGraphic);
viewModel.update(copyGraphic);
}
You are getting this error because you are corrupting your polyline geometry. For example, the polyline is going from:
[9316221.444425754, 5694060.22603468]
[10270155.5574245, 6091609.210145776]
To
11311599
[10270155.5574245, 6091609.210145776]
You should use Polyline.setPoint method to update the vertices or the other methods to change the polyline geometry. Or you have to make sure that you are changing the right values in the array without corrupting the array of vertices. The following for example works in your app:
copyGraphic.geometry.paths[0][0][0] = firstGraphic.geometry.paths[0][0][0] + 300000;
copyGraphic.geometry.paths[0][0][1] = firstGraphic.geometry.paths[0][0][1] + 300000;