ArcGIS Server 开发之鹰眼地图的实现
鹰眼简单点说就是地图的联动，鹰眼的全称是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 开发之鹰眼地图的实现的更多相关文章
- 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献
转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...
- ArcGIS Server开发实践之【Search Widget工具查询本地地图服务】
加载本地地图服务,并实现要素的查询.(不足之处还请指点)具体代码如下: <!DOCTYPE html> <html dir="ltr"> <head& ...
- ArcGIS Engine开发之鹰眼视图
鹰眼是GIS软件的必备功能之一.它是一个MapControl控件,主要用来表示数据视图中的地理范围在全图中的位置. 鹰眼一般具有的功能: 1)鹰眼视图与数据视图的地理范围保持同步. 2)数据视图的当前 ...
- ArcGIS Server开发教程系列（2）配置ARCMAP和ARCCatalog发布服务
1. Arc catalog的配置 打开catalog,如图新增刚刚创建的server 1. Use GIS services: 用户身份连接 使用此种连接,可以浏览.使用站点内发布的所有 ...
- ArcGIS Server开发教程系列（3）切片
切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...
- ArcGIS Server开发教程系列（7）使用ArcGIS API for Javascript-Hello World
ArcGIS API for Javascript API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html 选择最新的下载就好了,目前是3 ...
- ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）
1. 鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...
- arcgis server账号需要设置地图缓存的访问权限
如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限. 本文用菊子曰发布
- ArcGIS Server开发教程系列（1） Arcgis server 10.1 的安装
本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...
随机推荐
- PHP的学习--Traits新特性
在阅读yii2源码的时候接触到了trait,就学习了一下,写下博客记录一下. 自 PHP 5.4.0 起,PHP 实现了代码复用的一个方法,称为 traits. Traits 是一种为类似 PHP 的 ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- js每天进步一点点
本人菜鸟一枚,进入公司不久,任务不多,期待从零开始学习js,请各位大牛指导!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Mac下如何配置环境变量
以前都是在Windows平台上开发,在配置一些框架的时候,为了能够在命令行中调用,一般都会配置bin目录到环境变量中,这是为了让命令行在执行的时候,能够查找到对应的执行文件. 现在工作使用Mac,配置 ...
- CentOS7 PostgreSQL安装
CentOS7 PostgreSQL安装 CentOS7 PostgreSQL安装 Install 安装 使用yum安装 yum install http://yum.postgresql.org/9 ...
- Java实现过滤中文乱码
最近在日志数据清洗时遇到中文乱码,如果只要有非中文字符就将该字符串过滤掉,这种方法虽简单但并不可取,因为比如像Xperia™主題.天天四川麻将Ⅱ这样的字符串也会被过滤掉. 1. Unicode编码 U ...
- Head插件——学习Elasticsearch的锋刃利器！
在学习Elasticsearch的过程中,必不可少需要通过一些工具查看es的运行状态以及数据.如果都是通过rest请求,未免太过麻烦,而且也不够人性化. 此时,head可以完美的帮助你快速学习和使用e ...
- 爬虫--Scrapy
Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设 ...
- WCF会话(Session)与实例(Instance)管理
一.理解Session 1.Session的作用:保留Client和Service之间交互的状态,确保Client与Service之间交互唯一性(SessionId),即:多个Client同时访问Se ...
- [AngularJS] AngularJS系列(4) 中级篇之指令
目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 ...