在Esri地图上掉了一个pin后，如何阻止页面自动保存

Question

我正在做一个MVC项目。我在视图中集成了Esri地图。以前我可以在地图上放一个大头针，得到坐标并保存下来。但最近出现了问题，我不知道是什么。出于某种原因，当我在地图上放下一个别针时，甚至会触发保存，它会保存除坐标外的所有其他数据。它还会关闭页面。我已经调查过了，我不能准确指出这个问题。请协助。请参阅下面视图中的代码以集成地图：

<script type="text/javascript">
var latitude;
var longitude;
var zoomLevel;
require(["esri/views/MapView",
"esri/WebMap", "esri/config",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer"],
function (MapView, WebMap, esriConfig, Sketch, GraphicsLayer) {
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});
var graphicsLayer = new GraphicsLayer();
var view = new MapView({
map: webmap,
//zoom: 14,
container: "viewDiv"
});
var symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "circle",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 1 // points
}
};
webmap.layers.add(graphicsLayer);
var sketch = new Sketch({
layer: graphicsLayer,
view: view,
symbol: symbol,
creationMode: "update",
availableCreateTools: ["point"]
//container: "viewDiv"
});
view.ui.add(sketch, {
position: "top-right"
});
//Listen to sketch widget's create event.
sketch.on('create', function (event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (view.zoom >= 11) {                  
let gra = event.graphic.clone();
event.graphic.layer.removeAll();
gra.symbol.color = "red";
gra.layer.add(gra);
console.log(view.zoom);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
latitude = gra.geometry.x;
longitude = gra.geometry.y;
zoomLevel = view.zoom;
debugger;
}
else {
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
});
});
function saveCoordinates() {
debugger;
$("#lat").val(latitude);
$("#long").val(longitude);
};
</script>

如何添加地图：

<div class="panel-body">
<div class="form-group">
<div id="viewDiv" style="position:relative; width:900px; height:600px; border:1px solid #000;"></div>
</div>
</div>

然后按下保存按钮：

<div class="form-group">
<div class="col-md-10">
<input type="submit" class="btn btn-primary" id="savebutton" value="Save" onclick="validateForm(); saveCoordinates()" />
@Html.ActionLink("Cancel", "Index", "Application", null, new { @class = "btn btn-primary", @id = "cancelbutton" })
</div>
</div>

Answer 1

使用sketch.on('create', function)时，只要在草图中创建了新的东西，就会触发该函数。如果这是一条多段线，则每次在多段线中创建新点时都会触发'create'事件。如果你看看esri JavaScript APi，他们会对此发出警告，并提供一个只有当用户接受他们的草图时才会触发的代码示例：

// Listen to sketch widget's create event.
sketch.on("create", function(event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (event.state === "complete") {
// Do stuff here
}
}