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 ...
随机推荐
- iOS学习之七牛云存储应用
前言 七牛云存储,是专为移动时代开发者打造的数据管理平台,为互联网网站和移动App提供数据的在线托管.传输加速以及图片.音视频等富媒体的云处理服务. 七牛云官网http://www.qiniu.com ...
- 利用TokyoTyrant构建兼容Memcached协议、支持故障转移、高并发的分布式Key-value持久存储系统（转）
Tokyo Cabinet 是日本人 平林幹雄 开发的一款 DBM 数据库,该数据库读写非常快,哈希模式写入100万条数据只需0.643秒,读取100万条数据只需0.773秒,是 Berkeley D ...
- iOS 和服务端交互 数据加密策略
总体逻辑: 客户端:对称加密数据,上传...回执对称解密 同理服务端:获取上传数据 对称解密 ...下发:对称加密 当且仅当登录接口和 拉新(更新nonce 和 key的接口)是对称加密上传 非对称解 ...
- CAS单点登录的原理
1.首先了解几个概念 1).TGC:Ticket-granting cookie,存放用户身份认证凭证的cookie,在浏览器和CAS Server间通讯时使用.2).TGT:ticket grant ...
- clipbrd剪切板查看器
本文,我们来学习一下简单的概念,即,如何查看系统剪贴版里面有什么内容? 如果要想看.或者验证系统剪贴版里面都有什么内容,最为简单的方法就是通过"粘贴"的操作来验证! 但是, ...
- cookie 与 session 的区别详解
[转]cookie 与session 的区别详解 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当 ...
- spring security使用数据库验证的逻辑处理
前面做了多个示例,包括使用jdbc和hibernate两种方式访问数据库获取用户信息和权限信息,其中一些关键步骤如下: 我们在SecurityConfig中配置覆盖configure方法时候,可以 ...
- SQL时间戳日期时间转换
将时间戳转换为日期格式:比如降1455504268→2016-02-15 10:44:28 select device.register_time a,FROM_UNIXTIME(device.reg ...
- Java中List集合的常用方法
List接口是继承Collection接口,所以Collection集合中有的方法,List集合也继承过来. 这篇文章就不讲继承Collection接口的那些方法了 https://www.cnblo ...
- iSCSI 在Linux下的模拟实验
5.iSCSI客户端(Initiator)配置 在Linux 2.6内核中提供了iscsi驱动,iSCSI 驱动(driver)使主机拥有了通过IP网络访问存储 的能力,驱动在主机(Initiat ...