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. 阿里面试实战题1----TreeSet,HashSet 区别
			
    TreeSet,HashSet 区别 TreeSet public class TreeSet<E> extends AbstractSet<E> implements Nav ...
    
			
    2. 
						
  2. javaWeb核心技术第五篇之jQuery
			
    - 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作.并且jQuery有非常丰富的插件, ...
    
			
    3. 
						
  3. 为什么局部内部类中访问同一方法中的变量，该变量一定要是final修饰的
			
     最近有一个疑惑:为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的         首先,我们看一个局部内部类的例子:             class OutClass {  ...
    
			
    4. 
						
  4. 关于mybtis 使用过程中发生There is no getter for property named 'id' in class 'java.lang.String' 错误
			
    今天在修改一个关于mybtis语句时,偶然发现的一个错误  There is no getter for property named 'id' in class 'java.lang.String' ...
    
			
    5. 
						
  5. SSH远程管理
			
    目录 SSH远程管理 ssh功能 SSH相关命令 Xshell连接不上虚拟机 scp命令 SSH验证方式 优化 免交互expect[扩展] 免交互sshpass[扩展] 简易跳板机 小结 SSH远程管 ...
    
			
    6. 
						
  6. Python比较配置文件
			
    工作中最常见的配置文件有四种:普通key=value的配置文件.Json格式的配置文件.HTML格式的配置文件以及YAML配置文件. 这其中以第一种居多,后三种在成熟的开源产品中较为常见,本文只针对第 ...
    
			
    7. 
						
  7. 201871010115-马北《面向对象程序设计（java）》第一周学习总结
			
    博文正文开头格式:(3分) 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daizh/> 这个作业的要求在哪里 <https://ww ...
    
			
    8. 
						
  8. acwing 55. 连续子数组的最大和
			
    地址  https://www.acwing.com/problem/content/50/ 输入一个 非空 整型数组,数组里的数可能为正,也可能为负. 数组中一个或连续的多个整数组成一个子数组. 求 ...
    
			
    9. 
						
  9. vue-cil3 运行报错
			
    warnings potentially fixable with the `--fix` option. 将一下部分:"lint": "vue-cli-service  ...
    
			
    10. 
						
  10. Go 字节 (byte) & 文字符号 (rune)
			
    byte 通过 byte 定义一个字节,字节必须使用单引号包起来,直接打印字节输出的是 ascii 码,需要通过格式化输出 byte 是 uint8 的别称,使用 byte 主要是为了区分字节和无符号 ...
    
			
    11.