第二章 地圖顯示與基本操作
一個WebGIS應用的基本內容包括地圖顯示與放大、縮小、移動、座標顯示等基本操作，那麼在JavaScript API中是如何實現的？實際上JavaScript API在這些基本操作方面提供了非常便捷的開發方法。一般的WebGIS需要ArcGIS Server服務器支持，即使系統沒有配置Server服務，也可以使用ArcGIS Online在線服務。
基於Dojo的JavaScript API天生具有Dojo的跨瀏覽器特性和強大的前端(用戶端)製圖功能，由於Dojo的開放性和擴展性，JavaScript API將具有令人期待的發展前景。在ESRI的資源站點上提供了豐富的示例(http://resources.esri.com)
使用過Dojo的開發人員會很熟悉JavaScript API應用的整個頁面結構，讓我們來看一個例子：
1.使用Dojo提供的樣式表
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1/js/dojo/dijit/themes/tundra/tundra.css";
</style>
2.引用腳本文件
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1">
</script>
這裏可能會有一個疑問，爲什麼是這樣的目錄結構，裏面包含了Dojo和JavaScript API所需要的js庫嗎？其實部署JavaScript API時，針對不同類型服務器端代碼（Java、.Net、php）會有不同的Default頁面，以.Net爲例，Default.ashx引用了三個文件：
context.Response.WriteFile(context.Server.MapPath("js""esri""esri.js"));
context.Response.WriteFile(context.Server.MapPath("js""dojo""dojo""dojo.xd.js"));
context.Response.WriteFile(context.Server.MapPath("js""esri""jsapi.js"));
3.接下來，就要對頁面中所添加的地圖元素與功能進行定製，同樣是在腳本中完成，使用JavaScript API
<script type="text/javascript">
dojo.require("esri.map");
var myMap, myTiledMapServiceLayer;
function init() {
myMap = new esri.Map("mapDiv");
myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
dojo.require引入所需的包，其中的esri.Map類實現了圖層、Graphics、消息窗口（查詢屬 性）、其他導航控制的方法，這裏在指定的div中創建了一個地圖。esri.layers.ArcGISTiledMapServiceLayer的作用是獲取REST API所提供的cache地圖服務。這是一個在線服務，REST所能提供的其他服務可以查看REST API文檔。esri.layers.ArcGISTiledMapServiceLayer繼承於 esri.layers.ArcGISMapServiceLayer，該父類下還有另外一個子類 ArcGISDynamicMapServiceLayer，用於獲取非cache地圖服務。
最後通過esri.Map的addLayer方法將該服務中的圖層添加到當前地圖中顯示。
dojo.addOnLoad(init)等價於<body οnlοad=init>，頁面加載的時候將執行init()腳本。
4.頁面body區域
<body>
<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>
<h4>Work flow:</h4>
<ul>
<li>Create a map.</li>
<li>Add an ArcGISTiledMapServiceLayer.</li>
</ul>
</body>
最終地圖將在mapDiv區域繪出。
5.放大縮小平移
esri.Map類包含地圖放大、縮小、平移等基本功能的實現，可以將這些操作和業務應用綁定。通過esri.Map構造方法生成的地圖對象實際已經包含一些基礎操作的快捷方式，如鍵盤方向鍵上下左右完成地圖上下左右的固定單位移動，鼠標滾輪實現地圖放大縮小，"shift+單擊"爲居中，"shift+雙擊"爲居中放大，"+"放大一級，"-"縮小一級。
6.動態顯示當前鼠標位置的經緯度座標
動態顯示鼠標經緯度座標大體上有兩種方式，：一是服務器端生成座標；二是客戶端生成座標，。孰優孰劣都很清楚了，服務器生成座標值會消耗大量服務器資源，onMouseMove 總是在不停向服務器發送請求。這種模式下經常會碰到鼠標移動已經停止了，但是狀態欄上的座標信息還在變化，這就是服務器計算造成的延時造成的。因此對於真正上線的WebGIS網站更多使用客戶端方式，通過獲取屏幕座標，在投影參考系下換算地理座標，顯示在頁面。
JavaScript API提供了一套API獲取地理座標：
function showCoordinates(evt) {
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
}
mapPoint是地理座標，screenPoint是屏幕座標。
7.通過dojo.connect建立對鼠標事件的監聽
dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);
同時監聽鼠標拖拽事件，添加到map.onLoad中就可以了，當然body區域中要加入顯示座標的div
<div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
完工！顯示效果，界面很簡單，但包含了鼠標和鍵盤的快捷鍵操作：
本篇文章來源於 GIS空間站 轉載請以鏈接形式註明出處 網址：http://www.gissky.net/Article/1397_2.htm