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>