7 ArcGIS JavaScriptAPI编程
7.1 ArcGIS Online地图服务
本文用的地图是ESRI的在线地图服务的地图数据。使用这个服务不需要客户端装任何东西。ArcGIS Online Map Server使用REST(Representational State Transfer)的对象访问协议。REST，表述性状态转移，只要使用网址，就可以很容易地创建、发布和使用“REST风格”的网络服务。相比REST之前的简单对象访问协议（SOAP），REST是轻量级的，使用简便、灵活。REST是各层次开发者利用ArcGISServer创建自定义应用的最简便方法。其实质是用URI（统一的资源标识，它是以某种统一的标准化的方式标识资源的一串字符串）描述互联网上的资源，所以没有开发工具的限制。
使用ArcGIS JSAPI可以快速的创建交互式的地图RIA应用——RIA（Rich Internet Applications）富互联网应用，具有高度互动性、丰富用户体验以及功能强大的客户端。基于REST API，我们可以为用户提供查询，显示要素等服务。利用叠加GP服务，可以为用户提供专业的分析结果。
更多的资源请参考：
本文的例子在：C:\InstantRails-2.0-win\rails_apps\gis\app\views\home\index.html.erb。
1）创建一个文本文件，复制下面的代码到文件中，然后文件保存为:arcgis-demo.html。
清单14：arcgis-demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ArcGIS Online Map Simplest Demo - cheungmine</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css"> <style type="text/css"> html,body { height:100%; width:100%; margin:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } #mainWindow { width:100%; height:100%; margin:0px; padding:0; } #mapDiv { background-color:#FFF; border:solid 1px #AEAEAE; margin:0px; padding:0; } </style> <%= javascript_include_tag :defaults %> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"> </script> <script type="text/javascript"> dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.Scalebar"); dojo.require("esri.toolbars.draw"); dojo.require("esri.dijit.OverviewMap"); var map, spatialRef, initExtent; // init on load function initGCS_WGS_1984() { // 4326 = GCS_WGS_1984 spatialRef = new esri.SpatialReference({wkid:4326}); // china extent: Longitude(65～145), Latitude(9~55) initExtent = new esri.geometry.Extent(65, 9, 145, 55, spatialRef); map = new esri.Map("mapDiv"); map.setExtent(initExtent); dojo.connect(map, 'onLoad', function(map) { var scalebar = new esri.dijit.Scalebar({map: map, scalebarUnit: "metric"}); dojo.connect(dijit.byId('mapDiv'), 'resize', resizeMap); initToolbar(map); // add the overview map var overviewMapDijit = new esri.dijit.OverviewMap({map: map, visible:false}); overviewMapDijit.startup(); } ); var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); map.addLayer(basemap); } // init on load function initWGS_1984_Web_Mercator_Auxiliary_Sphere() { // 102100 = WGS_1984_Web_Mercator_Auxiliary_Sphere spatialRef = new esri.SpatialReference({"wkid": 102100}); // china extent initExtent = new esri.geometry.Extent({ "xmin":-32971876.5210848, "ymin":2044843.3806844242, "xmax":-23921732.37212246, "ymax":7127600.013534156, "spatialReference":{"wkid":102100} }); map = new esri.Map("mapDiv", {extent:initExtent, wrapAround180:true}); dojo.connect(map, 'onLoad', function(map) { var scalebar = new esri.dijit.Scalebar({map: map, scalebarUnit: "metric"}); dojo.connect(dijit.byId('mapDiv'), 'resize', resizeMap); initToolbar(map); // add the overview map var overviewMapDijit = new esri.dijit.OverviewMap({map: map, visible:false}); overviewMapDijit.startup(); } ); var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); map.addLayer(basemap); var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"; var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl); map.addLayer(referenceLayer); } // resize map function resizeMap() { var resizeTimer; clearTimeout(resizeTimer); resizeTimer = setTimeout( function(){map.resize(); map.reposition();}, 500 ); } // show map on load // dojo.addOnLoad(initGCS_WGS_1984); dojo.addOnLoad(initWGS_1984_Web_Mercator_Auxiliary_Sphere); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"> <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center"> </div> <!-- mapDiv --> <!-- mainWindow --> </body> </html>
2）使用浏览器打开这个文件，就可以看到Web地图了。
图10：arcgis-demo.html展示的ArcGIS Online Map
7.3 ArcGIS JSAPI 使用了Dojo这个著名的Ajax开源JavaScript库为什么是dojo?
1）Dojo宽松的使用许可
2）Dojo功能全面，事件设计模式、矢量图形支持、显示效果、widgets、Ajax、JSON等都是ArcServer客户端开发所需要的，并且Dojo利于扩展，方便Mashup应用
3）客户端有丰富的图表
参考:
