當前位置：首頁 > 编程语言 > java >内容正文

java

深入浅出 Javascript API（二）--地图显示与基本操作转

發布時間：2023/12/18 java 32 豆豆

生活随笔收集整理的這篇文章主要介紹了深入浅出 Javascript API（二）--地图显示与基本操作转小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

深入淺出 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提供的樣式表

<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

本主題由 flyingis 于 2008-10-16 09:00 設置高亮

轉載于:https://www.cnblogs.com/liufei88866/archive/2009/07/06/1517617.html

總結

以上是生活随笔為你收集整理的深入浅出 Javascript API（二）--地图显示与基本操作转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python import re_Pyt
下一篇：开博了，喜欢这里的气氛

java

深入浅出 Javascript API（二）--地图显示与基本操作 转

總結

深入浅出 Javascript API（二）--地图显示与基本操作转