zoukankan      html  css  js  c++  java
  • WebGIS中地图恢复初始位置及状态

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

    怎么办呢?最好的办法就是用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,否则这个缩放难以达到效果。

  • 相关阅读:
    函数式注释、文件头部注释
    slice()与splice()的区别
    纯前端跨域下载pdf链接文件解决方案
    SqlServer数据库设计一个字段的值是由其他字段运算结果所得
    关键字的几种用法
    DataContract和DataMember的作用
    windows10如何打开vhd文件
    c#中partial 作用
    c#中(&&,||)与(&,|)的区别和应用
    c#MD5加密
  • 原文地址:https://www.cnblogs.com/leftfist/p/6808655.html
Copyright © 2011-2022 走看看