本文结合的是要素图层的增删改，结合Draw、TemplatePicker控件、Edit工具，总体思路：
加载点、线、面要素图层，为map注册layers-add-result事件，通过initEditing函数进行工具等初始化，通过evt参数获取所有的图层，并赋值给layers变量，声明Edit工具，并注册deactivate事件， 然后遍历layers中的每个图层对象注册点击事件和双击事件进行操作，至于TemplatePicker控件通过监测selection-change事件进行判断绘画类型，将类型传给Draw进行绘图。关于默认配置 esriConfig.defaults.geometryService我用的本地的（也可以不配置直接在代码中书写），如果用官网加上代理。
一、TemplatePicker控件介绍
为用户显示预设值的特征集（例如点、线、面，类型就这三种），对图层中的每一个服务可以进行添加，通过点击选择模板上的符号进行添加到图层上。模板里面的符号是由所要加载的要素图层的要素所决定的，当然这个控件也可以当作一个简单的图例。
二、TemplatePicker控件控件声明
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: "auto",
columns: 2,
grouping: true,
style: "height: auto; overflow: auto;"
}, "templatePickerDiv");
templatePicker.startup();;三、图层对象事件
//遍历每个图层给每个图层注册事件
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);
//Ctrl+鼠标左键删除
if (evt.ctrlKey === true || evt.metaKey === true) {
layer.applyEdits(null, null, [evt.graphic]);
//this表示当前触发点击事件的图层对象
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
});四、编辑控件以及事件
var editToolbar = new Edit(map);
editToolbar.on("deactivate", function (evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});五、全部代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html, body {
height: 100%;
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;
228px;
}
.templatePicker {
border: solid 2px #444;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var map;
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/config",
"esri/dijit/editing/Editor",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"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,Editor,
FeatureLayer,Extent,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
TemplatePicker,
arrayUtils, event, lang, parser, registry
) {
parser.parse();
////使用代理因为要跨域
//esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
map = new Map("map", {
extent:new Extent({
xmin: -1.74295131297E7,
ymin: -1.60132136175E7,
xmax: 3.46819141188E7,
ymax: 1.2326799939499997E7,
spatialReference: { wkid: 3857 }
})
});
map.on("layers-add-result", initEditing);
var landusePointLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/publish/FeatureServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landuseLineLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/publish/FeatureServer/1", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landusePolygonLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/publish/FeatureServer/2", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);
function initEditing(evt) {
console.log("initEditing", evt);
// var map = this;
var currentLayer = null;
//dojo.map(array, callback, scope)：
//该方法用来对数组中的每个元素执行操作，并返回一个数组包含操作的结果。其三个参数的含义与 dojo.forEach()相同。
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);
//Ctrl+鼠标左键删除
if (evt.ctrlKey === true || evt.metaKey === true) {
layer.applyEdits(null, null, [evt.graphic]);
//this表示当前触发点击事件的图层对象
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>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'" style="100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">双击选中，Ctrl+鼠标右键删除 </div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="templatePickerDiv"></div>
</div>
</div>
</body>
</html>引用文件用的官方的我这本地配置的才是3.18版本真垃圾，好多没法加载，找个事件得改改了，还有发布要素服务，我们有时候发布是一个mxd文档里面有好几个图层，记载的时候一定要进行分层，否则没法加载，至于怎么发布要素图层这个网上教程很多，这里就不介绍了。这里的点、线、面图层都是我随便画的（不要喷我）代码参考官方。
六、有图有真相
删除前：
删除后：
