我想实现这么一个效果：地图任意缩放后，点击一个按钮，将立刻回到地图初始加载时的位置，并且是没有缩放的状态。

怎么办呢？最好的办法就是用Home按钮。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  6.   <title>Home Extent</title>
  7.   <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
  8.   <style>
  9.     html, body, #map {
  10.       padding:0;
  11.       margin:0;
  12.       height:100%;
  13.     }
  14.     #HomeButton {
  15.       position: absolute;
  16.       top: 95px;
  17.       left: 20px;
  18.       z-index: 50;
  19.     }
  20.   </style>
  21.   <script src="https://js.arcgis.com/3.19/"></script>
  22.   <script>
  24.     require([
  25.       "esri/map",
  26.       "esri/dijit/HomeButton",
  27.       "dojo/domReady!"
  28.     ], function(
  29.       Map, HomeButton
  30.     )  {
  32.       var map = new Map("map", {
  33.         center: [-56.049, 38.485],
  34.         zoom: 3,
  35.         basemap: "streets"
  36.       });
  38.       var home = new HomeButton({
  39.         map: map
  40.       }, "HomeButton");
  41.       home.startup();
  43.     });
  44.   </script>
  45. </head>
  46. <body>
  47.   <div id="map" class="map">
  48.     <div id="HomeButton"></div>
  49.   </div>
  50. </body>
  51. </html>

用别的按钮也不是不可以，麻烦一点：

  1. var mapcenter = new Point([120, 26], new SpatialReference({ wkid:4326 }));
  2.   map = new Map("map", {
  3.     basemap: "delorme",
  4.     center: mapcenter,
  5.     maxZoom: 10,
  6.     minZoom: 1,
  7.     zoom: 5,
  8.     extent: bounds,
  9.     logo: false,
  10.     nav: false
  11.   });
  12.   var homeClick = function(){
  13.       map.centerAndZoom(mapcenter,5);
  14.   }

一定要设置basemap，否则这个缩放难以达到效果。

WebGIS中地图恢复初始位置及状态的更多相关文章

  1. 从底层谈WebGIS 原理设计与实现(六)：WebGIS中地图瓦片在Canvas上的拼接显示原理

    从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理 作者:naaoveGI…    文章来源:naaoveGIS    点击数:1145    更新时间: ...

  2. （六）WebGIS中地图瓦片在Canvas上的拼接显示原理

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本 ...

  3. 【Android】11.2 通过重写对应的方法保存和恢复实例的状态

    分类:C#.Android.VS2015: 创建日期:2016-02-21 一.简介 通过重写(也叫回调)对应的方法来管理Activity的生命周期,比如用户旋转屏幕时应用程序要能自动保存和恢复实例的 ...

  4. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  5. WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图（转载）

    WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 1.前言 在前面我花了两个篇幅来讲解行列号的获取,也解释了为什么要获取行列号.在这一章,我将把常见的几种请求瓦片时的URL样式罗列出来,并 ...

  6. WebGIS中自定义互联网地图局部注记的一种方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    前言 实际项目中我们经常会遇到这样一种场景:地图底图可能是互 ...

  7. 从底层谈WebGIS 原理设计与实现(五)：WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图

    从底层谈WebGIS 原理设计与实现(五):WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图 作者:naaoveGI…    文章来源:naaoveGIS    点击数:2063    更 ...

  8. 从底层谈WebGIS 原理设计与实现(四)：WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图

    从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 作者:naaoveGI…    文章来源:naaoveGIS    点击数:1759    更 ...

  9. Pvmove中断后恢复LV状态

    Pvmove中断后恢复LV状态   pvmove执行时关闭中断窗口后,pvmove进程会被强制杀掉,从而导致lv的状态异常,无法重新进行pvmove和其他lvm镜像增加相关操作,可以通过如下方式修复: ...

随机推荐

  1. Leetcode 388.文件的最长绝对路径

    文件的最长绝对路径 假设我们以下述方式将我们的文件系统抽象成一个字符串: 字符串 "dir\n\tsubdir1\n\tsubdir2\n\t\tfile.ext" 表示: dir ...

  2. PAT天梯赛练习题——L3-005. 垃圾箱分布（暴力SPFA）

    L3-005. 垃圾箱分布 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家倒垃圾的时候,都希望垃圾箱距离自己比较近,但是谁 ...

  3. BZOJ 1016 [JSOI2008]最小生成树计数 ——Matrix-Tree定理

    考虑从小往大加边,然后把所有联通块的生成树个数计算出来. 然后把他们缩成一个点,继续添加下一组. 最后乘法原理即可. 写起来很恶心 #include <queue> #include &l ...

  4. 【单调队列+尺取】HDU 3530 Subsequence

    acm.hdu.edu.cn/showproblem.php?pid=3530 [题意] 给定一个长度为n的序列,问这个序列满足最大值和最小值的差在[m,k]的范围内的最长子区间是多长? [思路] 对 ...

  5. spring 容器bean

    bean配置信息----> 读取bean的配置信息到bean的注册表中---> 根据注册表的信息实例化bean---> 将bean的实例放到spring的容器中---> 应用程 ...

  6. SGU 分类

    http://acm.sgu.ru/problemset.php?contest=0&volume=1 101 Domino 欧拉路 102 Coprime 枚举/数学方法 103 Traff ...

  7. Influx kafka

    http://www.opscoder.info/kafka-influxdb.html

  8. Chrome 浏览器安装Vue插件方法 (十分详细)

    博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...

  9. 如何使用KeyChain保存和获取UDID - Flex/AS Programmer

    原文 http://www.cnblogs.com/yssgyw/p/3364370.html 本文是iOS7系列文章第一篇文章,主要介绍使用KeyChain保存和获取APP数据,解决iOS7上获取不 ...

  10. 【kotlin】kotlin中List中添加List怎么操作

    如题,List集合添加一个List集合怎么操作 如上,现在有了List<A>,A类中有个字段List<B>, 新创建一个List<B>,想把LIst<A> ...