Rajni,
To update a graphic using SketchViewModel, the graphic has to be in the same SpatialReference as the map. So in this case you use WebMercatorUtils to project the polygon to webmercator before you add it to the map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to MapView - Create a 2D map - 4.14</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require(["esri/views/MapView",
"esri/WebMap",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/geometry/support/webMercatorUtils"
], function (MapView, WebMap, Graphic, GraphicsLayer, SketchViewModel, Polygon, SpatialReference, webMercatorUtils) {
let sketchViewModel,
validSymbol,
newDevelopmentGraphic;
var webmap = new WebMap({
portalItem: {
id: "a8e76ad6641b46978f148cba03ab3e2d"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv",
center: [175.9258624, -37.55590445],
zoom: 20
});
var graphicsLayer = new GraphicsLayer();
webmap.add(graphicsLayer);
setUpGraphicClickHandler();
view.when(function () {
addGraphics();
sketchViewModel = new SketchViewModel({
view: view,
layer: graphicsLayer,
updateOnGraphicClick: false,
defaultUpdateOptions: {
toggleToolOnClick: false
}
});
sketchViewModel.on(["update", "undo", "redo"], onGraphicUpdate);
});
function onGraphicUpdate(event) {
const graphic = event.graphics[0];
if (
event.toolEventInfo &&
(event.toolEventInfo.type === "move-stop" ||
event.toolEventInfo.type === "reshape-stop")
) {
sketchViewModel.complete();
} else if (event.state === "cancel" || event.state === "complete") {
sketchViewModel.update([graphic], {
tool: "reshape"
});
}
}
function setUpGraphicClickHandler() {
view.on("click", function (event) {
if (sketchViewModel.state === "active") {
return;
}
view.hitTest(event).then(function (response) {
var results = response.results;
results.forEach(function (result) {
console.log(result.mapPoint);
if (
result.graphic.layer === sketchViewModel.layer &&
result.graphic.attributes &&
result.graphic.attributes.newDevelopment
) {
sketchViewModel.update([result.graphic], {
tool: "reshape"
});
}
});
});
});
}
function addGraphics() {
const vertices = [
[175.9258624, -37.55590445],
[175.9258630667, -37.55587745],
[175.9258671333, -37.5557153],
[175.92626316670004, -37.5557216],
[175.92625955, -37.5558657],
[175.9262584333, -37.5559107333],
[175.9258624, -37.55590445]
];
const polygon = createGeometry(vertices);
validSymbol = createSymbol([0, 170, 255, 0.8], "solid", 2, [
255,
255,
255
]);
newDevelopmentGraphic = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(polygon),
symbol: validSymbol,
attributes: {
newDevelopment: "new store"
}
});
graphicsLayer.add(newDevelopmentGraphic);
}
function createGeometry(vertices) {
return new Polygon({
rings: vertices,
spatialReference: new SpatialReference({
wkid: 4326
})
});
}
function createSymbol(color, style, width, outlineColor) {
return {
type: "simple-fill",
style: style,
color: color,
outline: {
color: outlineColor,
width: width
}
};
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>