一、说明

引用文件那块，可以参考我上一篇博文，arcgis api for javascript离线部署。

这篇博文中，地图占满整个body

二、运行效果

三、HTML代码

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Overview Map</title>

      <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>

<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/esri/css/esri.css" />

    <style>

      html, body { height:100%; width: 100%; margin: 0; padding: 0; }

    </style>  

    <script>

        var dojoConfig = {

            parseOnLoad: true

        };

    </script>  

     <script type="text/Javascript" src="http://localhost/arcgis_js3_api/library/3.3/jsapi/init.js"></script>

    <script>

        // 导入必要包

        dojo.require("dijit.layout.BorderContainer");

        dojo.require("dijit.layout.ContentPane");

        dojo.require("esri.map");

        dojo.require("esri.dijit.OverviewMap");

        var map;

        function init() {

            map = new esri.Map("map", { center: [-122.445, 37.752], zoom: 4 });

            MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer

            ("http://localhost/arcgis/rest/services/DZDT2012/MapServer");

            map.addLayer(MyTiledMapServiceLayer);

            dojo.connect(map, "onLoad", function (theMap) {

                // 添加概览地图

                var overviewMapDijit = new esri.dijit.OverviewMap({

                    map: map,   // 必要的

                    visible: true,  // 初始化可见,默认为false

                    attachTo: "bottom-right",   // 默认右上角

                    width: 150, // 默认值是地图高度的 1/4th

                    height: 150, // 默认值是地图高度的 1/4th

                    opacity: .40,    // 透明度 默认0.5

                    maximizeButton: true,   // 最大化,最小化按钮,默认false

                    expandFactor: 3,    //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2,这意味着概览地图将至少是两倍的大小的程度矩形。

                    color: "red"    // 默认颜色为#000000

                });

                overviewMapDijit.startup();   // 开启

            });

        }

        dojo.ready(init);

    </script>

  </head>  

  <body class="claro">

    <div data-dojo-type="dijit.layout.BorderContainer"

         data-dojo-props="design:'headline', gutters:false"

         style="width: 100%; height: 100%; margin:0;">

         <div id="map"

           data-dojo-type="dijit.layout.ContentPane"

           data-dojo-props="region:'center'"

           style="padding:0">

      </div>  

    </div>  

  </body>

</html>

注释：这篇文章中，地图我用的是我本机的("http://localhost/arcgis/rest/services/DZDT2012/MapServer");

如果你没有自己的地图可以使用下面的HTML代码

四、HTML（另外一种形式）

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Overview Map</title>

      <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>

<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/esri/css/esri.css" />

    <style>

      html, body { height:100%; width: 100%; margin: 0; padding: 0; }

    </style>  

    <script>

        var dojoConfig = {

            parseOnLoad: true

        };

    </script>  

     <script type="text/Javascript" src="http://localhost/arcgis_js3_api/library/3.3/jsapi/init.js"></script>

    <script>

        // 导入必要包

        dojo.require("dijit.layout.BorderContainer");

        dojo.require("dijit.layout.ContentPane");

        dojo.require("esri.map");

        dojo.require("esri.dijit.OverviewMap");

        var map;

        function init() {

           map = new esri.Map("map", {

                basemap: "topo", // 指定的地图底图.有效选项:"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".

                center: [-122.445, 37.752],   // 居中的经纬度

                zoom: 14  // 缩放深度级别

            });

            dojo.connect(map, "onLoad", function (theMap) {

                // 添加概览地图

                var overviewMapDijit = new esri.dijit.OverviewMap({

                    map: map,   // 必要的

                    visible: true,  // 初始化可见,默认为false

                    attachTo: "bottom-right",   // 默认右上角

                    width: 150, // 默认值是地图高度的 1/4th

                    height: 150, // 默认值是地图高度的 1/4th

                    opacity: .40,    // 透明度 默认0.5

                    maximizeButton: true,   // 最大化,最小化按钮,默认false

                    expandFactor: 3,    //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2,这意味着概览地图将至少是两倍的大小的程度矩形。

                    color: "red"    // 默认颜色为#000000

                });

                overviewMapDijit.startup();   // 开启

            });

        }

        dojo.ready(init);

    </script>

  </head>  

  <body class="claro">

    <div data-dojo-type="dijit.layout.BorderContainer"

         data-dojo-props="design:'headline', gutters:false"

         style="width: 100%; height: 100%; margin:0;">

         <div id="map"

           data-dojo-type="dijit.layout.ContentPane"

           data-dojo-props="region:'center'"

           style="padding:0">

      </div>  

    </div>  

  </body>

</html>

注意：直接拷贝代码的时候 要把引用文件的

arcgis_js3_api修改为
arcgis_js_api
例如：
 <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js3_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>修改为
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
因为我本机IIS文件夹名称是
arcgis_js3_api

