在 Esri 地图上放置图钉后如何停止自动保存页面?
How to stop a page from auto save after you have dropped a pin on an Esri Map?
我正在处理一个 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>
当您使用 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
}
}
我正在处理一个 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>
当您使用 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
}
}