深入浅出 Javascript API（二）--地图显示与基本操作 转
生活随笔
收集整理的這篇文章主要介紹了
深入浅出 Javascript API（二）--地图显示与基本操作 转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
深入淺出 Javascript API（二）--地圖顯示與基本操作
本主題由 flyingis 于 2008-10-16 09:00 設置高亮
| 地圖顯示與基本操作（放大、縮小、移動、坐標顯示）是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提供的樣式表 <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和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 ο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> ? ? 完工！顯示效果，界面很簡單，但包含了鼠標和鍵盤的快捷鍵操作： ? ? 博客園鏈接：http://www.cnblogs.com/flyingis/archive/2008/07/20/1246963.html |
轉載于:https://www.cnblogs.com/liufei88866/archive/2009/07/06/1517617.html
總結
以上是生活随笔為你收集整理的深入浅出 Javascript API（二）--地图显示与基本操作 转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python import re_Pyt
- 下一篇： java spi机制_Java是如何实现