<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>地图窗口操作</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

    <style type="text/css">

        html, body, #main {

            padding: 0;

            margin: 0;

            width: 100%;

            height: 100%;

        }

    </style>

    <script src="http://js.arcgis.com/3.9/"></script>

    <script type="text/javascript">

        var map, navToolbar;

        var navOption; // 当前选择的操作

        require(["dojo/parser", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/navigation",

            "dojo/query", 'dojo/_base/fx', "dojo/fx/easing", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"],

            function (parser, Map, ArcGISTiledMapServiceLayer, Navigation, query, fx, easing) {

                parser.parse();

                map = new Map("mapDiv", {

                    logo: false,

                    sliderStyle: "large"

                });

                var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";

                var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);

                map.addLayer(agoLayer);

                map.on('load', setupNavBar);

                function setupNavBar() {

                    navToolbar = new Navigation(map);

                    query(".navItem img").onmouseover(function (evt) {

                        fx.anim(evt.target.parentNode, {

                            backgroundColor: '#CCCCCC'

                        }, 200, easing.bounceOut);

                    }).onmouseout(function (evt) {

                        if (evt.target.parentNode.id != navOption) {

                            fx.anim(evt.target.parentNode, {

                                backgroundColor: '#FFFFFF'

                            });

                        }

                        else {

                            fx.anim(evt.target.parentNode, {

                                backgroundColor: '#DADADA'

                            });

                        }

                    }).onclick(function (evt) {

                        fx.anim(evt.target.parentNode, {

                            backgroundColor: '#999999'

                        }, 200, easing.linear, function () {

                            dojo.anim(evt.target.parentNode, {

                                backgroundColor: '#CCCCCC'

                            }, 0);

                        });

                        navEvent(evt.target.parentNode.id);

                    });

                    // 将漫游设置为默认操作

                    navEvent('deactivate');

                }

                function navEvent(id) {

                    switch (id) {

                        case 'pan':

                            map.enablePan();

                            navToolbar.activate(Navigation.PAN);

                            if (navOption) {

                                fx.anim(document.getElementById(navOption), {

                                    backgroundColor: '#FFFFFF'

                                });

                            }

                            navOption = id;

                            break;

                        case 'zoomprev':

                            navToolbar.zoomToPrevExtent();

                            break;

                        case 'zoomnext':

                            navToolbar.zoomToNextExtent();

                            break;

                        case 'extent':

                            navToolbar.zoomToFullExtent();

                            break;

                        case 'zoomin':

                            navToolbar.activate(Navigation.ZOOM_IN);

                            if (navOption) {

                                fx.anim(document.getElementById(navOption), {

                                    backgroundColor: '#FFFFFF'

                                });

                            }

                            navOption = id;

                            break;

                        case 'zoomout':

                            navToolbar.activate(Navigation.ZOOM_OUT);

                            if (navOption) {

                                fx.anim(document.getElementById(navOption), {

                                    backgroundColor: '#FFFFFF'

                                });

                            }

                            navOption = id;

                            break;

                        case 'deactivate':

                            navToolbar.deactivate();

                            if (navOption) {

                                fx.anim(document.getElementById(navOption), {

                                    backgroundColor: '#FFFFFF'

                                });

                            }

                            navOption = id;

                            break;

                    }

                }

            });

    </script>

</head>

<body class="tundra">

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  id="main">

        <div id="navDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'false'" style="width: 44px; overflow: hidden; padding: 0px; border: 0px; ">

            <div id="zoomin" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">

                <img class="navItem" src="data:images/zoomin.gif" title="Zoom In: Drag a zoom rectangle on-map to zoom in" />

            </div>

            <div id="zoomout" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">

                <img class="navItem" src="data:images/zoomout.gif" title="Zoom Out: Drag a zoom rectangle on-map to zoom out and center" />

            </div>

            <div id="extent" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">

                <img class="navItem" src="data:images/web.gif" title="Full Extent: Zoom out to Full Extent" />

            </div>

            <div id="zoomprev" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">

                <img class="navItem" src="data:images/left.gif" title="前一视图" />

            </div>

            <div id="zoomnext" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">

                <img class="navItem" src="data:images/right.gif" title="后一视图" />

            </div>

            <div id="pan" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">

                <img class="navItem" title="漫游" src="data:images/hand.gif" />

            </div>

            <div id="deactivate" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; background-color:#DADADA; vertical-align : middle; overflow: hidden;">

                <img class="navItem" src="data:images/minus.gif" title="返回标准控制" />

            </div>

        </div>

        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"

            style="background-color: #f5ffbf; padding: 10px;">

        </div>

    </div>

</body>

