鹰眼简单点说就是地图的联动，鹰眼的全称是OverviewMap，在ERSI提供的API包中，在dijit中进行类的调用。查了很多的资料，总结一下：

具体的代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>鹰眼和比例尺</title>
  6. <!--
  7. <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  8. <script src="http://js.arcgis.com/3.7/"></script>-->
  9.       <!--<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/dijit/themes/tundra/tundra.css"/>-->
  10.     <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/esri/css/esri.css" />
  11.     <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.11/3.11/init.js"></script>
  12.     <script src="dojo/jsapi_vsdoc12_v38.js"></script>
  13.  
  14. <style>
  15. html, body, #map {
  16.     height: 100%;
  17.     width: 100%;
  18.     margin: 0;
  19.     padding: 0;
  20.     overflow-x: hidden;
  21. }
  22. #BasemapToggle {
  23.     position: absolute;
  24.     top: 20px;
  25.     right: 20px;
  26.     z-index: 50;
  27. }
  28. #HomeButton {
  29.     position: absolute;
  30.     top: 95px;
  31.     left: 20px;
  32.     z-index: 50;
  33. }
  34. </style>
  35.  
  36. <script>
  37.     //引入需要的类
  38.     dojo.require("esri.map");
  39.     dojo.require("esri.dijit.BasemapToggle");
  40.     dojo.require("esri.dijit.HomeButton");
  41.     dojo.require("esri.dijit.OverviewMap");
  42.     dojo.require("esri.dijit.Scalebar");
  43.  
  44.     //定义全局变量
  45.     var map;
  46.  
  47.     //准备初始化
  48.     dojo.ready(init);
  49.  
  50.     //初始化方法
  51.     function init() {
  52.         //创建地图
  53.         map = new esri.Map("map", {
  54.             center: [121.48, 31.25],
  55.             zoom: 8,
  56.             basemap: "streets"
  57.         });
  58.  
  59.         //卫星图切换
  60.         var toggle = new esri.dijit.BasemapToggle({
  61.             map: map,
  62.  
  63.             basemap: "satellite"
  64.         }, "BasemapToggle");
  65.         toggle.startup();
  66.  
  67.         //HOME按钮
  68.         var home = new esri.dijit.HomeButton({
  69.             map: map
  70.         }, "HomeButton");
  71.         home.startup();
  72.         //比例尺
  73.         var scalebar = new esri.dijit.Scalebar({
  74.             map: map,
  75.             attachTo: "bottom-right",
  76.             width:10,
  77.             // "dual" displays both miles and kilmometers
  78.             // "english" is the default, which displays miles
  79.             // use "metric" for kilometers
  80.             scalebarUnit: "dual"
  81.         });
  82.  
  83.         //鹰眼小地图
  84.         var overviewMap = new esri.dijit.OverviewMap({
  85.             map: map,
  86.             visible: true,           // 初始化可见，默认为false
  87.             attachTo: "bottom-left",   // 默认右上角
  88.             width: 250,              // 默认值是地图高度的 1/4th
  89.             height: 150,             // 默认值是地图高度的 1/4th
  90.             opacity: 0.5,            // 透明度 默认0.5
  91.             maximizeButton: true,    // 最大化,最小化按钮，默认false
  92.             expandFactor: 2,         //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。
  93.             color: "#000000"         // 默认颜色为#000000
  94.         });
  95.         overviewMap.startup();
  96.     }
  97.  
  98. </script>
  99. </head>
  100. <body>
  101.     <div id="map">
  102.         <div id="BasemapToggle"></div>
  103.         <div id="HomeButton"></div>
  104.     </div>
  105. </body>
  106. </html>

运行截图：

　　

ArcGIS Server 开发之鹰眼地图的实现的更多相关文章

  1. 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献

    转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...

  2. ArcGIS Server开发实践之【Search Widget工具查询本地地图服务】

    加载本地地图服务,并实现要素的查询.(不足之处还请指点)具体代码如下: <!DOCTYPE html> <html dir="ltr"> <head& ...

  3. ArcGIS Engine开发之鹰眼视图

    鹰眼是GIS软件的必备功能之一.它是一个MapControl控件,主要用来表示数据视图中的地理范围在全图中的位置. 鹰眼一般具有的功能: 1)鹰眼视图与数据视图的地理范围保持同步. 2)数据视图的当前 ...

  4. ArcGIS Server开发教程系列（2）配置ARCMAP和ARCCatalog发布服务

    1.       Arc catalog的配置 打开catalog,如图新增刚刚创建的server 1. Use GIS services: 用户身份连接 使用此种连接,可以浏览.使用站点内发布的所有 ...

  5. ArcGIS Server开发教程系列（3）切片

    切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...

  6. ArcGIS Server开发教程系列（7）使用ArcGIS API for Javascript-Hello World

    ArcGIS API for Javascript  API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html 选择最新的下载就好了,目前是3 ...

  7. ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）

    1.     鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...

  8. arcgis server账号需要设置地图缓存的访问权限

    如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限.  本文用菊子曰发布

  9. ArcGIS Server开发教程系列（1） Arcgis server 10.1 的安装

    本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...

随机推荐

  1. 【WP开发】正确理解页面缓存

    注:本文内容面向Runtime App. 在新建项目后,细心观察,你会发现在App类中有以下代码: // TODO: 将此值更改为适合您的应用程序的缓存大小 rootFrame.CacheSize = ...

  2. 深入理解CSS溢出overflow

    × 目录 [1]定义 [2]属性 [3]失效[4]应用 前面的话 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: ...

  3. 让div垂直以及水平居中浏览器窗口

    首们需要position:absolute;绝对定位,或者position:fixed.而层的定位点,使用外补丁margin负值的方法.负值的大小为层自身宽度高度除以二. 如:一个层宽度是400,高度 ...

  4. Cocos2d-x 3.2 学习笔记（十）Joystick 搖杆控件

    最近想做格鬥遊戲,那麼就要有搖杆控件,不想去看別人的代碼就自己寫了個搖杆控件,實現起來很簡單. 話不多說,看代碼: #ifndef __Joystick__ #define __Joystick__ ...

  5. Unity3D UNet网络组件详解

    UNet常见概念简介 Spawn:简单来说,把服务器上的GameObject,根据上面的NetworkIdentity组件找到对应监视连接,在监视连接里生成相应的GameObject. Command ...

  6. Socket桥（转载）

    最好方案:使用haproxy 或者nginx转发.自己写程序性能和监控难保证,推荐使用开源软件替代. 源地址为:http://baishaobin2003.blog.163.com/blog/stat ...

  7. Windows Azure HandBook (7) 基于Azure Web App的企业官网改造

    <Windows Azure Platform 系列文章目录> 1.用户场景: C公司是全球大型跨国连锁餐厅,在世界上大约拥有3万间分店.其IT系统主要部署其海外数据中心,或者租用其他ID ...

  8. 帮助你提高排版技巧的18个 PS 文字特效教程

    Photoshop 文字特效教程对于学习基础的和高级的排版思维有很大的帮助.在这篇文章中,你会发现一组最新发布的文字效果教程.这些高品质的 Photoshop 教程可以帮助你设计出惊人的2D,3D,木 ...

  9. 《ASP.NET SignalR系列》第二课 SignalR的使用说明

    从现在开始相关文章请到: http://lko2o.com/moon 接续上一篇:<ASP.NET SignalR系列>第一课 认识SignalR (还没有看的话,建议您先看看) 一.指定 ...

  10. ASP.NET发送电子邮件

    代码: using System; using System.Collections.Generic; using System.Configuration; using System.Linq; u ...