1.引言
開發一個GIS系統不可避免的就要涉及一些簡單的地圖操作，比如：拉框放大，拉框縮小，平移，全圖等相關操作。除了這些基本的地圖操作，Esri給我們提供的一些小部件也非常有用，其中幾個重要的小部件有：鷹眼，書簽，比例尺等等。在此篇博文中，主要介紹地圖的基本操作和幾個常用的小部件。
2.地圖的基本操作
在ArcGIS API中給我們提供了一個類叫做Navigation，通過這個類我們可以實現對地圖的基本操作，Navigation類的用法可以分為以下幾步：
- 創建
Navigation對象 - 激活
Navigation的相應狀態 - 地圖操作
2.1代碼實現
- 創建五個按鈕
<button>拉框放大</button> <button>拉框縮小</button> <button>平移</button> <button>全圖</button> <button>漫游</button>- 添加地圖（省略）
- 給相應按鈕添加綁定事件
//給按鈕添加綁定事件 query("button").on("click",function(event){ //獲得按鈕的文本信息 var value=this.innerHTML; switch(value){ case "平移": navToolbar.activate(Navigation.PAN); break; case "拉框縮小": navToolbar.activate(Navigation.ZOOM_OUT); break; case "拉框放大": navToolbar.activate(Navigation.ZOOM_IN); break; case "全圖": navToolbar.zoomToFullExtent(); break; case "漫游": //默認是漫游操作 navToolbar.deactivate(); break; } })2.2運行結果
- 以拉框放大為例：
2.3全部代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Geometric _Network</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style type="text/css"> .MapClass{ width:100%; height:600px; border:1px solid #000; } </style> <script type="text/javascript"> require(["esri/map", "dojo/on", "dojo/dom", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/query","esri/toolbars/navigation", "dojo/domReady!"], function (Map,on,dom, ArcGISDynamicMapServiceLayer,query,Navigation ) { var map = new Map("mapDiv",{ logo: false }); var layer = new ArcGISDynamicMapServiceLayer ("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer"); map.addLayer(layer) //創建地圖操作對象 var navToolbar = new Navigation(map); //給按鈕添加綁定事件 query("button").on("click",function(event){ //獲得按鈕的文本信息 var value=this.innerHTML; switch(value){ case "平移": navToolbar.activate(Navigation.PAN); break; case "拉框縮小": navToolbar.activate(Navigation.ZOOM_OUT); break; case "拉框放大": navToolbar.activate(Navigation.ZOOM_IN); break; case "全圖": navToolbar.zoomToFullExtent(); break; case "漫游": //默認是漫游操作 navToolbar.deactivate(); break; } }) }); </script> </head> <body class="tundra"> <div id="mapDiv" class="MapClass"></div> <button>拉框放大</button> <button>拉框縮小</button> <button>平移</button> <button>全圖</button> <button>漫游</button> </body> </html> 3.API中的小部件
關於API中提供的小部件有兩種使用方式：
- 將小部件綁定在一個DOM元素上面
- 將小部件綁定在地圖的上面
3.1代碼實現
- 首先我們將小部件綁定在DOM元素上面
- 我們創建一個DOM元素用於存放鷹眼控件
<div id="view"></div> - 1
- 1
- 創建小部件（並指定小部件綁定在哪一個DOM元素上面）
//1.創建小部件對象 var overviewMapDijit = new OverviewMap({ map: map, visible: true, },dom.byId("view"));//指定將小部件綁定在哪個DOM元素上面- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 啟用小部件
//2.啟用小部件 overviewMapDijit.startup();- 1
- 2
- 1
- 2
3.2代碼結果（綁定在DOM）
3.3全部代碼（綁定在DOM）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Overview Map</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style> .MapClass{ width:600px; height:400px; border:1px solid #000; } #view { height: 100px; width: 100px; border:1px solid red; border-right-color:blue; position:relative; left:800px; top:-200px; } </style> <script> require(["esri/map","dojo/dom","esri/dijit/OverviewMap","dojo/domReady!"], function ( Map,dom, OverviewMap){ var map = new Map("mapDiv", { basemap: "topo" }); //1.創建小部件對象 var overviewMapDijit = new OverviewMap({ map: map, visible: true, },dom.byId("view"));//指定將小部件綁定在哪個DOM元素上面 //2.啟用小部件 overviewMapDijit.startup(); }); </script> </head> <body> <div id="mapDiv" class="MapClass"></div> <div id="view"></div> </body> </html> 3.4補充（將小部件綁定在地圖上）
- 只需要在創建小部件的時候，修改一個屬性即可
var overviewMapDijit = new OverviewMap({ //指定將小部件綁定在地圖的哪一個位置：可以填寫top-right,bottom-right,bottom-left 和top-left. attachTo: "top-right", map: map, visible: true, }); - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
3.5運行結果（綁定在地圖）
3.6全部代碼（綁定在地圖）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Overview Map</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <style> .MapClass{ width:100%; height:600; } </style> <script> require(["esri/map","dojo/dom","esri/dijit/OverviewMap","dojo/domReady!"], function ( Map,dom, OverviewMap){ var map = new Map("mapDiv", { basemap: "topo" }); //1.創建小部件對象 var overviewMapDijit = new OverviewMap({ //指定將小部件綁定在地圖的哪一個位置：可以填寫top-right,bottom-right,bottom-left 和top-left. attachTo: "top-right", map: map, visible: true, }); //2.啟用小部件 overviewMapDijit.startup(); }); </script> </head> <body> <div id="mapDiv" class="MapClass"></div> </body> </html>