鹰眼简单点说就是地图的联动,鹰眼的全称是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. rabbitMQ第一篇:rabbitMQ的安装和配置

    在Windows下进行rabbitMQ的安装 第一步:软件安装 如果安装rabbitMQ首先安装基于erlang语言支持的OTP软件,然后在下载rabbitMQ软件进行安装(安装过程都是下一步,在此不 ...

  2. 你用过这种奇葩的C#注释吗?如何看待

    本人虽然不是专业开发人员,也非专业出身,但一直使用C#堆码,解决自己日常的小问题.包括自己的研究,也是用C#来实现和测试.对C#是情有独钟.虽然C#的很多高级技术不会用,也不太懂,但总归是知道,耳闻目 ...

  3. 队列的存储结构和常见操作(c 语言实现)

    一.队列(queue) 队列和栈一样,在实际程序的算法设计和计算机一些其他分支里,都有很多重要的应用,比如计算机操作系统对进程 or 作业的优先级调度算法,对离散事件的模拟算法,还有计算机主机和外部设 ...

  4. Java面试题技术类一

    1.面向对象编程的三大特性是什么? (1).继承: 继承是一种联结类的层次模型,并且允许和鼓励类的重用,它提供了一种明确表述共性的方法.对象的一个新类可以从现有的类中派生,这个过程称为类继承.新类继 ...

  5. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  6. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  7. Windows Azure Active Directory (3) China Azure AD增加新用户

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的China Azure. 本文是对笔者之前的文档:Windows Azure Active ...

  8. java设计模式(四)--单例模式

    Singleton最熟悉不过了,下面学习单例模式.转载:http://zz563143188.iteye.com/blog/1847029 单例对象(Singleton)是一种常用的设计模式.在Jav ...

  9. max server memory

    MS SQL Server 2008 R2,主要是用作ERP的数据库,但它的内存使用率非常高: 经查资料,原来数据库有默认的情况之下,使用内存时它是尽可能使用完有效内存.如果你不想这样,你可以手动分配 ...

  10. QTableWidget详解(样式、右键菜单、表头塌陷、多选等) 2013-10-23 10:54:04

    一.设置表单样式 点击(此处)折叠或打开 table_widget->setColumnCount(4); //设置列数 table_widget->horizontalHeader()- ...