深入淺出 Javascript API（二）–地圖顯示與基本操作

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

深入淺出 Javascript API（二）--地圖顯示與基本操作

地圖顯示與基本操作（放大、縮小、移動、座標顯示）是JavascriptAPI的準系統，也是一個WebGIS應用的基本內容，Javascript提供了非常便捷的開發方法，當然線上瀏覽需要Ags伺服器支援，如果自己電腦上沒有配置Server服務，可以使用ArcGIS Online線上服務。
內容目錄：

1.Cache和非Cache地圖展示
2.地圖基本操作，如放大、縮小、移動，並和滑鼠鍵盤按鍵關聯
3.用戶端顯示滑鼠當前地理位置

直接使用線上地圖查看最終效果：
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Map/AddMapShowXYCoords.html

使用過Dojo的開發人員應該很熟悉整個頁面結構：

1.使用dojo提供的樣式表

2.引用指令檔
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1">
</script>

這裡可能會有一個疑問，為什麼是這樣的目錄結構，裡麵包含了dojo和javascriptapi所需要的js庫嗎？其實部署javascriptapi時，針對不同類型伺服器端代碼（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"));

將該頁面設為起始頁後，訪問"http://ip/js/arcgis"時會直接將這三個js檔案合并下載，大概300多KB。

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所能提供的其他服務可以查看RESTAPI文檔。esri.layers.ArcGISTiledMapServiceLayer繼承於esri.layers.ArcGISMapServiceLayer，該父類下還有另外一個子類ArcGISDynamicMapServiceLayer，用於擷取非cache地圖服務。

最後通過esri.Map的addLayer方法將該服務中的圖層添加到當前地圖中顯示。

dojo.addOnLoad(init)等價於<body onload=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>

完工！顯示效果，介面很簡單，但包含了滑鼠和鍵盤的快速鍵操作：

部落格園連結：http://www.cnblogs.com/flyingis/archive/2008/07/20/1246963.html

本主題由 flyingis 於 2008-10-16 09:00 設定高亮

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More