Arcgis for javascript不同的状态下自定义鼠标样式
俗话说：爱美之心，人皆有之。是的，没错，即使我只是一个做地图的，我也希望自己的地图看起来好看一点。在本文，给大家讲讲在Arcgis
for javascript下如何自定义鼠标样式。
首先，说几个状态。1、鼠标在地图上面移动；2、按住鼠标左键拖拽鼠标；3、拉框放大地图；4、拉框缩小地图。
鼠标在地图上面时为
按住鼠标拖拽地图时为
拉框放大地图时为
拉框缩小地图时为
接下来，说说我的实现思路。
第一种状态，在地图加载完成时出现，代码：
map.on("load",function(){
map.setMapCursor("url(cursor/default.cur),auto");
});
第二种状态，地图拖拽时出现，此时，需要分别监听map的mouse-drag-start和mouse-drag-end事件，具体代码如下：
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/pointer.cur),auto");
});
map.on("mouse-drag-end",function(){
map.setMapCursor("url(cursor/default.cur),auto");
});
第三种和第四种状态时，需要定义Navigation，如下：
var navToolbar = new esri.toolbars.Navigation(map);
这两种状态在点击按钮时触发，代码如下：
on(dom.byId("zoom_in"), "click", function(event){//拉框放大
map.setMapCursor("url(cursor/zoom-in.cur),auto");
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/zoom-in.cur),auto");
});
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
});
on(dom.byId("zoom_out"), "click", function(event){//拉框缩小
map.setMapCursor("url(cursor/zoom-out.cur),auto");
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/zoom-out.cur),auto");
});
navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
});
说明：在触发这两种状态时，还要同时设置mouse-drag-start触发时的状态。
最后，操作结束后一切回归原始状态，代码如下：
navToolbar.on("extent-history-change", function(){
navToolbar.deactivate();
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/pointer.cur),auto");
});
});
这样，在上述四种状态下的鼠标状态时由我们自己控制样式的，下面是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map_ctrl{
z-index: 99;
position: absolute;
top: 20pt;
right: 10pt;
background: #fff;
}
.button{
padding: 3px;
background: #eee;
text-align: center;
font-size: 12px;
font-family: "微软雅黑";
border: 1px solid #eee;
}
.button:hover{
background: #ccc;
border: 2px solid #ccc;
cursor: pointer;
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function(Map, Tiled, GraphicsLayer, Graphic, PictureMarkerSymbol,on,dom) {
map = new Map("map",{logo:false});
var tiled1 = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
var mouseLayer = new GraphicsLayer();
map.addLayer(tiled1);
map.setLevel(4);
map.on("load",function(){
map.setMapCursor("url(cursor/default.cur),auto");
});
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/pointer.cur),auto");
});
map.on("mouse-drag-end",function(){
map.setMapCursor("url(cursor/default.cur),auto");
});
var navToolbar = new esri.toolbars.Navigation(map);
on(dom.byId("zoom_in"), "click", function(event){//拉框放大
map.setMapCursor("url(cursor/zoom-in.cur),auto");
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/zoom-in.cur),auto");
});
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
});
on(dom.byId("zoom_out"), "click", function(event){//拉框缩小
map.setMapCursor("url(cursor/zoom-out.cur),auto");
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/zoom-out.cur),auto");
});
navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
});
navToolbar.on("extent-history-change", function(){
navToolbar.deactivate();
map.on("mouse-drag-start",function(){
map.setMapCursor("url(cursor/pointer.cur),auto");
});
});
});
</script>
</head>
<body>
<div id="map">
<div id="map_ctrl">
<a id="zoom_in" class="button">拉框放大</a>
<a id="zoom_out" class="button">拉框缩小</a>
</div>
</div>
</body>
</html>
Arcgis for javascript不同的状态下自定义鼠标样式的更多相关文章
- Arcgis for javascript不同的状态下自己定义鼠标样式
俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...
- C#、WPF中如何自定义鼠标样式
需求:在C#中如何自定义鼠标样式?在这里可以分两种情况,一种是在winForm,另一种是在WPF中(注意使用的Cursor对象不一样) 解决办法如下: a.首先针对WinForm中,我们可以采用图标加 ...
- CSharp如何自定义鼠标样式
一.如何设置鼠标样式? 在CSharp的WinForm开发中,可以通过下面的API设置鼠标样式: //把鼠标样式设置为十字(系统自带的一种鼠标样式) this.Cursor = Cursors.Cro ...
- Android：系统自定义鼠标样式切换
一.APP通过View修改鼠标样式 app view上修改鼠标样式比较简单,通过 hover event 获取鼠标坐标并使用如下方法修改为自定义图片: getWindow().getDecorView ...
- android 控件在不同状态下的内容样式与背景样式
1 控件内容(如字体颜色)在不同状态下有不同的表现色ref:http://developer.android.com/guide/topics/resources/color-list-resourc ...
- ArcGIS AddIN开发之自定义鼠标样式
如果想修改Windows默认的鼠标样式,可以这样 //设置鼠标样式 this.Cursor = System.Windows.Forms.Cursors.Cross; 可是如果想设置成一些自定义的很好 ...
- cursor url 自定义鼠标样式
cursor可以自定义鼠标,写法是cursor:url(“图片路径”),pointer; url:需使用的自定义光标的 URL.图片类型需要是.cur或.ani和jpg,png等格式的(.cur或.a ...
- C#winform程序自定义鼠标样式
public void SetCursor(Bitmap cursor, Point hotPoint) { int hotX = hotPoint.X; int hotY = hotPoint.Y; ...
- web中自定义鼠标样式
实现一个功能:鼠标移动到一个图片左边显示左箭头,移动到右边显示右箭头. 实现方法:一个img上面定位两个div,div的样式如下: .toleft { width: 200px; height: 30 ...
随机推荐
- Config Static IP Address manually in Ubuntu
The process of the configuration of static IP address in Ubuntu is as follows: ``` $ sudo vim /etc/n ...
- beego——构造查询
QueryBuilder提供了一个简单.流畅的SQL查询构造器.在不影响代码可读性的前提下用来快速的建立SQL语句. QueryBuilder在功能上与ORM重合,但是个由利弊,ORM更适合用于简单的 ...
- MAC下配置MAVEN环境变量配置
MAVEN环境变量的配置: 第一步:在MAVEN的官网下载MAVEN.http://maven.apache.org/download.cgi,我这里下载的是apache-maven-3.39-bin ...
- ORACLE 多表连接与子查询
Oracle表连接 SQL/Oracle使用表连接从多个表中查询数据 语法格式: select 字段列表from table1,table2where table1.column1=table2.co ...
- Node.js学习笔记（3）：NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
- LeetCode：N叉树的层次遍历【429】
LeetCode:N叉树的层次遍历[429] 题目描述 给定一个 N 叉树,返回其节点值的层序遍历. (即从左到右,逐层遍历). 例如,给定一个 3叉树 : 返回其层序遍历: [ [1], [3,2, ...
- 微信小程序学习笔记（4）--------框架之逻辑层
逻辑层 逻辑层(App Service):小程序框架的逻辑层是由JavaScript编写的,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. App进行程序注册,Page进行页面注册 g ...
- caffe训练自己的数据集
默认caffe已经编译好了,并且编译好了pycaffe 1 数据准备 首先准备训练和测试数据集,这里准备两类数据,分别放在文件夹0和文件夹1中(之所以使用0和1命名数据类别,是因为方便标注数据类别,直 ...
- linux命令（6/10）：find 命令
Linux将时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟两种.系统时间是指当前Linux Kernel中的时钟, 而硬件时钟则是主板上由电池供电 ...
- samba 4.7.16 安装配置详解
系统:Centos 7.4 x64位 服务版本:samba-4.7.1.samba-client-4.7 Samba 简介 Samba 是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服 ...