ArcGIS API For JS 之服务器端要素的增删改（结合TemplatePicker控件）

本文结合的是要素图层的增删改，结合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);
                });

五、全部代码

  
    
    
    
    

    
    
    

    
    
  
  
    

      
双击选中，Ctrl+鼠标右键删除 
      

      

        

          
      
    
      
  

引用文件用的官方的我这本地配置的才是3.18版本真垃圾，好多没法加载，找个事件得改改了，还有发布要素服务，我们有时候发布是一个mxd文档里面有好几个图层，记载的时候一定要进行分层，否则没法加载，至于怎么发布要素图层这个网上教程很多，这里就不介绍了。这里的点、线、面图层都是我随便画的（不要喷我）代码参考官方。

六、有图有真相

删除前：

删除后：