首页 > 代码库 > Arcgis for javascript不同的状态下自定义鼠标样式

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://www.mamicode.com/"http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">>
源码下载





Arcgis for javascript不同的状态下自定义鼠标样式