您的位置：首页 > 编程语言 > Java开发

（十一）ArcGIS API For Javacsript编辑客户端图形

2016-11-01 14:03 561 查看

引言

Edit工具的使用
1代码实现

2结果
21移动图形前后点击移动客户端图形按钮移动图形

22拉伸图形前后点击拉伸客户端图形拉伸图形

23旋转图形前后点击旋转客户端图形旋转图形

24添加结点前后点击编辑结点添加结点

25删除结点前后点击编辑结点删除结点

3完整代码

1. 引言

在ArcGIS API当中，提供了一个工具叫做

Edit

，我们利用

Edit

可以交互的编辑客户端图形

Graphic

，这个功能在我们实际开发过程中非常有用，可以交互编辑已经存在的

Graphic

以达到我们的目的，

Edit

工具可以从以下方面编辑客户端图形：

移动客户端图形

编辑结点（增加结点，删除结点）

拉伸客户端图形（是否保持长宽比例）

旋转客户端图形

2.Edit工具的使用

使用

Edit

工具很简单，只需要以下几步即可：

给地图添加

Graphic

，为了下面

Edit

交互操作做准备

创建

Edit

对象

激活

Edit

工具，此时需要制定

Edit

的一些参数

操作完

Graphic

将

Edit

工具关闭

2.1代码实现

添加地图（省略）

定义

Edit

对象，和

graphic

对象

//声明一个客户端图形（为了以后的编辑）
var graphic
//定义一个Edit对象
var edit = new Edit(map);

首先创建几个按钮（用户实现相应的功能）

<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="编辑结点">

给

添加客户端图形

按钮添加绑定事件

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 ring=[];
ring[0]=[
[510275, 3986100],
[510508, 3986162],
[510596, 3986032],
[510271, 3985847],
[510275, 3986100]
];
var geometry=new Polygon({
"rings":ring,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,fill);
map.graphics.add(graphic);
})

给剩余四个按钮添加绑定事件

//给剩余四个按钮绑定事件
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

工具

//用完Edit工具，将工具关闭，点击地图（没有点击到Graphic时结束）
map.on("click", function () {
edit.deactivate();
})

2.2结果

2.2.1移动图形前后（点击移动客户端图形按钮，移动图形）

2.2.2拉伸图形前后（点击拉伸客户端图形，拉伸图形）

2.2.3旋转图形前后（点击旋转客户端图形，旋转图形）

2.2.4添加结点前后（点击编辑结点，添加结点）

2.2.5删除结点前后（点击编辑结点，删除结点）

右击结点出现删除提示：

2.3完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Graphic</title>
<link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/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/geometry/Polygon",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol","dojo/colors","dojo/query",
"dojo/domReady!"
], function (
Map,dom,on, Edit,Polygon, ArcGISDynamicMapServiceLayer, Graphic,
SimpleLineSymbol, SimpleFillSymbol,Color,query
) {
var map = new Map("mapDiv");
var url = "http://localhost:6080/arcgis/rest/services/Test/MyService/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 ring=[];
ring[0]=[
[510275, 3986100],
[510508, 3986162],
[510596, 3986032],
[510271, 3985847],
[510275, 3986100]
];
var geometry=new Polygon({
"rings":ring,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,fill);
map.graphics.add(graphic);
})
//给按钮绑定事件
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航