Get Geometry of only updated rings of polygon out of multiple polygon

237
1
Jump to solution
03-19-2020 10:10 PM
rsharma
Occasional Contributor III

Hi Till now as you can see i have placed mutliple graphics on graphics layer and  save all of them  by below code, and get json and saved it,  works fine. But now i have to change structure of saving them, i have to save each polygon separartly.

Query:  i have to get updated geometry of only those polygons that are reshaped  or changed it vertices. Is their any way to get only updated vertices of single or multiple polygons out of whole graphics.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Rajni,

   My suggestion would be to add an attribute to the graphics attributes for the graphics state.

line 6 added a new state.

        function addTempGraphic(evt) {
          if (evt.state === "complete") {
            evt.graphic.symbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [255, 121, 5]);
            evt.graphic.attributes= {
              newDevelopment: "new store",
              state: "new"
            };
            sketchViewModel.update(evt.graphic, {
              tool: "reshape"
            });
          }
        } //End addTempGraphic

Line 18 added an updated state.

      function onGraphicUpdate(event) {
        // get the graphic as it is being updated
        const graphic = event.graphics[0];
        // check if the update event's the toolEventInfo.type is move then stop move event
        if (event.toolEventInfo && event.toolEventInfo.type.includes("move")) {
          sketchViewModel.cancel();
        }
        // If toolEventInfo.type is reshape-stop then it means user finished moving or reshaping the graphic, call complete method. This will change update event state to complete and we will check the validity of the graphic location.
        if (
          event.toolEventInfo &&
          (event.toolEventInfo.type === "move-stop" ||
            event.toolEventInfo.type === "reshape-stop")
        ) {
          sketchViewModel.complete();
        } else if (event.state === "cancel" || event.state === "complete") {
          //check if the graphics are done being reshaped, printout updated graphic's geometry and reshape stage.           
          // graphic  reshaping has been completed or cancelled
          graphic.attributes.state = "updated";
          sketchViewModel.update([graphic], {
            tool: "reshape"
          });
        } else {
          graphic.symbol = validSymbol;
        }
      } //End OnGraphicsUpdate

line ? added an existing state:

      function addGraphics(vertices) {
        //const vertices = <?php echo json_encode($map_ring_coordinate);?>;
        const polygon = createGeometry(vertices);
        validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
          255, 121, 5
        ]);
        newDevelopmentGraphic = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(polygon),
          symbol: validSymbol,
          attributes: {
            newDevelopment: "new store",
            state: "existing"
          }
        });
        graphicsLayer.add(newDevelopmentGraphic);
        // calculateArea();
      } //End addGraphics‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then as you loop look for the graphics state attribute.

graphicsLayer.graphics.map(function(gra){
  if(gra.attributes.state !== 'exisiting'){ //not new or updated
    var updatedGeometry = webMercatorUtils.webMercatorToGeographic(gra.geometry);
    rings = updatedGeometry.rings;
    all_rings[k]= [];
    rings.forEach(function(ring, i) {
      all_rings[k]=ring;
      k++;
    });
  }
});‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Esteemed Contributor

Rajni,

   My suggestion would be to add an attribute to the graphics attributes for the graphics state.

line 6 added a new state.

        function addTempGraphic(evt) {
          if (evt.state === "complete") {
            evt.graphic.symbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [255, 121, 5]);
            evt.graphic.attributes= {
              newDevelopment: "new store",
              state: "new"
            };
            sketchViewModel.update(evt.graphic, {
              tool: "reshape"
            });
          }
        } //End addTempGraphic

Line 18 added an updated state.

      function onGraphicUpdate(event) {
        // get the graphic as it is being updated
        const graphic = event.graphics[0];
        // check if the update event's the toolEventInfo.type is move then stop move event
        if (event.toolEventInfo && event.toolEventInfo.type.includes("move")) {
          sketchViewModel.cancel();
        }
        // If toolEventInfo.type is reshape-stop then it means user finished moving or reshaping the graphic, call complete method. This will change update event state to complete and we will check the validity of the graphic location.
        if (
          event.toolEventInfo &&
          (event.toolEventInfo.type === "move-stop" ||
            event.toolEventInfo.type === "reshape-stop")
        ) {
          sketchViewModel.complete();
        } else if (event.state === "cancel" || event.state === "complete") {
          //check if the graphics are done being reshaped, printout updated graphic's geometry and reshape stage.           
          // graphic  reshaping has been completed or cancelled
          graphic.attributes.state = "updated";
          sketchViewModel.update([graphic], {
            tool: "reshape"
          });
        } else {
          graphic.symbol = validSymbol;
        }
      } //End OnGraphicsUpdate

line ? added an existing state:

      function addGraphics(vertices) {
        //const vertices = <?php echo json_encode($map_ring_coordinate);?>;
        const polygon = createGeometry(vertices);
        validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
          255, 121, 5
        ]);
        newDevelopmentGraphic = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(polygon),
          symbol: validSymbol,
          attributes: {
            newDevelopment: "new store",
            state: "existing"
          }
        });
        graphicsLayer.add(newDevelopmentGraphic);
        // calculateArea();
      } //End addGraphics‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then as you loop look for the graphics state attribute.

graphicsLayer.graphics.map(function(gra){
  if(gra.attributes.state !== 'exisiting'){ //not new or updated
    var updatedGeometry = webMercatorUtils.webMercatorToGeographic(gra.geometry);
    rings = updatedGeometry.rings;
    all_rings[k]= [];
    rings.forEach(function(ring, i) {
      all_rings[k]=ring;
      k++;
    });
  }
});‍‍‍‍‍‍‍‍‍‍‍
0 Kudos