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);

具体代码：

     <script type="text/javascript">
         dojo.require("esri.map");
         dojo.require("dojo.parser");
         dojo.require("esri.layers.agstiled");
         dojo.require("esri.toolbars.draw");
         dojo.require("dijit.layout.BorderContainer");
         dojo.require("dijit.layout.ContentPane");
         dojo.require("esri.dijit.Scalebar");

         var map, tb;
         function init() {
             document.getElementById('map').setAttribute('height', window.screen.height);
             document.getElementById('map').setAttribute('width', window.screen.width);

             map = new esri.Map("map");
             var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://HostServerIP/arcgis/rest/services/AhMap/MapServer");
             dojo.connect(map, "onLoad", function () {
                 dojo.connect(map, "onMouseMove", showCoordinates);
                 dojo.connect(map, "onMouseDrag", showCoordinates);
                 var scalebar = new esri.dijit.Scalebar({
                     map: map,
                     scalebarUnit: "metric"
                 });
                 ondrawPoint();
             });
             map.addLayer(layer);
         }

         var mp2;
         var mp3;
         var picSymbol;
         function ondrawPoint() {
             var toolbar = new esri.toolbars.Draw(map, { showTooltips: true });

             toolbar.activate(esri.toolbars.Draw.POINT);

             dojo.connect(toolbar, "onDrawEnd", function (geometry) {
                 map.graphics.clear();
                 var path = "<%=IconPath %>";
                 picSymbol = new esri.symbol.PictureMarkerSymbol(path, 50, 50);
                 var picGraphic = new esri.Graphic(mp2, picSymbol);
                 map.graphics.add(picGraphic);

                 mp3 = mp2;
                 document.getElementById("txtLongitude").value = mp2.x;
                 document.getElementById("txtLatitude").value = mp2.y;
             });
         }

         function showCoordinates(evt) {
             var mp = evt.mapPoint;
             mp2 = mp;
             dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
         }

         function doAngle() {
             var angle = document.getElementById("txt_angle").value;
             picSymbol.setAngle(angle);
             map.centerAt(mp3);

             var extent = map.extent;
             map.setExtent(extent.expand(0.99));
         }

         function window.onbeforeunload() {
             var jd = document.getElementById("txtLongitude").value;
             var wd = document.getElementById("txtLatitude").value;
             var jiaod = document.getElementById("txt_angle").value;

             window.returnValue = jd + "," + wd + "," + jiaod;   //返回值
             window.close();
         }        

         dojo.addOnLoad(init);
   </script>