ArcGIS API For JavaScript 开发（五）要素图层的编辑

2018-4-3

这篇博客主要讲述要素的层的编辑功能，是基于FeatureLayer的applyEdit方法。由于自己目前正在学习当中，有许多不足之处请各位指出，欢迎指导学习！

主要功能是

1.将地图中的图层遍历出来放置在可编辑图层列；

2.点击对应图层可对其进行增加、修改、删除的操作；

3.增加功能具备图形添加、属性添加；

4.修改功能具备自动读取图形属性，自动生成属性字段结构、判断是否修改以及修改属性；

5.删除功能是将图形的所有信息删除；

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FeatureTest.aspx.cs" Inherits="GIS_FeatureTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css" />

    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.20/3.20/init.js"></script>

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />

    <style>

      html, body {

        height: %;

        width: %;

        margin: ;

        padding: ;

        overflow:hidden;

      }

      #header {

        border:solid 2px #462d44;

        background:#fff;

        color:#;

        -moz-border-radius: 4px;

        border-radius: 4px;

        font-family: sans-serif;

        font-size: .1em

        padding-left:20px;

      }

      #map {

        padding:1px;

        border:solid 2px #;

        -moz-border-radius: 4px;

        border-radius: 4px;

      }

      #rightPane {

        border:none;

        padding: ;

        width:228px;

      }

      #leftPane {

        border:none;

        padding: ;

        width:228px;

      }

      .templatePicker {

        border: solid 2px #;

      }

    </style>

    <script>

        var map;

        var drawToolbar;

        var buildslayer;

        var drawlayer, polylineAtt, features;

        var symbol, felayers = [];

        var landusePolygonLayer;

        require([

          "esri/map",

          "esri/toolbars/draw",

          "esri/toolbars/edit",

          "esri/graphic",

          "esri/config",

          "esri/layers/FeatureLayer",

          "esri/layers/ArcGISDynamicMapServiceLayer",

          "esri/symbols/SimpleMarkerSymbol",

          "esri/symbols/SimpleLineSymbol",

          "esri/symbols/SimpleFillSymbol",

          "esri/dijit/InfoWindow",

          "esri/dijit/editing/TemplatePicker",

          "dojo/_base/Color",

          "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, ArcGISDynamicMapServiceLayer,

          SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,

          InfoWindow,

          TemplatePicker,

          Color,

          arrayUtils, event, lang, parser, registry

        ) {

            parser.parse();

            //esriConfig.defaults.io.proxyUrl = "/proxy/";

            esriConfig.defaults.io.proxyUrl = "http://localhost/Donet/proxy.ashx";

            esriConfig.defaults.io.alwaysUseProxy = false;

            esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServe");

            var dynamicMapLayer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/V2/BaseMap/MapServer");

            map = new Map("map", {

                // basemap: "streets",

                // center: [-83.244, 42.581],

                zoom:

            });

            //符号可自己判断是否需要

            symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLD, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLD, new Color([, , ])), new Color([, , , 0.2]))

            map.addLayer(dynamicMapLayer1);

            //添加基础底图加载完成事件

            dojo.connect(dynamicMapLayer1, "onLoad", function (layers) {

                //将图层遍历出来加在列表中——有个问题是图层的顺序怎么改，最主要是面图层会相互覆盖，和面覆盖线、点层？

                for (var i = ; i < layers.layerInfos.length-; i++) {

                    var infos = layers.layerInfos;

                    var name = infos[i].name;

                    var id = infos[i].id;

                    var indiv = document.createElement("div");

                    indiv.innerHTML = "<p><input type=button id="+name+" value="+name+" onclick=Edit("+id+") /></p>";

                    document.getElementById("layers").appendChild(indiv);

                    //将要素地图服务加载进来，这里是将所有的要素图层都添加进来了，可以进行编辑处理

                    var url = landusePolygonLayer.url + "/" + id + "";

                    felayers[i] = new FeatureLayer(url, {

                        mode: FeatureLayer.MODE_SNAPSHOT,

                        outFields: ["*"]

                    });

                    map.addLayer(felayers[i]);

                }

            });

            //实例化一个绘图工具

            drawToolbar = new esri.toolbars.Draw(map);

            //绘制完成事件

            drawToolbar.on("draw-end", function (evt) {

                drawToolbar.deactivate();

                features = evt;

                var content="";

                for (item in polylineAtt) {

                    content = content + "<p>" + item + "：<input type=txt id=d" + item + "></p>";

                }

                content = content+"<input type=button id =newok onclick=create(features) value=添加  />";

                map.infoWindow.setTitle("新建");

                map.infoWindow.setContent(content);

                map.infoWindow.show();

            });

        });

