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

版权声明:本文为博主原创文章,转载请注明地址 https://blog.csdn.net/weixin_40184249/article/details/80923163

本文结合的是要素图层的增删改,结合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%;
        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.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="width: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文档里面有好几个图层,记载的时候一定要进行分层,否则没法加载,至于怎么发布要素图层这个网上教程很多,这里就不介绍了。这里的点、线、面图层都是我随便画的(不要喷我)代码参考官方。

六、有图有真相

删除前:


删除后:


展开阅读全文

没有更多推荐了,返回首页