arcgis地图窗口操作
<!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地图窗口操作的更多相关文章
- arcgis地图服务之 identify 服务
arcgis地图服务之 identify 服务 在近期的一次开发过程中,利用IdentityTask工具查询图层的时候,请求的参数中ImageDisplay的参数出现了错误,导致查询直接不能执行,百度 ...
- arcgis地图数据集合
一.全国的ArcGIS地图SHP格式数据,覆盖的图层信息量基本齐全,除了ArcGIS之外,其他GIS软件(superMap和MapGIS.MapInfo等等)也是用之,适合为GIS开发提供数据素材. ...
- ArcEngine地图窗口指定区域导出指定DPI多格式---delphi/C#实现
delphi/C#实现,其他语言稍微改下就行了.AE的编码各个语言都差不多,这里也没用到某一语言的特性. 函数特点: 1.可以精确导出指定范围的图形要素 2.支持多格式.TIF, .EMF,.GIF, ...
- 【转】ArcGIS地图缓存制作简介
[PDF]ArcGIS 地图缓存制作简介 - Esri中国 ArcGIS地图缓存制作简介 制作好的电子地图只有发布为服务后才能为更多的用户所查看与使用.ArcGIS Server 为共享 GIS 资源 ...
- uCGUI窗口操作要点
uCGUI窗口操作要点 1. 创建一个窗口的时候,会给此窗口发送“创建(WM_CREATE)”消息,从而执行它的回调函数:如果创建窗口的标志带有“可视标志(WM_CF_SHOW)”,那么在后续执行GU ...
- Structured-Streaming之窗口操作
Structured Streaming 之窗口事件时间聚合操作 Spark Streaming 中 Exactly Once 指的是: 每条数据从输入源传递到 Spark 应用程序 Exactly ...
- WPF: WpfWindowToolkit 一个窗口操作库的介绍
在 XAML 应用的开发过程中,使用MVVM 框架能够极大地提高软件的可测试性.可维护性.MVVM的核心思想是关注点分离,使得业务逻辑从 View 中分离出来到 ViewModel 以及 Model ...
- 使用cmd命令行窗口操作SqlServer
本文主要介绍使用windows下的使用cmd命令行窗口操作Sqlserver, 首先我们可以运行 osql ?/ ,这样就把所有可以通过CMD命令行操作sqlserver的命令显示出来 (有图有 ...
- streaming窗口操作
之前一直对窗口操作不太理解.认为spark streaming本身已经是分片计算,还需要窗口操作干啥. 窗口操作最为简单易懂的场景就是,在M时间间隔计算一次N时间内的热搜.当M=N的时候,就像上述所说 ...
随机推荐
- 08_jQuery对象初识（四)each循环、data(非常重要)
each: 不使用for循环答应jQuery对象,使用each: 退出整个each循环: 退出一次each循环: data:
- python 虚拟环境virtualenv搭建
一.安装虚拟环境 pip install virtualenv -i https://pypi.douban.com/simple 用国内镜像,速度更快 二.创建虚拟目录 在需要存放软件工程的 ...
- FPFH+ICP点云配准
A, UniformSampling降噪 B, ISS计算关键点, FPFH特征 在FeatureCloud::setInputCloud中读入点云,并调用processInput进行处理: proc ...
- 2018-10-19-C#-序列类为-xml-可以使用的特性大全
title author date CreateTime categories C# 序列类为 xml 可以使用的特性大全 lindexi 2018-10-19 9:9:47 +0800 2018-6 ...
- centos7服务器常见安装包准备
内核相关配置 https://github.com/digoal/blog/blob/master/201611/20161121_01.md# vi /etc/sysctl.conf # add b ...
- vue 路由（二级）配置及详细步骤
1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...
- independent set 1
independent set 1 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 102400K,其他语言204800K64bit IO Format: %lld 题目描述 Note: ...
- MaxCompute 最新特性介绍 | 2019大数据技术公开课第三季
摘要:距离上一次MaxCompute新功能的线上发布已经过去了大约一个季度的时间,而在这一段时间里,MaxCompute不断地在增加新的功能和特性,比如参数化视图.UDF支持动态参数.支持分区裁剪.生 ...
- 【python之路42】web框架们的具体用法
Python的WEB框架 (一).Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. p ...
- js图片碎片效果（移动端也适用）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...