1、文章讲解的为地图的平移、放大、缩小、前视图、后视图以及全景视图的基本功能操作

2、主要用到的是arcgis api for javascript中Navigation的用法，代码如下：

<!DOCTYPE HTML>

<html>

<head>

    <title>显示地图的基本操作</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.29/"></script>

</head>

<body>

<div id='map'>

</div>

<div id='Navigation'>

    <input type='button' id='pan' value='平移' />

    <input type='button' id='zoomin' value='放大' />

    <input type='button' id='zoomout'value='缩小' />

    <input type='button' id='prev'value='前视图' />

    <input type='button' id='next'value='后视图' />

    <input type='button' id='zoomtofull'value='全景视图' />

</div>

<script>

    require([

        "esri/map",

        "esri/toolbars/navigation",

        "dojo/domReady!"], function(

            Map,

            Navigation) {

        var map = new Map("map", {

            center: [116.403119,39.915599],

            zoom:2,

            basemap: "osm"

        });

        //新建一个Navigation对象，参数是map对象

        var navtoolbar=new Navigation(map);

         document.getElementById('pan').onclick=function(){

         navtoolbar.activate(Navigation.PAN);// 平移

         };

         document.getElementById('zoomin').onclick=function(){

         navtoolbar.activate(Navigation.ZOOM_IN);//放大

         };

         document.getElementById('zoomout').onclick=function(){

         navtoolbar.activate(Navigation.ZOOM_OUT);//缩小

         };

         document.getElementById('prev').onclick=function(){

         navtoolbar.zoomToPrevExtent();//前视图

         };

         document.getElementById('next').onclick=function(){

         navtoolbar.zoomToNextExtent();//后视图

         };

         document.getElementById('zoomtofull').onclick=function(){

         navtoolbar.zoomToFullExtent();//全景视图

         };

    });

</script>

</body>

</html>

3、注意：放大缩小按键分别为拉框显示放大，缩小的作用！

												


											
arcgis api for javascript 学习（四） 地图的基本操作的更多相关文章
	

    
						
  1. arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版
		
    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...
    
		
    2. 
								
  2. ArcGis API for JavaScript学习——加载地图
		
    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
    
		
    3. 
						
  3. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中
		
    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...
    
		
    4. 
						
  4. arcgis api for javascript 学习（六） 地图打印
		
    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
    
		
    5. 
						
  5. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
		
    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
    
		
    6. 
						
  6. ArcGis API for JavaScript学习——离线部署API
		
    ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...
    
		
    7. 
						
  7. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
		
    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
    
		
    8. 
						
  8. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
		
    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
    
		
    9. 
						
  9. Arcgis api for javascript学习笔记 - 不改变默认端口(6080)情况下，外网访问Arcgis Server 发布的接口
		
    Arcgis Server发布的地图服务地址默认端口号是6080,假设本机上只对80端口做了外网映射,在IIS中部署了一个网站绑定了80端口,那么网站中某个页面通过arcgis api for js  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MySql-8.0.16-winx64 安装
			
    参考文章: https://www.cnblogs.com/lxlin/p/9635350.html https://www.cnblogs.com/xc1234/p/9050149.html MyS ...
    
			
    2. 
						
  2. ASP.NET Core Web 应用程序开发期间部署到IIS自定义主机域名并附加到进程调试
			
    想必大家之前在进行ASP.NET Web 应用程序开发期间都有用到过将我们的网站部署到IIS自定义主机域名并附加到进程进行调试. 那我们的ASP.NET Core Web 应用程序又是如何部署到我们的 ...
    
			
    3. 
						
  3. 剑指offer笔记面试题11----旋转数组的最小数字
			
    题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如,数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5 ...
    
			
    4. 
						
  4. Kotlin Parameter specified as non-null is null
			
    报错信息如下: java.lang.IllegalArgumentException: Parameter specified as non-null is null: method kotlin.j ...
    
			
    5. 
						
  5. layUI学习第四日：layUI布局系列一
			
    1.栅格布局规则 1.1 layui-row定义行,如:<div class="layui-row"></div> 1.2 layui-col-md*这样的 ...
    
			
    6. 
						
  6. 【Oracle】SQL的各种连接join
			
    SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 JOIN 类型: INNER JOIN(简单的 JOIN).LEFT JOIN.RIGHT JOIN.F ...
    
			
    7. 
						
  7. OpenDaylight开发hello-world项目之功能实现
			
    OpenDaylight开发hello-world项目之开发环境搭建 OpenDaylight开发hello-world项目之开发工具安装 OpenDaylight开发hello-world项目之代码 ...
    
			
    8. 
						
  8. Python程序中的线程操作-concurrent模块
			
    目录 一.Python标准模块--concurrent.futures 二.介绍 三.基本方法 四.ProcessPoolExecutor 五.ThreadPoolExecutor 六.map的用法  ...
    
			
    9. 
						
  9. nodejs环境下的socket通信
			
    结构: socket是应用层和传输层的桥梁.(传输层之上的协议所涉及的数据都是在本机处理的,并没进入网络中) 涉及数据: socket所涉及的数据是报文,是明文. 作用: 建立长久链接,供网络上的两个 ...
    
			
    10. 
						
  10. Java Serializable：明明就一个空的接口嘛
			
    对于 Java 的序列化,我一直停留在最浅显的认知上——把那个要序列化的类实现 Serializbale 接口就可以了.我不愿意做更深入的研究,因为会用就行了嘛. 但随着时间的推移,见到 Serial ...
    
			
    11.