一、说明

引用文件那块，可以参考我上一篇博文，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. Pacman常用命令

    Pacman是Arch Linux 的包管理器.它将一个简单的二进制包格式和易用的构建系统结合了起来.不管软件包是来自官方的 Arch 库还是用户自己创建,Pacman 都能方便得管理. 更新系统 在 ...

  2. Linux shell 环境变量及有效范围

    每当我们使用ssh客户端远程登陆一个服务时,操作系统就会给我们分配一个新的shell,并且这个shell继承了操作系统的永久环境变量.在当前的shell执行一个sh文件,都会临时产生一个子shell, ...

  3. 使用Git Gui从Bonobo服务器中克隆Repository（仓库）

    刚开始在使用Git Gui从Bonobo服务器中克隆Repository(仓库)中遇到一些问题,如下图所示: 后来百度,有人遇到类似的问题,得到解决思路,请大家参考这里.大意说出现这个问题是因为要克隆 ...

  4. QQ聊天窗口上的广告与QQ弹窗广告的完美屏蔽去除

    涉及的软件 1. QQ  (笔者的为v8.2版本) 2. Win7 3. ADSafe(3.13.308.9900正式版) 前言 QQ广告十分讨人厌,除了QQ弹窗的广告,让人十分反感外,最近发现QQ聊 ...

  5. 【spring boot】8.spring boot的日志框架logback使用

    在继续上一篇的Debug调试之后,把spring boot的日志框架使用情况逐步蚕食. 参考:http://tengj.top/2017/04/05/springbo 开篇之前,贴上完整applica ...

  6. Android 蓝牙技术 实现终端间数据传输

    蓝牙技术在智能硬件方面有很多用武之地,今天我就为大家分享一下蓝牙技术在Android系统下的使用方法技巧.蓝牙是一种短距离的无线通信技术标准,蓝牙协议分为4层,即核心协议层.电缆替代协议层.电话控制协 ...

  7. 【前端阅读】——《编程之魂》摘记&读后感&思维导图

    前言:这本书全名叫<编程之魂——与27为编程语言创始人对话>,它的内容以采访对话为主,以图通过和顶级大师的真实交流来调查:大师们为什么要创建某种编程语言,它的技术如何开发.如何教授和学习, ...

  8. PHP 变量定义及使用

    php的变量前面必须有$符号,而且是解释型的弱类型语言,定义的时候不需要定义变量值的类型. $str="这是个变量"; 1.输出的时候可以用拼接字符串的方法 如:echo" ...

  9. 【AngularJS】【02】AngularJS应用骨架

    ※文件引自OneDrive,有些人可能看不到

  10. Iowait的成因、对系统影响及对策

    什么是iowait?顾名思义,就是系统因为io导致的进程wait.再深一点讲就是:这时候系统在做io,导致没有进程在干活,cpu在执行idle进程空转,所以说iowait的产生要满足两个条件,一是进程 ...