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实 ...
随机推荐
- 关于Windows更新窗口内容的问题（作为一个实验，效果很明显）
Windows中的窗口在特定情况下会由系统进行重绘,如无效区域重新显现时,,会向窗口的处理过程发送VM_PAINT消息,但是,可能还有Windows自己的更新窗口处理,如在下面的代码中,将击键显式地转 ...
- Codility---MaxProductOfThree
Task description A non-empty zero-indexed array A consisting of N integers is given. Theproduct of t ...
- ViewPager页面滑动，滑动到最后一页，再往后滑动则执行一个事件
1.ViewPager在处理滑动事件的时候要用到OnPageChangeListener( 代码:this.viewPager.setOnPageChangeListener(new MyListen ...
- ansible(一)
一.目的 代码发布系统 二.准备工作:干净的虚拟机准备4个 准备一个虚拟机后克隆出另外三个,注意,克隆前要将虚拟机关机 三.可以用来代码发布的工具 puppet ansible slatstack 四 ...
- 3022Java_运算
运算 1.运算符分类 算术运算符 二元运算符 +,-,*,/,% 一元运算符 ++,-- 赋值运算符 = 扩展运算符 +=,-=,*=,/= 关系运算符 >,<,>=,<= ...
- 【webAssembly系列】webAssembly初探究竟
一.前言 自从JavaScript诞生开始,到现在开始变成流行的编程语言,背后的是web发展所推动的.web应用的变得更多更复杂,但是渐渐暴露出JavaScript的问题: (1)语法太灵活导致开发大 ...
- 使用vscode调试Nodejs
之前想用vscode调试nodejs,总是不成功,也走很多弯路,现在记录下来. 首先新建一个文件夹,用vscode打开这个文件夹, 用vscode自带的终端执行npm init,输入名称,其他的可不输 ...
- axios参考手册
目录 搜索 使用说明 升级指南 生态系统 本文档使用 看云 构建 使用说明 ##Axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node ...
- 在 Angular 2 Component 中使用第三方 JS 库
本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.sv ...
- Appium+python自动化（十二）- Android UIAutomator终极定位凶“胸”器(七)（超详解）
简介 乍眼一看,小伙伴们觉得这部分其实在异性兄弟那里就做过介绍和分享了,其实不然,上次介绍和分享的大哥是uiautomatorviewer,是一款定位工具.今天介绍的是一个java库,提供执行自动化测 ...