Arcgis Javascript那些事儿(二)--要素画图编辑
发布日期:2021-06-28 15:11:40 浏览次数:3 分类:技术文章

本文共 3099 字,大约阅读时间需要 10 分钟。

1、获取要素服务地址

发布服务MyMapService后,可以在ArcGIS Server的Services Directory中可以看到一个名为MyMapService (FeatureServer)服务,括号中的FeatureServer表明该服务为要素服务

点击进入后可以看到其中包含的Layer如下

点击其中的GeoFences图层,该网页地址即为后续程序中用到的服务地址。

并且看到详细信息,其中属性信息和图层编辑能力均可以看到。

2、FeatureLayer.applyEdits函数说明

applyEdits函数是FeatureLayer类中的一个方法,主要作用是修改featurelayer的要素,但仅对要素服务(feature service)

函数形式:applyEdits(adds?, updates?, deletes?, callback?, errback?)

返回类型:dojo.Deferred

参数表:

1)<Graphic[]> adds 可选项 要被添加到要素服务中的图层中的要素数组。新要素通常由Draw工具条创建。

2)<Graphic[]> updates 可选项 几何对象和属性有所改变的要素数组。要素必须有一个有效的OBJECTID。要素的几何对象通常由Edit工具条修改。属性使用Attribute Inspector修改。

3)<Graphic[]> deletes 可选项 待删除的要素数组,这些要素必须有有效的OBJECTID。

4)<Function> callback 可选项 当操作完成时本函数会被调用。传给本函数的参数和onEditsComplete事件中的一样。

5)<Function> callback 可选项 如果有错误发生将会返回一个错误对象。

例子:

[javascript]   
 
  1. require([  
  2.   "esri/layers/FeatureLayer", ...   
  3. ], function(FeatureLayer, ... ) {  
  4.   var firePerimeterFL = new FeatureLayer( ... );  
  5.   var targetGraphic = firePerimeterFL.getSelectedFeatures()[0].setGeometry(reshapedGeometry);  
  6.   firePerimeterFL.applyEdits(null, [targetGraphic], null);  
  7.   ...  
  8. });  


3、增加要素

参照,但并没有使用TemplatePicker而是直接用Draw来画Graphic增加要素。这里仅以增加面状要素为例,主要步骤如下:

1)将底图添加到Map中

[javascript]   
 
  1. myMap = new Map("mapDiv");  
  2.   
  3. var myTiledMapServiceLayer = new ArcGISDynamicMapServiceLayer(  
  4.     "http://localhost:6080/arcgis/rest/services/XZAirportBaseMap/MapServer");  
  5.   
  6. myTiledMapServiceLayer.setDisableClientCaching(true);  
  7.   
  8. myMap.addLayer(myTiledMapServiceLayer);  



2)由要素服务创建FeatureLayer,使用Map类中的addLayers函数添加到Map中,在Map执行完成addLayers函数后会响应layers-add-result事件,执行initSelectToolbar

[javascript]   
 
  1. var myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/0", {  
  2.     outFields: ["属性1""属性2""属性3"]  
  3. });  
  4.   
  5. myMap.addLayers([myFeatureLayer]);  
  6.   
  7. myMap.on("layers-add-result", initSelectToolbar);  


 
3)在FeatureLayer的edits-complete事件中完成底图刷新工作

[javascript]   
 
  1. myFeatureLayer.on("edits-complete"function() {  
  2.     myTiledMapServiceLayer.refresh();  
  3. })  

4),此时响应相应按钮点击事件,启动Draw工具

[javascript]   
 
  1. var drawToolbar = new Draw(myMap);  
  2.         on(dom.byId("addFence"), "click"function(evt) {  
  3.             drawToolbar.activate(Draw.POLYGON);  
  4.         });  

5)在draw-end事件响应中使用FeatureLayer.applyEdits函数将Graphic保存到FeatureLayer
中,需要注意的是必须为Graphic添加OBJECTID属性,并且类型为数值型

[javascript]   
 
  1. function initSelectToolbar(evt) {  
  2.             var petroFieldsFL = evt.layers[0].layer;  
  3.   
  4.             drawToolbar.on("draw-end"function(evt) {  
  5.                 drawToolbar.deactivate();  
  6.                 //获取要素个数  
  7.                 currentGraphciNo = petroFieldsFL.graphics.length;  
  8.                 //获取最后一个要素的OBJECTID,并转为数值类型  
  9.                 currentObj = Number(petroFieldsFL.graphics[currentGraphciNo - 1].attributes['OBJECTID']);  
  10.                 //设置新增Graphic的属性,OBJECTID必须设置,其余可以设为NULL  
  11.                 var attr = {  
  12.                     "OBJECTID": currentObj + 1  
  13.                 };  
  14.                 //产生新的Graphic  
  15.                 var newGraphic = new Graphic(evt.geometry, null, attr);  
  16.                 //使用applyEdits函数将Graphic保存到FeatureLayer中  
  17.                 petroFieldsFL.applyEdits([newGraphic], nullnull);  
  18.             });  
  19.         }  

4、删除要素

删除要素和增加要素类似,同样使用FeatureLayer.applyEdits函数.前两步和增加要素中的1)2)相同,这里规定双击删除要素,因此在FeatureLayer的dbl-click事件中使用如下代码:

[javascript]   
 
  1. function initSelectToolbar(evt) {  
  2.     var petroFieldsFL = evt.layers[0].layer;  
  3.   
  4.     petroFieldsFL.on("dbl-click"function(evt) {            
  5.             event.stop(evt);  
  6.             petroFieldsFL.applyEdits(nullnull, [evt.graphic]);      
  7.     });  
  8.   
  9. }

转载地址:https://blog.csdn.net/xcymorningsun/article/details/52709833 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Arcgis Javascript那些事儿(三)---arcgis sever服务器注册关于数据拷贝问题
下一篇:Arcgis Javascript那些事儿(一)--Arcgis server发布feature access服务

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年04月09日 20时42分29秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

安卓前端开发框架!完美讲解内存缓存LruCache实现原理,吐血整理 2019-04-29
安卓前端开发框架!轻松获得一线大厂面试offer,附答案 2019-04-29
安卓前端开发!Android性能优化之APK优化,赶快收藏备战金九银十! 2019-04-29
安卓定制系统开发!这是一份面向Android开发者的复习指南,系列篇 2019-04-29
安卓客户端开发!如何试出一个Android开发者真正的水平?分享PDF高清版 2019-04-29
安卓平板app开发!实战讲述Flutter跨平台框架应用,附大厂真题面经 2019-04-29
安卓开发包!大佬手把手教你如何仿写出大厂的APP,含BATJM大厂 2019-04-29
Android事件分发机制及设计思路,先收藏了 2019-04-29
Android事件分发机制收藏这一篇就够了,不吃透都对不起自己 2019-04-29
Android内存泄漏总结,offer拿到手软 2019-04-29
Android内存泄漏总结,成功拿下大厂offer 2019-04-29
来看看移动端小程序技术的前世今生!讲的明明白白! 2019-04-29
来看看这份超全面的《Android面试题及解析》,大厂面经合集 2019-04-29
4面字节跳动拿到Offer,已拿到offer 2019-04-29
4面字节跳动拿到Offer,真香! 2019-04-29
4面阿里拿到P7Offer,赶紧收藏! 2019-04-29
6年老Android面经总结,大牛最佳总结 2019-04-29
7年老Android一次坑爹的面试经历,赶快收藏备战金九银十! 2019-04-29
Android-App的设计架构经验谈,聪明人已经收藏了! 2019-04-29
Android-Camera内存问题剖析,小白也能看明白 2019-04-29