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>