（四）ArcGIS API For Javascript之地图操作及小部件

最新推荐文章于 2023-08-15 16:35:41 发布

GISer.Wang

最新推荐文章于 2023-08-15 16:35:41 发布

阅读量1.5w

点赞数 13

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/53023359

版权

ArcGIS API For JS基础学习专栏收录该内容

21 篇文章 65 订阅

订阅专栏

文章目录

1.引言
3.API中的小部件
4.数据下载地址

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>

创建小部件（并指定小部件绑定在哪一个DOM元素上面）

			//1.创建小部件对象
            var overviewMapDijit = new OverviewMap({
                map: map,
                visible: true,
            },dom.byId("view"));//指定将小部件绑定在哪个DOM元素上面

启用小部件

			//2.启用小部件
            overviewMapDijit.startup();

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,
            });

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>

4.数据下载地址

GitHub的数据及代码下载地址为：GitHub的数据及代码下载链接（如果从GitHub下载代码，麻烦给小Demo一个Star，您的支持是我最大的动力）

GISer.Wang

关注

13
点赞
踩
25

收藏

觉得还不错? 一键收藏
4
评论
（四）ArcGIS API For Javascript之地图操作及小部件

引言地图的基本操作1代码实现2运行结果3全部代码API中的小部件1代码实现2代码结果绑定在DOM3全部代码绑定在DOM4补充将小部件绑定在地图上5运行结果绑定在地图6全部代码绑定在地图
复制链接

扫一扫