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实 ...
随机推荐
- QT多个UI文件加入一个项目
这样可在多个UI界面上进行分部开发.避免都在一个UI下太凌乱…… 在网上找了一些资料,很少有介绍这方面的,以及类似这样项目的源码. 看 一些基本控件的使用时,想到了一种方法:使用gridLayout控 ...
- QString unsigned char* 的转换
QString -> unsigned char* : QString str = "ABCD"; int length = str.length(); unsigned ...
- 关于这次KPL春季决赛的感悟
QG 4:0 横扫AG超玩会,关于这一点想写一些自己的感悟,AG超玩会一直都是 4:0 横扫别人,这次在冠军赛被别人横扫,一点喘息的机会都没有. 1.QGhappy 跟本没把AG超玩会放在眼里,很 ...
- linux如何直接运行python文件
1.首先创建好py文件 touch GetCiscoCpu.py 2. 编写GetCiscoCpu.py vi GetCiscoCpu.py /********************** *本文是用 ...
- 基于Bert的文本情感分类
详细代码已上传到github: click me Abstract: Sentiment classification is the process of analyzing and reaso ...
- nvm淘宝源升级安装最新稳定版nodejs
为了在服务器上面升级nodejs,用nvm下载实在太慢了,推荐淘宝源安装命令,非常快能安装好: 第一步: NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mi ...
- Tido 习题-二叉树-树状数组实现
题目描述 这就是一个简单的树状数组入门题 可以动态地进行区间和查询 随时可能会进行更新 #include<iostream> #include<cstdio> #inclu ...
- Mybatis_three
延迟加载 实现多对一的延迟加载(association) 例如下面的:有很多个账户信息(招商\工商\农商)是属于一个用户人的 [需求] 查询账户(Account)信息并且关联查询用户(User)信息. ...
- Azkaban学习之路（一）—— Azkaban 简介
一.Azkaban 介绍 1.1 背景 一个完整的大数据分析系统,必然由很多任务单元(如数据收集.数据清洗.数据存储.数据分析等)组成,所有的任务单元及其之间的依赖关系组成了复杂的工作流.复杂的工作流 ...
- JAVA复习笔记02
16.interface中的成员变量默认为public static final类型,方法只能是public(默认为public) 17.内部类访问外部类成员: Outer.this.num; 18. ...