如何定位我绘制的多边形,我想得到一个坐标。 使用arcgis api为javascript绘制多边形,我使用示例的官方网站,当我点击某个我可以定位它时,我想要绘制很多我想要的多边形enter link description here
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Landuse</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#header {
border:solid 2px #462d44;
background:#fff;
color:#444;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: sans-serif;
font-size: 1.1em
padding-left:20px;
}
#map {
padding:1px;
border:solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#rightPane {
border:none;
padding: 0;
width:228px;
}
.templatePicker {
border: solid 2px #444;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map;
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/config",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dojo/domReady!"
], function(
Map, Draw, Edit, Graphic, esriConfig,
FeatureLayer,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
TemplatePicker,
arrayUtils, event, lang, parser, registry
) {
parser.parse();
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
// This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "streets",
center: [-83.244, 42.581],
zoom: 15
});
map.on("layers-add-result", initEditing);
var landusePointLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landuseLineLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landusePolygonLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);
function initEditing(evt) {
console.log("initEditing", evt);
// var map = this;
var currentLayer = null;
var layers = arrayUtils.map(evt.layers, function(result) {
return result.layer;
});
console.log("layers", layers);
var editToolbar = new Edit(map);
editToolbar.on("deactivate", function(evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});
arrayUtils.forEach(layers, function(layer) {
var editingEnabled = false;
layer.on("dbl-click", function(evt) {
event.stop(evt);
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
} else {
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
layer.on("click", function(evt) {
event.stop(evt);
if (evt.ctrlKey === true || evt.metaKey === true) { //delete feature if ctrl key is depressed
layer.applyEdits(null,null,[evt.graphic]);
currentLayer = this;
editToolbar.deactivate();
editingEnabled=false;
}
});
});
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: "auto",
columns: 2,
grouping: true,
style: "height: auto; overflow: auto;"
}, "templatePickerDiv");
templatePicker.startup();
var drawToolbar = new Draw(map);
var selectedTemplate;
templatePicker.on("selection-change", function() {
if( templatePicker.getSelected() ) {
selectedTemplate = templatePicker.getSelected();
}
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(Draw.POINT);
break;
case "esriGeometryPolyline":
drawToolbar.activate(Draw.POLYLINE);
break;
case "esriGeometryPolygon":
drawToolbar.activate(Draw.POLYGON);
break;
}
});
drawToolbar.on("draw-end", function(evt) {
drawToolbar.deactivate();
editToolbar.deactivate();
var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
});
}
});
</script>
使用ctrl或cmd +单击图形删除。双击图形以编辑顶点。
答案 0 :(得分:1)
为了能够移动多边形,你只需要激活那个&#34;移动&#34;编辑工具栏中的工具,如API https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html#activate
中所指定在您提供的链接中,只有&#34; EDIT_VERTICES&#34;被激活了。 所以,替换
行editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
与
editToolbar.activate(Edit.EDIT_VERTICES | Edit.MOVE, evt.graphic);