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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WebGIS</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
<script type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
<style type="text/css">
.MapClass{
width:100%;
height:800px;
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/graphic",
"esri/symbols/SimpleLineSymbol",
"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/ecology/beijing_2012_3/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>
|
