Cant move graphic in graphicslayer programatically

530
1
04-25-2022 10:58 AM
ironmaskito
New Contributor III

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

 

 

 

Tags (3)
0 Kudos
1 Reply
UndralBatsukh
Esri Regular Contributor

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]

 

Screen Shot 2022-04-25 at 3.49.46 PM.png

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;