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

具体的代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>鹰眼和比例尺</title>

<!--

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

<script src="http://js.arcgis.com/3.7/"></script>-->

      <!--<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/dijit/themes/tundra/tundra.css"/>-->

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/esri/css/esri.css" />

    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.11/3.11/init.js"></script>

    <script src="dojo/jsapi_vsdoc12_v38.js"></script>

<style>

html, body, #map {

    height: 100%;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

}

#BasemapToggle {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 50;

}

#HomeButton {

    position: absolute;

    top: 95px;

    left: 20px;

    z-index: 50;

}

</style>

<script>

    //引入需要的类

    dojo.require("esri.map");

    dojo.require("esri.dijit.BasemapToggle");

    dojo.require("esri.dijit.HomeButton");

    dojo.require("esri.dijit.OverviewMap");

    dojo.require("esri.dijit.Scalebar");

    //定义全局变量

    var map;

    //准备初始化

    dojo.ready(init);

    //初始化方法

    function init() {

        //创建地图

        map = new esri.Map("map", {

            center: [121.48, 31.25],

            zoom: 8,

            basemap: "streets"

        });

        //卫星图切换

        var toggle = new esri.dijit.BasemapToggle({

            map: map,

            basemap: "satellite"

        }, "BasemapToggle");

        toggle.startup();

        //HOME按钮

        var home = new esri.dijit.HomeButton({

            map: map

        }, "HomeButton");

        home.startup();

        //比例尺

        var scalebar = new esri.dijit.Scalebar({

            map: map,

            attachTo: "bottom-right",

            width:10,

            // "dual" displays both miles and kilmometers

            // "english" is the default, which displays miles

            // use "metric" for kilometers

            scalebarUnit: "dual"

        });

        //鹰眼小地图

        var overviewMap = new esri.dijit.OverviewMap({

            map: map,

            visible: true,           // 初始化可见，默认为false

            attachTo: "bottom-left",   // 默认右上角

            width: 250,              // 默认值是地图高度的 1/4th

            height: 150,             // 默认值是地图高度的 1/4th

            opacity: 0.5,            // 透明度 默认0.5

            maximizeButton: true,    // 最大化,最小化按钮，默认false

            expandFactor: 2,         //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。

            color: "#000000"         // 默认颜色为#000000

        });

        overviewMap.startup();

    }

</script>

</head>

<body>

    <div id="map">

        <div id="BasemapToggle"></div>

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

    </div>

</body>

</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. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  2. Winform实现Shp-栅格图形文件的读取与显示（外加shp转WKB格式存入oracle）附源码

    前言:上学期GIS空间数据库课程设计时,老师让实现Shp-栅格图形文件的读取与显示,外加shp转WKB格式存入oracle,不使用第三方类库,花了一天时间在网上找了一些资料,实现了一个简单的栅格图形文 ...

  3. java设计模式(二)---工厂方法模式

    2普通工厂方法模式 就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建. 2.1创建接口 /** * 发送接口 * Created by mrf on 2016/2/25. */ public ...

  4. java中使用junit测试

    最初写代码只要功能走通就不管了,然后如果出了什么问题再去修改,这是因为没做测试的工作.测试其实很简单. 1.准备 当前使用idea编写代码,用maven构建工程,使用maven的test功能来进行批量 ...

  5. jQuery 事件

    什么是事件 页面对不同访问者的响应叫做事件. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypr ...

  6. 【模式匹配】更快的Boyer-Moore算法

    1. 引言 前一篇中介绍了字符串KMP算法,其利用失配时已匹配的字符信息,以确定下一次匹配时模式串的起始位置.本文所要介绍的Boyer-Moore算法是一种比KMP更快的字符串匹配算法,它到底是怎么快 ...

  7. Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  8. iOS开发的一些奇巧淫技

    TableView不显示没内容的Cell怎么办? 类似这种,我不想让下面那些空的显示. 很简单. self.tableView.tableFooterView = [[UIView alloc] in ...

  9. The conversion of a datetime2 data type to a datetime data type resulted in an out-of-range value. 错误的原因及解决方案

    异常描述: 数据访问用EF,在数据库中用getdate()设置的默认值,程序中没有赋值. 出现异常. 此错误在百度上在我写此文之前没有多少解决方案,谷歌之等到以下两个有用的页: http://stac ...

  10. iis 不能访问json文件

    我从网上查的资料,解决方案都是设置MIME 映射和“处理脚本映射”. 我按照网上的解决方案执行之后还没有解决我的这个问题,所以我想会不会是其他的原因. 在那么一瞬间,灵光一闪,我把json文件放到新建 ...