ArcGIS JS Demo

最近在用 ArcGIS 写了一个Demo

效果如下：

 

1. 引用 ArcGIS JS API 

arcgis_js_api/init.js

2. 引用 样式

arcgis_js_api/js/esri/css/esri.css

arcgis_js_api/js/dojo/dijit/themes/tundra/tundra.css

 

3. 引用 ArcGIS JS API 的命名空间

dojo.require("esri.map");

4. 结构模板

dojo.require("esri.map");

funtion init() {

。。。

}

dojo.addOnLoad(init);

 

5. 事件注册

dojo.connect(map,"eventName",functionCallback);

 

具体代码：

 1     <script type="text/javascript">
 2         dojo.require("esri.map");
 3         dojo.require("dojo.parser");
 4         dojo.require("esri.layers.agstiled");
 5         dojo.require("esri.toolbars.draw");
 6         dojo.require("dijit.layout.BorderContainer");
 7         dojo.require("dijit.layout.ContentPane");
 8         dojo.require("esri.dijit.Scalebar");
 9 
10         var map, tb;
11         function init() {
12             document.getElementById('map').setAttribute('height', window.screen.height);
13             document.getElementById('map').setAttribute('width', window.screen.width);
14 
15             map = new esri.Map("map");
16             var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://HostServerIP/arcgis/rest/services/AhMap/MapServer");
17             dojo.connect(map, "onLoad", function () {
18                 dojo.connect(map, "onMouseMove", showCoordinates);
19                 dojo.connect(map, "onMouseDrag", showCoordinates);
20                 var scalebar = new esri.dijit.Scalebar({
21                     map: map,
22                     scalebarUnit: "metric"
23                 });
24                 ondrawPoint();
25             });
26             map.addLayer(layer);
27         }
28 
29         var mp2;
30         var mp3;
31         var picSymbol;
32         function ondrawPoint() {
33             var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });
34 
35             toolbar.activate(esri.toolbars.Draw.POINT);
36 
37             dojo.connect(toolbar, "onDrawEnd", function (geometry) {
38                 map.graphics.clear();                
39                 var path = "<%=IconPath %>";
40                 picSymbol = new esri.symbol.PictureMarkerSymbol(path, 50, 50);
41                 var picGraphic = new esri.Graphic(mp2, picSymbol);
42                 map.graphics.add(picGraphic);
43 
44                 mp3 = mp2;
45                 document.getElementById("txtLongitude").value = mp2.x;
46                 document.getElementById("txtLatitude").value = mp2.y;
47             });
48         }
49 
50         function showCoordinates(evt) {
51             var mp = evt.mapPoint;
52             mp2 = mp;
53             dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
54         }
55 
56         function doAngle() {
57             var angle = document.getElementById("txt_angle").value;
58             picSymbol.setAngle(angle);
59             map.centerAt(mp3);
60 
61             var extent = map.extent;
62             map.setExtent(extent.expand(0.99));
63         }
64 
65         function window.onbeforeunload() {
66             var jd = document.getElementById("txtLongitude").value;
67             var wd = document.getElementById("txtLatitude").value;
68             var jiaod = document.getElementById("txt_angle").value;
69 
70             window.returnValue = jd + "," + wd + "," + jiaod;   //返回值    
71             window.close();
72         }        
73 
74         dojo.addOnLoad(init);
75   </script>