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实 ...
随机推荐
- Z Order（Copy From WIN32.HLP）
The Z order of a window indicates the window's position in a stack of overlapping windows. This wind ...
- 打开并锁定一个文件（使用LockFile API函数）
var aHandle : THandle; aFileSize : Integer; aFileName : String; procedure TForm1.Button3Click(Sender ...
- IIS 站点和应用池命令启动和停止
在CMD下执行如下命令: IIS站点: 停止站点: C:\Windows\System32\inetsrv\appcmd.exe stop site “XXXX” 启动站点: C:\Windows\S ...
- Storm 学习之路（七）—— Storm集成 Redis 详解
一.简介 Storm-Redis提供了Storm与Redis的集成支持,你只需要引入对应的依赖即可使用: <dependency> <groupId>org.apache.st ...
- mysql开启日志查询功能
set global general_log_file='/tmp/general.lg';set global general_log=on; show global variables like ...
- yii框架widget和注册asset的例子
yii框架是一个基于组件的框架,这样代码的重用性就非常的高,如我们想在网站的多个地方调用编辑器,这样我们就可以自定义一个组件,来供我们调用使用 下面以Ueditor组件为例: 1.下载ueditor到 ...
- 最方便分布式爬虫管理框架--Gerapy
Gerapy 是一款国人开发的爬虫管理软件(有中文界面) 是一个管理爬虫项目的可视化工具,把项目部署到管理的操作全部变为交互式,实现批量部署,更方便控制.管理.实时查看结果. gerapy和scrap ...
- Jenkins+svn+ftp自动化发布asp.net项目
今天将自己所掌握的(Jenkins+svn+ftp自动化发布asp.net项目)知识分享给大家,希望能帮组到大家: (1)先下载Jenkins并安装: (2)安装.Net所需要的插件: (3)配置插件 ...
- 【算法•日更•第六期】头脑风暴：洛谷P1528 切蛋糕题解
▎(一个没有用处的)前言 为什么这次题解特意写明题号呢?因为我发现了这样的事情: 所以不要混了,想看P1714题解的同志们可以圆润的滚开了. 好了,不说没用的了,切入正题: ▎题目 题目及测评链接:戳 ...
- 《深入浅出RxJS》读书笔记
rxjs的引入 // 如果以这种方式导入rxjs,那么整个库都会导入,我们一般不可能在项目中运用到rxjs的所有功能 const Rx = require('rxjs'); 解决这个问题,可以使用深链 ...