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. RocketMQ（一）：推拉消费模型客户端实践
			
    消息中间件是为解耦生产者和消费者的目的,三大服务点:解耦.异步.削峰. 现在的的互联网系统中,mq已经必备基础设施了,我们已明显感觉它的必要性与强大.然而,它的本质是啥?存储转发系统罢了! MQ有很多 ...
    
			
    2. 
						
  2. C# 使用WM_COPYDATA传输数据（两个窗体间通信）
			
    //发送方 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
    
			
    3. 
						
  3. ASP.NET Core 2.2 WebApi 系列【五】MiniProfiler与Swagger集成
			
    MiniProfiler 是一款性能分析的轻量级程序,可以基于action(request)记录每个阶段的耗时时长,还是可以显示访问数据库时的SQL(支持EF.EF Code First)等 一.安装 ...
    
			
    4. 
						
  4. SSH框架之Struts2第三篇
			
    1.3相关知识点 : 1.3.1 OGNL的表达式 : 1.3.1.1 什么是OGNL OGNL是Object-Graph Navigation Language的编写,它是一种功能强大的表达式语言, ...
    
			
    5. 
						
  5. JS基础语法---内置对象
			
    js学习中三种对象: 内置对象----js系统自带的对象 自定义对象---自己定义的构造函数创建的对象 浏览器对象---BOM的时候讲 内置对象: Math Date String Array Obj ...
    
			
    6. 
						
  6. Angular中使用bootstrap样式
			
    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...
    
			
    7. 
						
  7. 利用QQ获取ip
			
    首先启动任务管理器,选择性能选型,点击打开资源管理器  点击网络,找到qq.exe 点击下面的TCP链接  最好让你的qq好友发一个离线文件,在接收的时候注意远程连接,即使您所要的你好友的ip地址 
    
			
    8. 
						
  8. [b0044] numpy_快速上手
			
    1 概念理清 2 创建数组 2.1 f1= np.array( [ [1,2,3,4], [2,3,4,5], [3,4,5,6] ]) 其他代码 a= np.array([ [ [3.4,5,6,8 ...
    
			
    9. 
						
  9. Word List 1
			
    前言 图片均来源网络 文章目录 前言 1.1 Super computer 1.2 Mainframe 1.3 Server 1.4 Desktop PC 1.5 Notebook or Laptop ...
    
			
    10. 
						
  10. 转载一篇：Django静态文件
			
    静态文件: 项目中的CSS.图片.js都是静态文件.一般会将静态文件放到一 个单独的目录中,以方便管理.在html页面中调用时,也需要指 定静态文件的路径,Django中提供了一种解析的方式配置静态文 ...
    
			
    11.