</html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>地图窗口操作</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">    <style type="text/css">        html, body, #main {            padding: 0;            margin: 0;            width: 100%;            height: 100%;        }    </style>    <script src="http://js.arcgis.com/3.9/"></script>    <script type="text/javascript">        var map, navToolbar;        var navOption; // 当前选择的操作        require(["dojo/parser", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/navigation",            "dojo/query", 'dojo/_base/fx', "dojo/fx/easing", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"],            function (parser, Map, ArcGISTiledMapServiceLayer, Navigation, query, fx, easing) {                parser.parse();
                map = new Map("mapDiv", {                    logo: false,                    sliderStyle: "large"                });                var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";                var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);                map.addLayer(agoLayer);
                map.on('load', setupNavBar);
                function setupNavBar() {                    navToolbar = new Navigation(map);
                    query(".navItem img").onmouseover(function (evt) {                        fx.anim(evt.target.parentNode, {                            backgroundColor: '#CCCCCC'                        }, 200, easing.bounceOut);                    }).onmouseout(function (evt) {                        if (evt.target.parentNode.id != navOption) {                            fx.anim(evt.target.parentNode, {                                backgroundColor: '#FFFFFF'                            });                        }                        else {                            fx.anim(evt.target.parentNode, {                                backgroundColor: '#DADADA'                            });                        }                    }).onclick(function (evt) {
                        fx.anim(evt.target.parentNode, {                            backgroundColor: '#999999'                        }, 200, easing.linear, function () {                            dojo.anim(evt.target.parentNode, {                                backgroundColor: '#CCCCCC'                            }, 0);                        });                        navEvent(evt.target.parentNode.id);                    });
                    // 将漫游设置为默认操作                    navEvent('deactivate');                }
                function navEvent(id) {                    switch (id) {                        case 'pan':                            map.enablePan();                            navToolbar.activate(Navigation.PAN);
                            if (navOption) {                                fx.anim(document.getElementById(navOption), {                                    backgroundColor: '#FFFFFF'                                });                            }                            navOption = id;                            break;                        case 'zoomprev':                            navToolbar.zoomToPrevExtent();                            break;                        case 'zoomnext':                            navToolbar.zoomToNextExtent();                            break;                        case 'extent':                            navToolbar.zoomToFullExtent();                            break;                        case 'zoomin':                            navToolbar.activate(Navigation.ZOOM_IN);                            if (navOption) {                                fx.anim(document.getElementById(navOption), {                                    backgroundColor: '#FFFFFF'                                });                            }                            navOption = id;                            break;                        case 'zoomout':                            navToolbar.activate(Navigation.ZOOM_OUT);                            if (navOption) {                                fx.anim(document.getElementById(navOption), {                                    backgroundColor: '#FFFFFF'                                });                            }                            navOption = id;                            break;                        case 'deactivate':                            navToolbar.deactivate();                            if (navOption) {                                fx.anim(document.getElementById(navOption), {                                    backgroundColor: '#FFFFFF'                                });                            }                            navOption = id;                            break;                    }                }            });    </script></head><body class="tundra">    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  id="main">        <div id="navDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'false'" style="width: 44px; overflow: hidden; padding: 0px; border: 0px; ">            <div id="zoomin" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">                <img class="navItem" src="data:images/zoomin.gif" title="Zoom In: Drag a zoom rectangle on-map to zoom in" />            </div>            <div id="zoomout" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">                <img class="navItem" src="data:images/zoomout.gif" title="Zoom Out: Drag a zoom rectangle on-map to zoom out and center" />            </div>            <div id="extent" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">                <img class="navItem" src="data:images/web.gif" title="Full Extent: Zoom out to Full Extent" />            </div>            <div id="zoomprev" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">                <img class="navItem" src="data:images/left.gif" title="前一视图" />            </div>            <div id="zoomnext" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">                <img class="navItem" src="data:images/right.gif" title="后一视图" />            </div>            <div id="pan" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; vertical-align : middle; overflow: hidden;">                <img class="navItem" title="漫游" src="data:images/hand.gif" />            </div>            <div id="deactivate" data-dojo-type="dijit/layout/ContentPane" class="navItem" data-dojo-props="splitter:'false'" style="height: 30px; border: 1px solid #DADADA; padding: 5px; margin-bottom: 3px; background-color:#DADADA; vertical-align : middle; overflow: hidden;">                <img class="navItem" src="data:images/minus.gif" title="返回标准控制" />            </div>        </div>        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"             style="background-color: #f5ffbf; padding: 10px;">                    </div>    </div></body></html>

