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 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 ...

随机推荐

redis 集群配置实战
文章转载自:http://hot66hot.iteye.com/blog/2050676 最近研究Redis-cluster,正好搭建了一个环境,遇到了很多坑,系统的总结下,等到redis3 rele ...
使用Java实现简单串口通信
最近一门课要求编写一个上位机串口通信工具,我基于Java编写了一个带有图形界面的简单串口通信工具,下面详述一下过程,供大家参考 ^_^ 一: 首先,你需要下载一个额外的支持Java串口通信操作的jar ...
SQL Server DAC——专用管理员连接
今天打开数据库刚要连接时,看到“连接到服务器”窗口,突发的想到:要是SQL Server 不再响应正常的连接请求,又想使用数据库时,我们该怎么办? 其实我们还能通过“SQL Server D ...
Python列表list的用法
#!usr/bin/env python# -*-coding:utf-8-*-#以下方法全在python2.7.x版本运行,请3.x以上的小伙伴们在print(放入括号内执行)#list列表的常用方 ...
IIS+域组策略+hosts：禁止访问指定网站
一.简介禁止访问网站可以通过多种方式实现,在网络设备上实现大概是性能最好的方式.本文在域服务器上实现该功能,优点是配置简单.可自定义跳转页面,缺点也很明显,遇到熟悉操作系统的用户,修改hosts文件 ...
Nginx manifest 实现 HTML5 Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
PYTHON解析XML的多种方式效率对比实测
在最初学习PYTHON的时候,只知道有DOM和SAX两种解析方法,但是其效率都不够理想,由于需要处理的文件数量太大,这两种方式耗时太高无法接受. 在网络搜索后发现,目前应用比较广泛,且效率相对较高的E ...
Shell（C++实现，CodeBlocks+GCC编译）
程序效果: 只实现了login .cd .ls .cat 四个命令.而且只能在 Windows 下运行. 代码: //main.cpp 1 #include <iostream> #inc ...
no-proxy 和proxy 的区别
Child <- many-to-one ->Parent class Child { private Parent paren ...
AR(增强现实) 知识篇
增强现实(Augmented Reality,简称AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动.这种技术估计由1990年 ...

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

ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）的更多相关文章

随机推荐

热门专题