　　　　　var maphandler;

        function Edit(id) {

            //打开一个对话窗口，标题：编辑；内容包含三个操作按钮：新建、修改、删除

            map.infoWindow.setTitle("编辑");

            map.infoWindow.setContent("<p>选择你想要进行的操作！</p> <input type=button id =newcreate onclick=createnew(" +

                id + ") value=新建  /> <input type=button id =geoupdate onclick=updategeo(" +

                id + ") value=修改  /> <input type=button id =geodelete onclick=deletegeo(" +

                id + ") value=删除  />");

            //要编辑的要素图层

            drawlayer = felayers[id];

            //要素的属性结构——这里应该改为自动的

            polylineAtt = {};

            for (var i =  ; i < felayers[id].fields.length; i++) {

                var item = felayers[id].fields[i].alias;

                polylineAtt[item] = "";

            }

            map.infoWindow.show();

        }

        var newattributes = [];

        function createnew(id) {

            drawToolbar.deactivate();

            map.infoWindow.hide();

            var geometryType = drawlayer.geometryType;

            //drawToolbar = new esri.toolbars.Draw(map);

            //选择绘制要素,并开始绘制

            switch (geometryType) {

                case "esriGeometryPoint":

                    drawToolbar.activate(esri.toolbars.Draw.POINT);

                    break;

                case "esriGeometryPolyline":

                    drawToolbar.activate(esri.toolbars.Draw.POLYLINE);

                    break;

                case "esriGeometryPolygon":

                    drawToolbar.activate(esri.toolbars.Draw.POLYGON);

                    break;

            }

        }

        function create(features) {

            for (item in polylineAtt) {

                polylineAtt[item] = document.getElementById("d" + item).value;

            }

            map.infoWindow.hide();

            map.graphics.add(features);

            //if(polylineAtt.name == "" )

            //var newAttributes = langv.mixin({}, drawlayer.templates[0].prototype.attributes);

            delete polylineAtt["OBJECTID"];

            delete polylineAtt["RoofType"];

            var newGraphic = new esri.Graphic(features.geometry, null, polylineAtt);

            map.graphics.add(features);

            drawlayer.applyEdits([newGraphic], null, null,callback);

        }

        function callback(result) {

            if (result[].success == true) {

                alert("添加成功！");

            }

            else {

                alert("添加失败！");

            }

        }

        function updategeo(id) {
　　　　　　　if(handler){
　　　　　　　　　handler.remove();　
　　　　　　 }

            map.infoWindow.setTitle("修改");

            map.infoWindow.setContent("请点击要编辑的目标要素");

            map.infoWindow.show();

            handler=map.on("click", function (evt) {

                var content = "";

                features = evt;

                for (item in polylineAtt) {

                    content = content + "<p>" + item + "：<input type=txt id=d" + item + " value=" + evt.graphic.attributes[item] + "></p>";

                }

                content = content + "<input type=button id =newok onclick=updatefe(features) value=修改  />";

                map.infoWindow.setContent(content);

                map.infoWindow.show();

            });

        }

        function updatefe(features) {

            var isUpdate = false;

            delete polylineAtt["RoofType"];

            for (item in polylineAtt) {

                var getvalue =document.getElementById("d" + item).value;

                var setvalue = features.graphic.attributes[item];

                if (getvalue == setvalue) {

                    polylineAtt[item] = setvalue;

                } else {

                    polylineAtt[item] = getvalue;

                    isUpdate = true;

                }

            }

            if (isUpdate) {

                var newGraphic = new esri.Graphic(features.geometry, null, polylineAtt);

                drawlayer.applyEdits(null, [newGraphic], null, function () {

                    alert("修改成功！");

                });

            }

            else {

                alert("没有修改！");

            }

            map.infoWindow.hide();

        }

        function deletegeo(id) {

　　　　　 if(handler){
　　　　　　　　　handler.remove();

　　　　　　 }
            map.infoWindow.setTitle("删除");

            map.infoWindow.setContent("请点击要删除的目标要素");

            map.infoWindow.show();

            handler=map.on("click", function (evt) {

                polylineAtt["OBJECTID"] = evt.graphic.attributes["OBJECTID"];

                var newGraphic = new esri.Graphic(evt.geometry, null, polylineAtt);

                drawlayer.applyEdits(null, null, [newGraphic], function () {

                    alert("删除成功！");

                });

            });

        }

    </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'">

            Use ctrl or cmd + click on graphic to delete.  Double click on graphic to edit vertices. 

        </div>

        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">

            <div id="templatePickerDiv">

            </div>

            <div id="layers">

            </div>

        </div>

    </div>

</body>

</html>

其中遇到的问题有

1.在使用循环为控件input 指定onclick事件的时候参数值用 i 是传递不过去的，导致每个input的onclick事件的参数都是最后一个 i 值；而使用拼写的方式是可以将参数传递过去，很是奇怪，可能是我没有找到对应的方法吧；

