关键词搜索

源码搜索 ×
×

WebGIS中地图恢复初始位置及状态

发布2017-02-09浏览2312次

详情内容

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

怎么办呢?最好的办法就是用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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

用别的按钮也不是不可以,麻烦一点:

这里写图片描述

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);  
  }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载