ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）
1. 鹰眼
OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围。当主地图范围变化时，鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致，当鹰眼图空间的地图范围变化时，主地图的显示范围也会变化，主地图范围在OverviewMap控件中以矩形表示。
|
构造方法：esri.dijit.OverviewMap (params, srcNodeRef) 构造方法在创建一个鹰眼图的时候需要传入关联的地图对象和一个用于呈现鹰眼图控件的HTML元素，该元素可选，如果没有设置该HTML元素，将呈现在地图对象上，另外还包括很多可选参数，以下几个为常用的可选参数： |
|
|
attachTo |
指定鹰眼图附加到地图的那个角落。参数值是"top-right","bottom-right","bottom-left" 和"top-left". |
|
baseLayer |
指定鹰眼图空间地图的底图 |
|
expandFactor |
设置鹰眼地图控件和矩形之间的比例，默认值是2 |
|
opacity |
指定鹰眼图控件上矩形的透明度 |
|
hide |
隐藏鹰眼图控件 |
|
Show |
显示鹰眼图控件 |
|
startup |
当构造函数创建成功后，使用该方法后就可以进行用户交互了（几乎所有的控件（Map除外）都有该方法 |
|
destroy |
当应用程序不再需要比例尺控件的时候，摧毁该对象。（几乎所有的控件都有该方法） |
n 关于startup方法
在Dijit一系列生命周期中，一个重要方法是启动方法startup. 这个方法会在DOM节点被创建并添加到网页之后执行，同时在这个方法也会等待当前小部件中所包含的子控件被创建并正确启动之后才执行。
示例：
var overviewMapDijit = new esri.dijit.OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
需要提前引用
dojo.require("esri.dijit.OverviewMap");
2. 比例尺
Scalebar用于在地图上或者一个指定的HTML节点中显示地图的比例尺信息。
构造方法：esri.dijit. Scalebar(p (params, srcNodeRef)
构造方法在创建一个比例尺控件的时候需要传入关联的地图对象和一个用于呈现比例尺控件的HTML元素，该元素可选，如果没有设置该HTML元素，将呈现在地图对象上。另外还包括很多可选参数，以下几个为常用的可选参数：
|
attachTo |
比例尺控件在其关联地图上位置。参数值是"top-right","bottom-right","bottom-left" 和"top-left". |
|
scalebarUnit |
比例尺控件的单位 |
|
属性 |
说明 |
|
hide |
隐藏比例尺控件 |
|
Show |
显示比例尺控件 |
示例
var scalebar = new esri.dijit.Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
需要提前引用
dojo.require("esri.dijit.Scalebar");
3. 书签
书签控件用于管理用户创建的地图书签（Bookmark.MapBookmark），提供新建书签、定位到书签和删除书签的功能。
|
构造方法：esri.dijit. Bookmarks (params, srcNodeRef) 构造方法在创建一个书签控件的时候需要传入关联的地图对象和一个用于呈现书签控件的HTML元素。另外还包括很多可选参数，以下几个为常用的可选参数： |
|
|
bookmarks |
在创建的时候用已有的书签对象初始化书签控件 |
|
editable |
书签控件是否可以编辑 |
|
方法 |
说明 |
|
addBookmark |
给书签控件添加一个书签 |
|
hide |
隐藏书签控件 |
|
removeBookmark |
从书签控件中移除一个书签 |
|
show |
显示书签控件 |
|
toJson |
将书签对象返回一组json |
|
属性 |
说明 |
|
bookmarks |
返回书签控件的所有书签 |
|
事件 |
说明 |
|
onClick |
挡在一个书签上编辑的时候发生 |
|
onEdit |
当编辑书签的时候发生 |
|
onRemove |
当移除一个书签的时候发生 |
示例
// specify "editable" as true to enable editing
var bookmark = new esri.dijit.Bookmarks({
map: map,
bookmarks: [],
editable: true
}, dojo.byId('bookmark'));
需要提前引用
dojo.require("esri.dijit.Bookmarks");
当然，还需要一个div，例子参考最后的，放在界面的左边，未来可以放更多东西。
4. 图例
Legend 控件用于动态显示全部或者部分图层的标签和符号信息，图例控件支持下面四种图层:
ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer 和KMLLayer
|
构造方法：esri.dijit. Legend (params, srcNodeRef) 构造方法在创建一个图例的时候需要传入关联的地图对象和一个用于呈现图例控件的HTML元素。另外还包括很多可选参数，以下几个为常用的可选参数： |
|
|
autoUpdate |
当地图的比例尺发生变化或者图层发生变化的时候，图例控件是否自动更新 |
|
respectCurrentMapScale |
图例控件是否自动更新 |
|
layerInfos |
指定一个图层子集用于在图例中显示 |
|
arrangement |
指定图例在HTML元素中的对其方式 |
|
方法 |
说明 |
|
refresh |
当在构造函数中用了layerInfos，用这个方法刷新图例以替换构造函数中的图层 |
示例
var legendLayers = [];
legendLayers.push({ layer: layer, title: 'test' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
需要提前引用
dojo.require("esri.dijit.Legend");
当然，还需要一个div，例子参考最后的，放在界面的右边。
完整代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>地图-Test </title>
<link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"
rel="stylesheet" type="text/css" />
<link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"> var dojoConfig = { parseOnLoad: true };</script>
<script src="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>
<style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;} </style>
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
#header {
padding-top: 4px;
padding-right: 15px;
background-color:#444;
color:#fff;
font-size:16pt; text-align:right;font-weight:bold;
height:55px;
}
#subheader {
font-size:small;
color: #cfcfcf;
text-align:right;
}
#leftPane{
margin: 0;
padding: 5px;
width: 250px;
color: #3C1700;
background-color: #fff;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds-l div { height: 100%; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
</style>
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Bookmarks");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.Legend");
var map;
var editorWidget;
dojo.addOnLoad(function () {
map = new esri.Map("map");
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer");
map.addLayer(layer);
// Create the bookmark widget
// specify "editable" as true to enable editing
var bookmark = new esri.dijit.Bookmarks({
map: map,
bookmarks: [],
editable: true
}, dojo.byId('bookmark'));
var scalebar = new esri.dijit.Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
var overviewMapDijit = new esri.dijit.OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
var legendLayers = [];
legendLayers.push({ layer: layer, title: 'test' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
</script>
</head>
<body class="claro">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 1200px; height: 800px; margin: 0;">
<div id="leftPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'left'">
<div id="bookmark"></div>
</div>
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'图例', selected:true">
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="ds"> <!-- drop shadow divs -->
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-l">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div> <!-- end drop shadow divs -->
</div>
</div>
</body>
</html>
ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）的更多相关文章
- ArcGIS Server开发教程系列（1） Arcgis server 10.1 的安装
本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...
- 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开发教程系列（2）配置ARCMAP和ARCCatalog发布服务
1. Arc catalog的配置 打开catalog,如图新增刚刚创建的server 1. Use GIS services: 用户身份连接 使用此种连接,可以浏览.使用站点内发布的所有 ...
- ArcGIS Server开发教程系列（3）切片
切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...
- ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）（续）纯代码
完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- arcgis engine 开发教程系列
版权声明: <ArcGIS Engine+C#实例开发教程>为3SDN(http://www.3sdn.net)原创教程,版权所有.禁止商业用途转载(如需请联系作者),非商业 ...
- 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献
转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...
- ArcPy开发教程1-面向ArcGIS的Python语言基础
ArcPy开发教程1-面向ArcGIS的Python语言基础 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 第一节课 时间2019年2月26日 上午第一节 讲解:A ...
- ArcGIS Server学习之问题：ArcGIS Server10.5发布地图显示空白
一.安装ArcGIS10.5 参考ArcGIS 10.5 for Desktop 完整安装教程(含win7/8/10 32/64位+下载地址+亲测可用) | 麻辣GIS 二.安装ArcGIS Serv ...
随机推荐
- C++常见问题: 字符串分割函数 split
C++标准库里面没有字符分割函数split ,这可太不方便了,我已经遇到>3次如何对字符串快速分割这个问题了.列几个常用方法以备不时之需. 方法一: 利用STL自己实现split 函数(常用,简 ...
- 今天发现一些很有意思的ubuntu命令
跑火车的sl/LS 终端数字雨cmatrix 可能是名言警句也可能是逗你玩的笑话的fortune/fortune-zh 一只会说话的牛 一只会吟诗的牛 上真牛喽! 炫酷 炫酷到这里了!!!
- Linux下通配符总结
* - 通配符,代表任意字符(0到多个)? - 通配符,代表一个字符# - 注释/ - 跳转符号,将特殊字符或通配符还原成一般符号| - 分隔两个管线命令的界定; - 连续性命令的界定~ - 用户的根 ...
- SSL handshake alert: unrecognized_name error since upgrade to Java 1.7
今天将jdk从1.6升级到1.7,但是HttpUrlConnection连接https出现问题了. javax.net.ssl.SSLProtocolException: handshake aler ...
- Python实用环境pyenv搭建教程
实验系统:kubuntu-15.10-desktop-amd64 关于pyenv的介绍:一般在操作系统中我们会安装多个Python版本,在*nix系统中一般默认就自带了Python2与Python3两 ...
- Windows server用好windows server backup,发挥个人电脑该有的系统还原功能
笔记本上安装windows server的各位是不是有个感触,默认软件升级.软件更新,系统是没有系统还原的(磁盘清理发现也没有还原点可清理),也就是系统出了问题,还原不了干着急. 其实,windows ...
- linux 系统工具集
Htop Htop是一款非常先进的交互式实时Linux进程监测工具.它非常类似Linux top命令,但是有一些丰富的功能特性,比如易于使用的界面,可用于管理进程.快捷键.进程的垂直和水平视图以及其他 ...
- .NET 缩略图服务器 ResizingServer
之前写过一篇文章 .NET 响应式自动缩略图服务器 之后对此Image Server又进行了基于ImageResizer的改写 基于.NET 图片服务器 支持缩略图格式 基于 ImageResizer ...
- centos 6.6 使用tomcat6部署solr5.3.1
Solr现在是一个独立的服务器. 从Solr5.0开始,Solr不再发布为在任何Servlet容器中部署的“war”Web应用程序包(Web Application Archive).网上关于solr ...
- microstrip patch antenna
微带天线有很多优点,低成本,易于集成,加工简单,缺点有:效率低.功率容易低.高Q值 ,可能存在表面波,极化效果差,弱电扫性能.带宽窄.微带线的金属厚度t远远小于波长(t << λ0 ,自由 ...