2.注意的是ArcGIS api 开发中对图层的编辑一定是要使用对应的FeatureLayer图层，否则编译成功、运行也不会报错，但是编辑是无效的；

3.JSON对象添加、删除、修改和遍历；对JavaScript其实只是掌握其皮毛，还要深入学习才行；添加方式 testjson.param = " "; 或者 testjson[param]=" ";我使用的是第二种方式；删除： delete testjson[param]; 修改和添加类似，其实编译器会自动帮我们判断是添加还是修改，有就修改，没有就添加。遍历是使用的 for - in 方式； for( item in testjson ) { testjson[item]=....; }

4.使用applyEdit进行修改和删除的时候发现其成功回调函数的参数值是空的，所以不能像添加一样对其回调参数进行判断，对了添加的回调参数中有个success值可以用其判断是否成功，当然成功回调函数本就是代表成功，但是回调参数我们还是可以了解其中的内容的，说不定什么时候会有用的不是？

5.最后一个问题，目前还没有解决，就是在地图中选择点、线的时候不太容易选中，面不用说了很好选，但是我在测试的时候发现线和点真的很难选中，没选中还会报错（这个可以优化掉）；现在的想法就是选的时候难道需要添加一点范围？不过这样可能会选中多个，先试试吧，成功的话我再更新一下。

ArcGIS API For JavaScript 开发（五）要素图层的编辑的更多相关文章

ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
ArcGIS API for javascript开发笔记（二）——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明在使用ArcGIS ...
ArcGIS API for JavaScript开发初探——HelloMap
1.前言在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...
ArcGIS API for JavaScript开发初探——基础知识
1.前言在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...
ArcGIS API For JavaScript 开发（二）基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...
ArcGIS API For JavaScript 开发（一）环境搭建
标签:B/S结构开发,Asp.Net开发,WebGIS开发前言:为什么写这个,一是学习:二是分享,共同进步,毕竟也是在这个园子里学到了很多: (一)环境搭建集成开发环境:VS2013 Ultima ...
ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
ArcGIS API for javascript开发笔记（三）——解决打印输出的中文为乱码问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------欢迎来访,拒绝转载---------------------- 1. 调用ArcGIS API的Print实 ...

随机推荐

一次C#和C++的实际应用性能比较（C++允许我们使用任何手段来提高效率，只要愿意做出足够的努力）
05年时,在微软的Rico Mariani做了一次实际应用的C#和C++的性能比较.事情起源于微软著名的元老Raymond Chen(在下敬仰的超级牛人)用C++写了一个英汉词典程序,来描述讲解优化C ...
Google Protocol Buffer 的使用和原理（无论对存储还是数据交换，都是个挺有用的东西，有9张图做说明，十分清楚）
感觉Google Protocol Buffer无论对存储还是数据交换,都是个挺有用的东西,这里记录下,以后应该用得着.下文转自: http://www.ibm.com/developerworks/ ...
URL重写 httpModules IIS7
<system.web> <httpModules>  <!--add name="MyHttpM ...
android 写文件到sd卡问题小记
android 写文件到sd卡问题小记事情是这样子的.... 这天我开始编写项目调试工具,高大上不?-----其实就是记录实时网络请求和崩溃日志相关等的小工具(此处一个会心的微笑). 然后我是这样写 ...
HTML连载7-表单练习
昨天因为晚上有事情,未更新,但是今天中午发也不晚,因为是同一天只是时间早晚而已,因此今日傍晚还将更新一次,废话不多说. 1.表单的综合练习,我们要创建一个综合的注册页面.运用到我们前面所学的所有知识. ...
3023Java_控制语句
控制语句 0.前定义语句块(有时叫做复合语句),是用花括号扩起的任意数量的简单Java语句. 块确定了局部变量的作用域.块中的程序代码,作为一个整体,是要被一起执行的. 块可以被嵌套在另一个块中,但 ...
jvm异常记录
1.如果出现java.lang.OutOfMemoryError: Java heap space异常.原因:Java虚拟机的堆内存不够. 具体如下: a.Java虚拟机 ...
Python时间戳的一些使用
Python时间戳的一些使用为什么写下这篇文档? 由于我本身是做Python爬虫的,在爬取网站的过程当中,会遇到形形色色的验证码,目前对于自己而言,可能简单的验证码可以进行自己识别发现大多数的网站 ...
14 CSS权重深入
 <!DOCTYPE html ...
由django请求生命周期延伸出的知识点大总结
django项目搭建见: https://www.cnblogs.com/dongxixi/p/10981577.html django请求生命周期图: 由浏览器发起请求开始知识点1: 浏览器与服务 ...

ArcGIS API For JavaScript 开发（五）要素图层的编辑

ArcGIS API For JavaScript 开发（五）要素图层的编辑的更多相关文章

随机推荐

热门专题