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. JavaScript 语句解析
			
    在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”. 实例 var x, y, z; // 语句 1 x = 22; // 语句 2 y = 11; // 语句 3 z ...
    
			
    2. 
						
  2. nginx 七层负载均衡
			
    [tcp] nginx 七层负载均衡 nginx负载均衡概述 当我们的Web服务器直接面向用户,往往要承载大量并发请求,单台服务器难以负荷,我使用多台Web服务器组成集群,前端使用Nginx负载均衡, ...
    
			
    3. 
						
  3. TypeScript 学习笔记（四）
			
    函数: 1.函数是一组一起执行一个任务的语句 2.我们可以把一段可复用的代码放到一起组成函数,从而提高效率 3.函数声明(通过关键字 function 来声明)告诉编译器函数的名称.返回类型和参数 4 ...
    
			
    4. 
						
  4. CentOS7 忘记Root密码解决方法
			
    1- 在启动grub菜单,选择编辑选项启动 ​ 2 - 按键盘e键,来进入编辑界面 ​ 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh ​ 4 - 现在 ...
    
			
    5. 
						
  5. ARM-Linux中断系统【转】
			
    转自:https://www.cnblogs.com/arnoldlu/p/7406441.html 1.前言 了解Linux中断子系统,同时也需要了解ARM体系结构中断处理流程:在熟悉整个软硬件架构 ...
    
			
    6. 
						
  6. java8-9-Stream 的中间操作
			
        Stream 的中间操作   filter 过滤 排除元素 filter(T -> boolean) 保留 boolean 为 true 的元素
    
			
    7. 
						
  7. CSS3的nth-child() 选择器
			
    CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...
    
			
    8. 
						
  8. apache httpd反向代理的用法
			
    代理方式有三种:正向代理.透明代理和反向代理 正向代理 httpd通过ProxyRequests指令配置正向代理的功能.例如: ProxyRequests On ProxyVia On <Pro ...
    
			
    9. 
						
  9. 201871010113-刘兴瑞《面向对象程序设计（java）》第八周学习总结
			
    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>htt ...
    
			
    10. 
						
  10. Windows如何连接Linux(CentOS 7.x)的redis
			
    参考链接:https://www.cnblogs.com/wangyang0210/p/10244479.html
    
			
    11.