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实 ...
随机推荐
- x64系统的判断和x64下文件和注册表访问的重定向（举例了GetProcAddress后转成函数指针的用法）
判断一个32位应用程序是否运行在x64系统下,可以使用下面的代码: BOOL IsX64System() { BOOL bIsWow64 = FALSE; typedef BOOL (WINAPI * ...
- python中的内置函数(一)
内置函数:内置函数就是python提供的,可以拿来直接用的函数 作用域相关 locals():返回当前作用域中的名字globals():返回全局作用域中的内容 def func(): print('我 ...
- 七、Linux磁盘管理及LVM讲解
1.硬盘接口 IDE:家用产品,也部分应用于服务器 SATA:一般使用 SCSI:服务器市场 SAS:高端服务器上,价格昂贵 2.硬盘种类 SATA硬盘: SCSI硬盘: SAS硬盘: 3.分区 ...
- 利用Shell开发MySQL的启动脚本
MySQL实例部署情况 01:MySQL程序安装目录:/data/apps/mysql 02:MySQL实例3306的配置文件为:/data/mysql/3306/my.cnf 03:MySQL实例3 ...
- Angular4.0从入门到实战打造在线竞拍网站学习笔记之一--组件
Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 最近搞到手了一部Angular4的视频教程,这几天正好 ...
- valet环境PHPstorm+xdebug调试
1.安装xdebug 2.配置xdebug zend_extension="/usr/local/Cellar/php@7.2/7.2.18/pecl/20170718/xdebug.so& ...
- Python的空行
函数之间或类的方法之间用空行分隔,表示一段新的代码的开始.类和函数入口之间也用一行空行分隔,以突出函数入口的开始. 空行与代码缩进不同,空行并不是Python语法的一部分.书写时不插入空行,Pytho ...
- 提升——树形DP
这里讲提高一点的内容,所以没有树形DP基础的,先看一下基础部分: 浅说——树形DP 闲言不表,看第一题. 这道题是典型的树上最长链问题.(就是一个模板题) 给定一棵树,树上共有N个节点(N<=5 ...
- 并发编程-concurrent指南-阻塞队列-数组阻塞队列ArrayBlockingQueue
ArrayBlockingQueue类是实现了BlockingQueue. ArrayBlockingQueue是一个有界的阻塞队列,其内部实现是将对象放在一个数组中. 放入元素方法: (1) add ...
- cocopods新建或者更新远端库主要操作步骤
1.搭建远程仓库(私有或者公有项目): 2.使用sourceTree拉去远程仓库: 3.打开拉去的项目仓库Finder,构建pod lib项目:pod lib create AFNetworking( ...