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

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

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>Home Extent</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">

  <style>

    html, body, #map {

      padding:0;

      margin:0;

      height:100%;

    }

    #HomeButton {

      position: absolute;

      top: 95px;

      left: 20px;

      z-index: 50;

    }

  </style>

  <script src="https://js.arcgis.com/3.19/"></script>

  <script>

    require([

      "esri/map",

      "esri/dijit/HomeButton",

      "dojo/domReady!"

    ], function(

      Map, HomeButton

    )  {

      var map = new Map("map", {

        center: [-56.049, 38.485],

        zoom: 3,

        basemap: "streets"

      });

      var home = new HomeButton({

        map: map

      }, "HomeButton");

      home.startup();

    });

  </script>

</head>

<body>

  <div id="map" class="map">

    <div id="HomeButton"></div>

  </div>

</body>

</html>

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

var mapcenter = new Point([120, 26], new SpatialReference({ wkid:4326 }));

  map = new Map("map", {

    basemap: "delorme",

    center: mapcenter,

    maxZoom: 10,

    minZoom: 1,

    zoom: 5,

    extent: bounds,

    logo: false,

    nav: false

  });

  var homeClick = function(){

      map.centerAndZoom(mapcenter,5);

  }

一定要设置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. ubuntu14.04 software-center can not open

    sudo apt-get update sudo apt-get dist-upgrade sudo apt-get install --reinstall software-center

  2. 机器学习实战之kNN算法

    机器学习实战这本书是基于python的,如果我们想要完成python开发,那么python的开发环境必不可少: (1)python3.52,64位,这是我用的python版本 (2)numpy 1.1 ...

  3. nginx的详解（三）

    6.禁止访问某个文件或目录1)禁止访问以txt或doc结尾的文件location ~* \.(txt|doc)${root /data/www/wwwroot/linuxtone/test;deny ...

  4. Terracotta服务器的不同配置方式

    Terracotta服务器的不同配置方式 博客分类: 企业应用面临的问题 Java&Socket 开源组件的应用 Terracotta双机多机镜像服务器阵列分片模式企业应用 Terracott ...

  5. 【数位DP】bnuoj 52813 J. Deciphering Oracles

    http://acm.bnu.edu.cn/v3/contest_show.php?cid=9208#problem/J [AC] #include<bits/stdc++.h> usin ...

  6. java面试题之简单介绍一下集合框架

    集合框架分为三块:List列表.Set集合.Map映射 List列表在数据结构上可以被看做线性表,常用的有ArrayList和LinkList(不常用的有Vector(类似于ArrayList)),他 ...

  7. POJ 3468 线段树 成段更新 懒惰标记

    A Simple Problem with Integers Time Limit:5000MS   Memory Limit:131072K Case Time Limit:2000MS Descr ...

  8. python--错误了就需要调试（异常处理）

    python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.你可以使用该功能来调试python程序. 我们可打开idle-->F1进行查看文档,里面很多异常类型,如图: ...

  9. P1536 村村通 洛谷

    https://www.luogu.org/problem/show?pid=1536 题目描述 某市调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.市政府“村村通工程”的 ...

  10. T3185 队列练习1 codevs

    http://codevs.cn/problem/3185/ 题目描述 Description 给定一个队列(初始为空),只有两种操作入队和出队,现给出这些操作请输出最终的队头元素. 操作解释:1表示 ...