ArcGIS Overview Map(鹰眼/概览图)的更多相关文章

  1. ArcGIS api for js OverviewMap(鹰眼/概览图)

    说明.本篇博客中主要介绍 地图显示在某个div情况 1.运行效果 2.HTML <!DOCTYPE html> <html> <head> <meta htt ...

  2. ArcGIS Engine开发鹰眼图的功能（基础篇）

    鹰眼是用于调节全视域范围内主地图显示范围情况的副地图.它体现了地图整体与详细局部的关系. 用户可以通过鼠标单击或者画框等动作实现鹰眼与主地图的交互情况. 鹰眼功能的原理是通过主地图窗口的地图控件和鹰眼 ...

  3. 【UML】NO.52.EBook.5.UML.1.012-【UML 大战需求分析】- 交互概览图（Interaction Overview Diagram）

    1.0.0 Summary Tittle:[UML]NO.52.EBook.1.UML.1.012-[UML 大战需求分析]- 交互概览图(Interaction Overview Diagram) ...

  4. ArcGIS Engine开发鹰眼图的功能（代码优化篇）

    在上一篇,ArcGIS Engine开发鹰眼图的功能(基础篇) 上一篇的实现效果图如下, 如果仔细观察,会发现一个问题,即在“鹰眼”的区域,只要在红色线框内的注记会被覆盖. 如果红色框包括整张图的话, ...

  5. Shadow Map阴影贴图技术之探 【转】

    这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...

  6. Arcgis for Javascript之featureLayer图和属性互操作性

    说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果 如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...

  7. Arcgis for Javascript之featureLayer图和属性的互操作

    说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果: 显示效果 如上图所示,本文章主要实现了以下几个功能:1.FeatureLayer属性表的分页 ...

  8. ArcGIS Server 缓存服务切图范围

    win10 + Server 10.4 +  ArcMap 10.4  ArcGIS Server 缓存服务分为创建服务后手动建立缓存和创建服务时同时自动建立缓存两种. 10.2帮助文档:http:/ ...

  9. ArcGIS教程：树状图

    摘要 构造可显示特征文件里连续合并类之间的属性距离的树示意图(树状图). 使用方法 · 输入特征文件必须採用预定的特征文件格式. 特征文件可使用 Iso 聚类或创建特征工具来创建.该文件必须至少包括两 ...

随机推荐

  1. 牛客网 牛客小白月赛1 I.あなたの蛙が帰っています-卡特兰数，组合数阶乘逆元快速幂

    I.あなたの蛙が帰っています   链接:https://www.nowcoder.com/acm/contest/85/I来源:牛客网     这个题有点意思,是卡特兰数,自行百度就可以.卡特兰数用处 ...

  2. Laravel 时间处理

    $info['date'] = $item->created_at->diffForHumans();//友好时间显示 $info['date'] = $item->created_ ...

  3. Linux下创建和删除用户

    在Linux下创建用户和删除用户,必须在root用户下,如果你当前不是用根用户登录,你可以打开终端,输入"su root"命令,再输入根口令,就可以进入root用户模式下,如下所示 ...

  4. ArcObject开发时，axtoolbarcontrol中一些添加的按钮是灰色的问题

    以Pan按钮为例,当axtoolbarcontrol设置好buddycontrol后,如果你有两个视图的话有些工具pagelayout视图下有用,有些在map视图下有用. 例如,在以下图的方式添加的p ...

  5. Android中的多线程断点续传

    Android多线程断点下载的代码流程解析: 运行效果图: 实现流程全解析: Step 1:创建一个用来记录线程下载信息的表 创建数据库表,于是乎我们创建一个数据库的管理器类,继承SQLiteOpen ...

  6. Android性能优化第（三）篇---MAT比Menmery Monitor更强大

    作者 LooperJing 2016.11.17 16:42* 字数 1687 阅读 1603评论 3喜欢 21 在Android性能优化第(一)篇---基本概念中讲了JAVA的四大引用,讲了一下GC ...

  7. (转)python request用法

    强烈推荐!requests官方文档已有了中文版,请见http://cn.python-requests.org/zh_CN/latest/ requests是python的一个HTTP客户端库,跟ur ...

  8. 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页

    前言:唯星宠物产品官网的登录注册,单独一个子页,页面使用BootStrap实现响应式,PHP提供服务端,利用Ajax技术,从Mysql中获取JSON数据,并对表单信息进行正则验证.项目github地址 ...

  9. Win7如何解决内存不能为Read的批处理命令

    将下面文件保存为"解决内存不能为Read的批处理命令.cmd"双击运行即可   for %%1 in (%WinDir%\system32\*.dll) do regsvr32.e ...

  10. hdu1394 Minimum Inversion Number(最小逆序数)

    Minimum Inversion Number Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/O ...