arcgis地图窗口操作的更多相关文章

  1. arcgis地图服务之 identify 服务

    arcgis地图服务之 identify 服务 在近期的一次开发过程中,利用IdentityTask工具查询图层的时候,请求的参数中ImageDisplay的参数出现了错误,导致查询直接不能执行,百度 ...

  2. arcgis地图数据集合

    一.全国的ArcGIS地图SHP格式数据,覆盖的图层信息量基本齐全,除了ArcGIS之外,其他GIS软件(superMap和MapGIS.MapInfo等等)也是用之,适合为GIS开发提供数据素材. ...

  3. ArcEngine地图窗口指定区域导出指定DPI多格式---delphi/C#实现

    delphi/C#实现,其他语言稍微改下就行了.AE的编码各个语言都差不多,这里也没用到某一语言的特性. 函数特点: 1.可以精确导出指定范围的图形要素 2.支持多格式.TIF, .EMF,.GIF, ...

  4. 【转】ArcGIS地图缓存制作简介

    [PDF]ArcGIS 地图缓存制作简介 - Esri中国 ArcGIS地图缓存制作简介 制作好的电子地图只有发布为服务后才能为更多的用户所查看与使用.ArcGIS Server 为共享 GIS 资源 ...

  5. uCGUI窗口操作要点

    uCGUI窗口操作要点 1. 创建一个窗口的时候,会给此窗口发送“创建(WM_CREATE)”消息,从而执行它的回调函数:如果创建窗口的标志带有“可视标志(WM_CF_SHOW)”,那么在后续执行GU ...

  6. Structured-Streaming之窗口操作

    Structured Streaming 之窗口事件时间聚合操作 Spark Streaming 中 Exactly Once 指的是: 每条数据从输入源传递到 Spark 应用程序 Exactly ...

  7. WPF: WpfWindowToolkit 一个窗口操作库的介绍

    在 XAML 应用的开发过程中,使用MVVM 框架能够极大地提高软件的可测试性.可维护性.MVVM的核心思想是关注点分离,使得业务逻辑从 View 中分离出来到 ViewModel 以及 Model ...

  8. 使用cmd命令行窗口操作SqlServer

    本文主要介绍使用windows下的使用cmd命令行窗口操作Sqlserver, 首先我们可以运行 osql  ?/   ,这样就把所有可以通过CMD命令行操作sqlserver的命令显示出来 (有图有 ...

  9. streaming窗口操作

    之前一直对窗口操作不太理解.认为spark streaming本身已经是分片计算,还需要窗口操作干啥. 窗口操作最为简单易懂的场景就是,在M时间间隔计算一次N时间内的热搜.当M=N的时候,就像上述所说 ...

随机推荐

  1. Python - 基本数据类型及其常用的方法之数字与字符串

    数字(int): 1.int()(将字符串换为数字) a = " print(type(a), a) b = int(a) print(type(b), b) num = "a&q ...

  2. 05-4-style的代替操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 基于在树上走的DP问题

    笔者已经很久没有打过题解了,如果打题解,就总是要连着一个知识点来打题解. 最近做过一共两道这样的题目.笔者认为这样的题有较强的可拓展性,比较有意义. 所以就打一篇博客. 问题概述 先说说这是个什么样的 ...

  4. 2019牛客暑期多校赛（第一场） A Equivalent Prefixes（单调栈）

    传送门:https://ac.nowcoder.com/acm/contest/881/A 题意:给定两个数组a和b,求最大的p,满足在区间 [1,p] 中任何区间的两个数组的最小值的下标都相等. 思 ...

  5. Cesium官方教程4--影像图层

    原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图 ...

  6. MySQL系列(六)--索引优化

    在进行数据库查询的时候,索引是非常重要的,当然前提是达到一定的数据量.索引就像字典一样,通过偏旁部首来快速定位,而不是一页页 的慢慢找. 索引依赖存储引擎层实现,所以支持的索引类型和存储引擎相关,同一 ...

  7. [Array]628. Maximum Product of Three Numbers

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  8. JS引擎查找属性的原理

    原型继承的原理 不断向上查找 funciton getProperty(obj,prop){ if(obj.hasOwnProperty(prop){ return obj[prop]; }else ...

  9. Lvs 环境搭建 vbox搭建centos6.9 vbox设置 centos上安装nginx

    1.现在vbox上虚拟出3个虚拟机,分别为负载均衡器(Load Balance).实际服务器1(Real server1).实际服务器2(Real Server2) 要点: :vbox系统网络连接方式 ...

  10. Ubuntu下安装Libpcap

    Libpcap是 Unix/Linux 平台下的网络数据捕获函数包,百度百科是这么说的,唉,不管什么来头,只要帮我完成作业就行,安装过程记录如下: 还是那个套路,先在网上搜了一把,大概也就那样,被疯狂 ...