arcgis api 实现在线编辑(1)：添加要素

 

前期准备

• 使用Arcmap新建多边形要素图层，注册版本，保存在关系型数据库如sqlserver中。
• 使用Arcmap发布地图服务，勾选feature access。
• 建议自行搭建数据库和地图服务，这里提供测试的FeatureServer，请勿作它用途。

实现步骤

1、初始化地图

初始化地图涉及到初始化map，view，分别调用不同的对象

添加底图

	let _this = this;
	// 初始化地图
	this.currentMap = new this.Map({
	  basemap: "streets"
	});
	// 初始化视图
	this.currentView = new this.MapView({
	  map: _this.currentMap,
	  container: "map",
	  center: [-118.037819, 1.179634],
	  zoom: 1
	});
	// 清除logo
	this.currentView.ui.remove("attribution");

2、添加要素图层

   this.currentFeatureLayer = new this.FeatureLayer({
     // URL to the service
     url: this.url.featureLayer
   });
   this.currentMap.add(this.currentFeatureLayer);

3、绘制添加的多边形

添加绘制要素的触发事件一般需要通过按钮或是图标的点击事件触发
需要修改的多边形不一定需要是绘制出来的，只要格式是graphic格式的都可以

添加页面button

	<button @click="handleClickBtnDraw">绘制多边形</button>
	<button @click="handleClickBtnClear">清除多边形</button>

绑定绘制多边形事件

	let _this = this;
	 this.currentView.graphics.removeAll();
	
	 var draw = new this.Draw({
	   view: this.currentView
	 });
	
	 // 创建多边形绘制
	 const action = draw.create("polygon");
	
	 // 聚焦视图
	 this.currentView.focus();
	
	 // 要素绘制时绑定事件
	 action.on(
	   [
	     "vertex-add",
	     "vertex-remove",
	     "cursor-update",
	     "redo",
	     "undo",
	     "draw-complete"
	   ],
	   updateVertices
	 );
	
	 // 更新节点
	 function updateVertices(event) {
	   if (event.vertices.length > 1) {
	     const result = createGraphic(event);
	   }
	 }
	
	 // 创建草图
	 function createGraphic(event) {
	   const vertices = event.vertices;
	   _this.currentView.graphics.removeAll();
	   const graphic = new _this.Graphic({
	     geometry: {
	       type: "polygon",
	       rings: vertices,
	       spatialReference: _this.currentView.spatialReference
	     },
	     symbol: {
	       type: "simple-line",
	       color: [4, 90, 141],
	       width: 2,
	       cap: "round",
	       join: "round"
	     }
	   });
	   _this.currentView.graphics.add(graphic);
	 }

绑定清除多边形事件

	this.currentView.graphics.removeAll();

3、提交修改

   // 获取view中graphics
   let params = {
     addFeatures: this.currentView.graphics.items
   }
   this.currentFeatureLayer
   .applyEdits(params)
   .then(editsResult => {
     console.log(editsResult)
   })
   .catch(error => {
     console.log(error.message)
   })

注意

• 练习项目采用的是vue框架，所有代码是在vue框架中的。
• 完整代码可访问 github上项目