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实 ...
随机推荐
- 当程序调用dll时获取dll路径，DLL中获取自身的句柄
当程序调用dll时,获取dll路径的方法: HMODULE hMod = GetModuleHandle(_T("axload.dll")); if (hMod != NULL) ...
- 模拟键盘发送文字（使用SendInput API函数）
嗯...老生常谈的话题, 不过系统的总结了一下, 找了个相对简单的实现方式, 可以方便的发送任何文字 参考另一片文章: http://www.cnblogs.com/-clq/archive/2011 ...
- PHP实现图片（文件）上传
这几天整理做过的php项目,感觉这个经常会用到,传上来共享一下咯 首先,前端界面 1.表单的首行需要加上enctype="multipart/form-data",需要上传的图片必 ...
- .NET中生成水印更好的方法
.NET中生成水印更好的方法 为了保护知识产权,防止资源被盗用,水印在博客.网店等场景中非常常见. 本文首先演示了基于System.Drawing.Image做正常操作.然后基于Direct2D/WI ...
- Spring Boot：实现MyBatis分页
综合概述 想必大家都有过这样的体验,在使用Mybatis时,最头痛的就是写分页了,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真的不想花双倍 ...
- Linux基础及系统优化
1 如何实现自动挂载操作(光驱自动挂载--fstab) 1.1 方法 第一种方法:编辑fstab文件 vi /etc/fstab /dev/cdrom /mnt iso9660 default 0 0 ...
- Java NIO 学习笔记（六）----异步文件通道 AsynchronousFileChannel
目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...
- 【Mac】Mac快捷键与Mac下的Idea快捷键
本人之前一直在windows平台下进行开发,刚接触Mac的时候有些许的不适应,无论是无鼠标操作,还是文件系统的变更,以及键盘格式以及系统快捷键的变更,都曾对自己造成过一定程度的困扰. ...
- java里字节与字符的区别
当时学Java的时候没搞懂字节和字符的区别,今天看文件输入输出流的时候觉得是时候彻底把这两个概念弄懂. 首先得知道byte的概念和作用: byte即字节的意思,是java中的基本数据类型,用来申明字节 ...
- Linux运维工程师学习成长路线
不过大家的留言都很精彩,希望大家也可以去留言区逛一逛~~ 好在这不是最后一期送书,之前已经有了好多活动,小编一定继续为大家多送些福利. 希望大家可以一如既往的关注脚本之家,支持爱你们的小编,共同进步! ...