ArcGISAPIForJavascript之GraphicsLayer
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ArcGISAPIForJavascript之GraphicsLayer
1.引⾔
在ArcGIS API中有⼀种图层叫做GraphicsLayer，GraphicsLayer是⼀种客户端图层，GraphicsLayer中的图形我们称作Graphic，它对应
着esri/graphic，⼀个Graphic对象由四部分组成：geometry,symbol,attribute,infoTemplate组成，Graphic对象在我们开发中⽤到的⾮常多。
例如：利⽤Graphic实现图形的⾼亮显⽰等等。
2.需求
在我们开发当中，关于Graphic的使⽤⾮常多，我们可以利⽤Graphic实现各种各样的功能。
接下来我们根据⼀些需求来完成相应的功能。
2.1.根据具体坐标⽣成Graphic
在我们的实际开发当中可能会存在这样的需求：根据坐标以及形状⽣成相应的图形然后在地图显⽰出来
在上⾯说过⼀个Graphic由四部分组成，在需求中我们已经知道坐标形状，即已经知道了geometry,因此我们可以直接根据坐标⽣成相应
的geometry，从⽽创建Graphic，然后添加到地图中来。
2.1.1代码实现
我们⾸先创建⼀个html页⾯，引⼊相应的⽂件将地图加载进来
<!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","esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"],function(Map,ArcGISDynamicMapServiceLayer){
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");
map.addLayer(layer);
})
</script>
</head>
<body>
<div id="mapDiv" class="MapClass"></div>
</body>
创建四个按钮，将四类不同的Graphic添加到GraphicsLayer中
<button>添加点</button>
<button>添加线</button>
<button>添加⾯</button>
<button>添加圆</button>
1
2
3
4
1
2
3
4
引⼊相应的模块，其中包括：
dojo/on（⽤于绑定事件的模块）
esri/symbols/SimpleMarkerSymbol（点符号类）
esri/symbols/SimpleLineSymbol（线符号类）
esri/symbols/SimpleFillSymbol（⾯符号类）
esri/geometry/Point（点类）
esri/geometry/Polyline（折线类）
esri/geometry/Polygon（⾯类）
esri/geometry/Circle（圆类）
dojo/query（dojo的选择器，⽤于选择DOM元素）
esri/graphic（图形类）
esri/layers/GraphicsLayer（客户端图层类）
为相应的按钮添加绑定事件
//创建客户端图层
var graphicsLayer=new GraphicsLayer();
//将客户端图层添加到地图中
map.addLayer(graphicsLayer);
//通过query查询到button对象
var btns=query("button");
on(btns,"click",function(event){
//获得按钮的⽂本
var text=this.innerHTML;
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定义点符号l
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0])); //定义⾯符号
var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0]));
//声明⼀个类型和图形
var geometry;
var graphic;
//根据⽂本定义相应的geometry
switch(text)
{
case "添加点":
geometry=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,pSymbol);
break;
case "添加线":
//点的坐标对
var paths=[];
paths[0]=[
[510326,3985702],
[510994, 3985676],
[511078, 3985903],
[510433, 3985928]
];
geometry=new Polyline({
"paths":paths,
"spatialReference":map.spatialReference
})
case "添加⾯":
//点的坐标对
var ring=[];
ring[0]=[
[510275, 3986100],
[510508, 3986162],
[510596, 3986032],
[510271, 3985847],
[510275, 3986100]
];
geometry=new Polygon({
"rings":ring,
"spatialReference":map.spatialReference });
graphic=new Graphic(geometry,fill);
break;
case "添加圆":
//圆⼼
var p=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference });
//半径
var r=20;
geometry=new Circle(p,{
"radius":r
});
graphic=new Graphic(geometry,fill);
break;
}
//将图形添加到图层中
graphicsLayer.add(graphic);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2.1.2全部代码
<!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" />
.MapClass{
width:100%;
height:500px;
border:1px solid #000;
}
</style>
<script>
require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/GraphicsLayer",
"dojo/on","dojo/query","dojo/colors",
"esri/graphic","esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Point",
"esri/geometry/Polyline","esri/geometry/Polygon",
"esri/geometry/Circle",
"dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer,
GraphicsLayer,on,query,Color,Graphic,
SimpleMarkerSymbol,SimpleLineSymbol,
SimpleFillSymbol,Point,Polyline,Polygon,Circle){
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");
map.addLayer(layer);
//创建客户端图层
var graphicsLayer=new GraphicsLayer();
//将客户端图层添加到地图中
map.addLayer(graphicsLayer);
//通过query查询到button对象
var btns=query("button");
on(btns,"click",function(event){
//获得按钮的⽂本
var text=this.innerHTML;
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定义点符号l
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0])); //定义⾯符号
var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0]));
//声明⼀个类型和图形
var geometry;
var graphic;
//根据⽂本定义相应的geometry
switch(text)
{
case "添加点":
geometry=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,pSymbol);
break;
case "添加线":
//点的坐标对
var paths=[];
paths[0]=[
[510326,3985702],
[510994, 3985676],
[511078, 3985903],
[510433, 3985928]
];
geometry=new Polyline({
"paths":paths,
"spatialReference":map.spatialReference
})
graphic=new Graphic(geometry,lineSymbol);
break;
case "添加⾯":
//点的坐标对
var ring=[];
ring[0]=[
[510275, 3986100],
[510508, 3986162],
[510596, 3986032],
[510271, 3985847],
[510275, 3986100]
];
geometry=new Polygon({
"rings":ring,
graphic=new Graphic(geometry,fill);
break;
case "添加圆":
//圆⼼
var p=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference
});
//半径
var r=20;
geometry=new Circle(p,{
"radius":r
});
graphic=new Graphic(geometry,fill);
break;
}
//将图形添加到图层中
graphicsLayer.add(graphic);
})
})
</script>
</head>
<body>
<div id="mapDiv" class="MapClass"></div>
<button>添加点</button>
<button>添加线</button>
<button>添加⾯</button>
<button>添加圆</button>
</body>
</html>
2.1.3代码解释
我们利⽤dojo/query查询到所有的button对象，利⽤dojo/on模块给所有的button对象绑定事件。
在此例⼦中，有⼀个缺点：便是将点的坐标写死了，因此我们可以将点的坐标存放在⼀个json⽂件中，从⽽读取⽂件⽣成相应的点坐标
2.2.GraphicsLayer的属性查询
在前⾯我们提到过，Graphic是可以存在属性的，在实际开发当中，有时我们需要将相应的属性查询出来，在此时我提供⼀个简单的⽅法，便是根据 GraphicsLayer的点击事件来查询Graphic的属性。
2.2.1代码实现
⾸先我们添加⼀系列带有属性的Graphic（此处我们只⽤点图形便可以）
//创建客户端图层
var graphicsLayer=new GraphicsLayer();
//将客户端图层添加到地图中
map.addLayer(graphicsLayer);
//添加点图形的函数
function addGraphic()
{
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定义点符号l
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]));
//声明形状
var geometry;
//声明和图形
var graphic;
//添加第⼀个点图形
geometry=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference,
attributes:{
"h":100
}
});
graphic=new Graphic(geometry,pSymbol);
graphicsLayer.add(graphic);
//添加第⼆个点图形
geometry=new Point({
"x":510326,
attributes:{
"h":200
}
});
graphic=new Graphic(geometry,pSymbol); graphicsLayer.add(graphic);
//添加第三个点图形
geometry=new Point({
"x":510275,
"y":3986100,
"spatialReference":map.spatialReference, attributes:{
"h":300
}
});
graphic=new Graphic(geometry,pSymbol); graphicsLayer.add(graphic);
}
//调⽤添加点图形的函数
addGraphic();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
给GraphicsLayer绑定相应的事件
//绑定事件
on(graphicsLayer,"click",function(event){ var graphic=event.graphic;
alert(graphic.attributes["h"]);
})
1
2
3
4
5
3
4
5
2.2.2全部代码
<!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","esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/GraphicsLayer",
"dojo/on","dojo/query","dojo/colors",
"esri/graphic","esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/geometry/Point",
"dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer,
GraphicsLayer,on,query,Color,Graphic,
SimpleMarkerSymbol,SimpleLineSymbol,Point){
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");
map.addLayer(layer);
//创建客户端图层
var graphicsLayer=new GraphicsLayer();
//将客户端图层添加到地图中
map.addLayer(graphicsLayer);
//添加点图形的函数
function addGraphic()
{
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
//定义点符号l
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0])); //声明形状
var geometry;
//声明和图形
var graphic;
//添加第⼀个点图形
geometry=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference,
});
graphic=new Graphic(geometry,pSymbol,{"h":100});
graphicsLayer.add(graphic);
//添加第⼆个点图形
geometry=new Point({
"x":510326,
"y":3985702,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,pSymbol,{"h":200});
graphicsLayer.add(graphic);
//添加第三个点图形
geometry=new Point({
"x":510275,
"y":3986100,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,pSymbol,{"h":300});
graphicsLayer.add(graphic);
}
//调⽤添加点图形的函数
addGraphic();
//绑定事件
var graphic=event.graphic;
alert(graphic.attributes["h"]);
})
})
</script>
</head>
<body>
<div id="mapDiv" class="MapClass"></div>
</body>
</html>
2.2.3代码解释
需要注意的是graphicsLayer的事件机制是针对于graphic图形的,也就是当图形graphic被点击时被触发，此时回调函数也会将哪个图形被点击传给我们，从⽽得到图形的属性
有的同学不太喜欢新建⼀个graphicsLayer,⽽是使⽤map.graphics.add()⽅法添加⼀个图形graphic，其实原理是⼀样的，因为map本⾝有⼀个默认的graphicsLayer即：map.graphics返回的便是⼀个graphicsLayer对象
在此代码当中我们只是将获得到的属性信息alert了⼀下，在真实需求当中我们可能会利⽤相应的属性信息做很多的事情。
2.3.实现⽤户交互画图（Draw⼯具）
在部分项⽬中，有这么⼀个需求：让⽤户在地图上⾃⼰绘制⼀个图形，然后将图形添加到地图当中，要实现这个功能我们需要借助esri提供给我们的⼯具条实现：esri/toolbars/draw，利⽤该⼯具条我们可以得到⽤户交互画出来的geometry,从⽽根据geometry⽣成相应的graphic，使⽤该⼯具的⼀般步骤为：
1. 创建绘图对象
2. 激活绘图⼯具
3. 得到图形Geometry
4. 创建Graphic
5. 添加到地图
2.3.1代码实现
创建5个button（和第⼀个例⼦⼀样）
创建绘图对象
var toolbar = new Draw(map, { showTooltips: true });
1
1
给每⼀个button绑定相应的事件（激活绘图⼯具）
query("button").on("click",function(event){
var value=this.innerHTML;
switch(value){
case "绘制点":{
//激活绘图⼯具（画点）
toolbar.activate(Draw.POINT, {
showTooltips:true
})
break;
}
case "绘制折线":{
//激活绘图⼯具（画折线）
toolbar.activate(Draw.POLYLINE, {
showTooltips:true
})
break;
}
case "绘制⾯":{
//激活绘图⼯具（绘制⾯）
toolbar.activate(Draw.POLYGON, {
showTooltips:true
})
break;
}
case "徒⼿线":{
//激活绘图⼯具（徒⼿线）
toolbar.activate(Draw.FREEHAND_POLYLINE, {
})
break;
}
case "徒⼿⾯":{
//激活绘图⼯具（徒⼿⾯）
toolbar.activate(Draw.FREEHAND_POLYGON, { showTooltips:true
})
break;
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
给绘图⼯具绑定绘图完成事件
on(toolbar,"draw-complete", function (result) {
//获得⼏何形状
var geometry=result.geometry;
//获得形状的类型
var type=geometry.type;
//声明图形对象
var graphic;
//通过⼏何形状的类型，创建不同的图形
switch (type) {
case "point":
graphic= new Graphic(geometry, marker);
break;
case "polyline":
graphic= new Graphic(geometry, lineSymbol);
break;
case "polygon":
graphic= new Graphic(geometry, fill);
break;
}
map.graphics.add(graphic);
//关掉绘图⼯具
toolbar.deactivate();
});
2.3.2全部代码
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WebGIS</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 type="text/css">
.MapClass{
width:100%;
height:500px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
require(["esri/map","dojo/dom","dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/query","esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol","esri/graphic","esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol","dojo/domReady!"], function (Map,dom,on, ArcGISDynamicMapServiceLayer,query, Draw, SimpleLineSymbol,Graphic,SimpleMarkerSymbol,SimpleFillSymbol) {
var map = new esri.Map("MyMapDiv");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");
map.addLayer(layer)
var toolbar = new Draw(map, { showTooltips: true });
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
var marker= new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new dojo.Color([255, 0, 0]));
var fill= new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([255, 0, 0]));
on(toolbar,"draw-complete", function (result) {
var geometry=result.geometry;
var type=geometry.type;
var graphic;
switch (type) {
case "point":
graphic= new Graphic(geometry, marker);
break;
case "polyline":
graphic= new Graphic(geometry, lineSymbol);
break;
case "polygon":
graphic= new Graphic(geometry, fill);
break;
}
map.graphics.add(graphic);
toolbar.deactivate();
});
query("button").on("click",function(event){
var value=this.innerHTML;
switch(value){
case "绘制点":{
toolbar.activate(Draw.POINT, {
showTooltips:true
})
break;
}
case "绘制折线":{
toolbar.activate(Draw.POLYLINE, {
showTooltips:true
})
break;
}
case "绘制⾯":{
toolbar.activate(Draw.POLYGON, {
showTooltips:true
})
break;
}
case "徒⼿线":{
toolbar.activate(Draw.FREEHAND_POLYLINE, {
showTooltips:true
})
break;
}
case "徒⼿⾯":{
toolbar.activate(Draw.FREEHAND_POLYGON, {
showTooltips:true
})
break;
}
}
});
});
</script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button>绘制点</button>
<button>绘制折线</button>
<button>绘制⾯</button>
<button>徒⼿线</button>
<button>徒⼿⾯</button>
</body>
</html>
2.3.3代码解释
在使⽤绘图⼯具时，最主要的不同为：在激活绘图⼯具时的赋予的参数的不同。
graphic只是客户端图形，并不改变服务本⾝，如果想要改变服务本⾝的数据，需要使⽤要素服务，⽤到esri/toolbars/Edit⼯具。
3.总结
通过上⾯⼏个需求得知，在⽣成graphic时，最主要是有⽤这个图形的⼏何信息，⼏何信息可以通过多⽅⾯获得，例如：
通过具体的坐标⽣成geometry（实现）
通过draw⼯具动态获得geometry（实现）
我们还可以通过map的点击事件获得点的geometry（可以尝试⾃⼰实现）。
⼀旦拥有了图形的⼏何信息，我们就可以直接创建graphic，从⽽添加到地图中来。