完整代码如下：

<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-控件（小部件）（续）纯代码的更多相关文章

  1. ArcGIS Server开发教程系列（1） Arcgis server 10.1 的安装

    本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...

  2. ArcGIS Server开发教程系列（7）使用ArcGIS API for Javascript-Hello World

    ArcGIS API for Javascript  API下载地址:http://support.esrichina-bj.cn/2011/0223/960.html 选择最新的下载就好了,目前是3 ...

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

    1.     鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...

  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 engine 开发教程系列

    版权声明:        <ArcGIS Engine+C#实例开发教程>为3SDN(http://www.3sdn.net)原创教程,版权所有.禁止商业用途转载(如需请联系作者),非商业 ...

  7. 【ArcGIS Server 开发系列】Flyingis六大系列讲座精品PDF奉献

    转自:http://www.cnblogs.com/gispeng/archive/2008/07/24/1250116.html [ArcGIS Server 开发系列]Flyingis六大系列讲座 ...

  8. ArcPy开发教程1-面向ArcGIS的Python语言基础

    ArcPy开发教程1-面向ArcGIS的Python语言基础 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 第一节课 时间2019年2月26日 上午第一节 讲解:A ...

  9. ArcGIS Server学习之问题：ArcGIS Server10.5发布地图显示空白

    一.安装ArcGIS10.5 参考ArcGIS 10.5 for Desktop 完整安装教程(含win7/8/10 32/64位+下载地址+亲测可用) | 麻辣GIS 二.安装ArcGIS Serv ...

随机推荐

  1. Mybatis学习--spring和Mybatis整合

    简介 在前面写测试代码的时候,不管是基于原始dao还是Mapper接口开发都有许多的重复代码,将spring和mybatis整合可以减少这个重复代码,通过spring的模板方法模式,将这些重复的代码进 ...

  2. Percona 开始尝试基于Ceph做上层感知的分布式 MySQL 集群，使用 Ceph 提供的快照，备份和 HA 功能来解决分布式数据库的底层存储问题

    本文由 Ceph 中国社区 -QiYu 翻译 英文出处:Using Ceph with MySQL 欢迎加入CCTG Over the last year, the Ceph world drew m ...

  3. Android Studio 优秀插件汇总

    第一部分 插件的介绍 Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的 ...

  4. jsp内置对象作业1-用户登录

    题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...

  5. 区间DP lightoj 1031

    在此游戏中任意时刻的状态都是原始序列的一段子序列故: 定义d(i, j) : 表示原来序列的第i ~ j个元素组成的子序列,在双方都采取最优策略的情况下,先手得分的最大值. 状态转移时,需要枚举从左边 ...

  6. APP图标和启动页

    iOS App图标和启动画面尺寸 字数349 阅读22025 评论3 喜欢51 注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for i ...

  7. Hive 的 map join

    学习自 http://blog.csdn.net/xqy1522/article/details/6699740 1. Map Join 的使用场景: 关联操作中有一张表非常小 不等值的链接操作 2. ...

  8. poj3335 半平面交

    题意:给出一多边形.判断多边形是否存在一点,使得多边形边界上的所有点都能看见该点. sol:在纸上随手画画就可以找出规律:按逆时针顺序连接所有点.然后找出这些line的半平面交. 题中给出的点已经按顺 ...

  9. Non Lasting Storage File System、procfs、sysfs

    catalog . 引言 . proc文件系统 . 简单的文件系统 . sysfs 0. 引言 传统上,文件系统用于在块设备上持久存储数据,但也可以使用文件系统来组织.提供.交换并不存储在块设备上的信 ...

  10. 关于 SSV-ID: 4474 POC的分析和思考

    SSV-ID: 4474 SSV-AppDir: Discuz!漏洞 发布时间: 2008-11-21 (GMT+0800) URL:http://sebug.net/vuldb/ssvid-4474 ...