Create polygon Feature version update

133
1
Jump to solution
01-19-2020 11:51 PM
Highlighted
New Contributor III

Hi all,

I am trying to create polygon feature, in JavaScript Version 4.9 it works, but when i change it in version 4.14 it does not work. I asked how to create polygon in another Question (Create Polygon Feature: Java Script  ), it seems everything OK, but sketch created sketch doesn't updates in featureLeyer (can not "Apply edits"). Here is a code from JavaScript version 4.9 that works fine, how can i update it in version 4.14?

Thanks.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sketch View</title>

<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: verdana;
}
#topbar {
background: rgb(223, 34, 34);
position: absolute;
top: 15px;
right: 15px;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}

.active {
background: #0079c1;
color: #e4e4e4;
}
#info {
padding: 14px;
border-radius: 5px;
}
#update {
padding: 6px;
}
#form {
background: #fff;
}
/* replaces esri-widget--panel */
.scroller {
overflow-x: hidden;
overflow-y: auto;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
"esri/widgets/FeatureForm"
], function (
MapView, Map,
SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Expand, FeatureForm
) {
let highlight, editFeature;
const featureLayer = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0",
outFields: ["*"],
popupEnabled: false,
id: "HotspotsLayer"
});
// GraphicsLayer to hold graphics created via sketch view model
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});
const map = new Map({
basemap: "gray",
layers: [graphicsLayer, featureLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [44.7502, 41.725524],
zoom: 12
});

const pointSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3
}
};
const polylineSymbol = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
};
const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "red",
style: "solid",
outline: {
color: "red",
width: 1
}
};
var attributes;
view.when(function () {
// create a new sketch view model
const sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
setUpClickHandler();
// ***********************************************************
// Call FeatureLayer.applyEdits() with specified params. ეს მონაკვეთი არ მუშაობს
// ***********************************************************
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
//selectFeature(objectId);
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
// Listen to create-complete event to add a newly created graphic to view
sketchViewModel.on("create-complete", addGraphic);

// Listen the sketchViewModel's update-complete and update-cancel events
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
// აქედან ვიწყებ ხვალ=====================================================

// called when sketchViewModel's create-complete event is fired.
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: attributes
});
graphicsLayer.add(graphic);
const edits = { //Fire the addFeatures function using the completed graphic
addFeatures: [graphic]
};
applyEdits(edits);

console.log(graphic);
}
// Runs when sketchViewModel's update-complete or update-cancel
// events are fired.
function updateGraphic(event) {
// Create a new graphic and set its geometry event.geometry
var graphic = new Graphic({
geometry: event.geometry,
symbol: editGraphic.symbol
});
graphicsLayer.add(graphic);

// set the editGraphic to null update is complete or cancelled.
editGraphic = null;
}
// set up logic to handle geometry update and reflect the update on "graphicsLayer"
function setUpClickHandler() {
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
var results = response.results;
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
// Check if we're already editing a graphic
if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
// Save a reference to the graphic we intend to update
editGraphic = results[i].graphic;
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
graphicsLayer.remove(editGraphic);
sketchViewModel.update(editGraphic);
break;
}
}
}
});
});
}
// activate the sketch to create a polygon
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function () {
// set the sketch to create a polygon geometry
sketchViewModel.create("polygon");
setActiveButton(this);
};
});

});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button class="action-button esri-icon-polygon" id="polygonButton" type="button"
title="Draw polygon"></button>
</div>
<div id="info" class="esri-widget">
<h3>მონიშნეთ ობიექტი მონაცემების შესაცვლელად</h3>
</div>
<div id="update" class="esri-widget esri-hidden">
<div id="form" class="scroller esri-component"></div>
<input
type="button"
class="esri-button"
value="მონაცემების ატვირთვა"
id="btnUpdate"
/>
<br />
<div id="deleteArea">
<input
type="button"
class="esri-button"
value="წაშალეთ ინციდენტი"
id="btnDelete"
/>
</div>
</div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Honored Contributor

Version 4.10 made breaking changes to the SketchViewModel, so you'll have to re-write your code: Changes for SketchViewModel at 4.10 | ArcGIS API for JavaScript 4.14 

View solution in original post

1 Reply
Highlighted
MVP Honored Contributor

Version 4.10 made breaking changes to the SketchViewModel, so you'll have to re-write your code: Changes for SketchViewModel at 4.10 | ArcGIS API for JavaScript 4.14 

View solution in original post