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. 阿里面试实战题2----ReentrantLock里面lock和tryLock的区别
			
    ReentrantLock ReentrantLock(轻量级锁)也可以叫对象锁,可重入锁,互斥锁.synchronized重量级锁,JDK前期的版本lock比synchronized更快,在JDK1 ...
    
			
    2. 
						
  2. ASP.NET Core 2.2 WebApi 系列【二】使用EF CodeFirst创建数据库
			
    Code First模式 Code First是指"代码优先"或"代码先行". Code First模式将会基于编写的类和配置,自动创建模型和数据库. 一.准备 ...
    
			
    3. 
						
  3. JMeter资源监控插件PerfMon的使用
			
    1.插件下载 首先下载jmeter的插件管理工具,下载地址:jmeter-plugins.org 如英文说明,把下载后的jar包放到jmeter的安装目录lib/ext文件夹下,重启jmeter,就会 ...
    
			
    4. 
						
  4. 前端Vue准备工作
			
    环境准备: 1.安装Node&npm,只是为了要Node.js的环境https://nodejs.org/en/download/ 2.安装完成Node以及npm之后,就可以用npm conf ...
    
			
    5. 
						
  5. JS While
			
    JS While 只要指定条件为 true,循环就可以一直执行代码. while 循环 While 循环会在指定条件为真时循环执行代码块. 语法 while (条件) { 需要执行的代码 } whil ...
    
			
    6. 
						
  6. Spring Boot 2 构建可部署的war包
			
    默认情况下Spring Boot使用了内嵌的Tomcat服务器,项目最终被打成jar包运行,每个jar包可以被看作一个独立的Web服务器.传统的Web开发,一般会将Web应用打成一个war包,然后将其 ...
    
			
    7. 
						
  7. oracle12.2RAC之OGG安装配置（一）
			
    前面配置了ACFS用于ogg目录. 上传软件并解压安装: unzip 123014_fbo_ggs_Linux_x64_shiphome.zip cd fbo_ggs_Linux_x64_shipho ...
    
			
    8. 
						
  8. cookie，webstorage的理解
			
    在前两天的开发时,遇到一个问题,需要将一个网页在预加载时,优先出一个弹出框,但是再次加载时不希望它出现,在经过一段时间的搜索和尝试之后,发现了大多使用的两种方式:生成cookie和webStorage ...
    
			
    9. 
						
  9. python2 和 python3共存的常见使用（如安装虚拟环境的问题）
			
    1.安装好python2和python3,配置好全部环境变量 环境变量修改后,需要重新启动命令行才有效 2.如何启动不同版本的python 启动的时候会执行python.exe,python2和pyt ...
    
			
    10. 
						
  10. mssql 系统函数 字符串函数 space 功能简介
			
    转自: http://www.maomao365.com/?p=4672  一.space 函数功能简介 space功能:返回指定数量的空格参数简介: 参数1: 指定数量,参数需为int类型 注意事项 ...
    
			
    11.