博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Arcgis for javascript不同的状态下自己定义鼠标样式
阅读量:5158 次
发布时间:2019-06-13

本文共 1893 字,大约阅读时间需要 6 分钟。

俗话说:爱美之心。人皆有之。

是的。没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点。

在本文,给大家讲讲在下怎样自己定义鼠标样式。

首先。说几个状态。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);
这两种状态在点击button时触发,代码例如以下:

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");                });            });
这样,在上述四种状态下的鼠标状态时由我们自己控制样式的,以下是完整代码:

    
Simple Map

转载于:https://www.cnblogs.com/blfshiye/p/5137050.html

你可能感兴趣的文章
注解小结
查看>>
list control控件的一些操作
查看>>
判断字符串在字符串中
查看>>
201421410014蒋佳奇
查看>>
Xcode5和ObjC新特性
查看>>
Centos 7.0 安装Mono 3.4 和 Jexus 5.6
查看>>
CSS属性值currentColor
查看>>
Real-Time Rendering 笔记
查看>>
实验四2
查看>>
多路复用
查看>>
spring IOC装配Bean(注解方式)
查看>>
[面试算法题]有序列表删除节点-leetcode学习之旅(4)
查看>>
kubernetes_book
查看>>
侧边栏广告和回到顶部
查看>>
https://blog.csdn.net/u012106306/article/details/80760744
查看>>
海上孤独的帆
查看>>
处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“Manag
查看>>
01: socket模块
查看>>
mysql触发器
查看>>
淌淌淌
查看>>