前言
在使用ArcGIS JS时,我们有时会根据需求对前端的Graphic进行实时编辑。在API中,封装了一个Edit(esri/toolbars/edit)工具,可以交互编辑已经存在的Graphic。
官网解释edit工具对Graphic进行的操作
- To move a feature, once the Edit toolbar is activated with that feature, press down on the feature, drag it, then let go at the new location.
- To add a vertex to a polyline or polygon, click on a “ghost” vertices and move it to the new location.
- To delete a vertex from a polyline or polygon, right-click the vertex and select ‘Delete Vertex’ from the menu. Only valid for polyline with at least three vertices and polygons with at least four vertices.
- To rotate or scale a geometry click the handle and move to the desired location.
即:
- 移动客户端图形
- 编辑结点(增加结点,删除结点)
- 拉伸客户端图形(是否保持长宽比例)
- 旋转客户端图形
准备
- 在本地部署ArcGIS JS API/调用在线的API
- 发布好的动态地图服务
http://blog.csdn.net/idomyway/article/details/79232011
思路
- 获取Map中的Graphic(本例中是利用Draw绘制)
- 实例化edit工具
- 赋予edit不同的操作工具
- 使用完关闭edit工具
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Graphic</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
<style>
.MapClass{
width:100%;
height:500px;
border:1px solid #000;
}
</style>
<script>
require(["esri/map","dojo/dom","dojo/on","esri/toolbars/edit",
"esri/toolbars/draw","esri/geometry/Polygon",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol","dojo/colors","dojo/query",
"dojo/domReady!"
], function (
Map,dom,on, Edit,Draw,Polygon, ArcGISDynamicMapServiceLayer, Graphic,
SimpleLineSymbol, SimpleFillSymbol,Color,query
) {
var map = new Map("mapDiv");
var url = "http://localhost:6080/arcgis/rest/services/firstTest/cityService/MapServer";
var layer = new ArcGISDynamicMapServiceLayer(url);
map.addLayer(layer);
//定义一个Edit对象
var edit = new Edit(map);
//定义一个graphic,为了后来的交互编辑
var graphic;
//给`添加客户端图形`按钮添加绑定事件
on(dom.byId("add"),"click",function(){
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定义面符号
var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0]));
//点的坐标对
var tb = new Draw(map);
tb.activate("polygon");
tb.on("draw-end", function (evt) {
graphic=new Graphic(evt.geometry,fill);
map.graphics.add(graphic);
tb.deactivate();
});
});
//给按钮绑定事件
query(".btn").on("click",function(event){
var value=event.currentTarget.defaultValue;
switch(value){
case "移动客户端图形":
//激活Edit工具(移动)
edit.activate(Edit.MOVE,graphic);
break;
case "拉伸客户端图形":
//构建Edit参数 注:拉伸的时候,可以指定是否保持长宽比例
var options = {
uniformScaling:true
};
//激活Edit工具(拉伸客户端图形)
edit.activate(Edit.SCALE,graphic,options);
break;
case "旋转客户端图形":
//激活Edit工具(旋转客户端图形)
edit.activate(Edit.ROTATE,graphic);
break;
case "编辑结点":
//构建Edit参数 注:编辑折点的时候,要指定是否能添加或者删除结点。
var options = {
allowAddVertices:true,//能添加结点
allowDeleteVertices: true//能删除结点
};
edit.activate(Edit.EDIT_VERTICES, graphic, options);
break;
}
});
//用完Edit工具,将工具关闭,点击地图(没有点击到Graphic时结束)
map.on("click", function () {
edit.deactivate();
})
});
</script>
</head>
<body>
<div id="mapDiv" class="MapClass"></div>
<input type="button" id="add" value="添加客户端图形">
<input type="button" class="btn" value="移动客户端图形">
<input type="button" class="btn" value="拉伸客户端图形">
<input type="button" class="btn" value="旋转客户端图形">
<input type="button" class="btn" value="编辑结点">
</body>
</html>
注意问题
ArcGIS JS API 文档:https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html
参考:http://blog.csdn.net/lovecarpenter/article/details/52709903