俗话说：爱美之心，人皆有之。是的，没错，即使我只是一个做地图的，我也希望自己的地图看起来好看一点。在本文，给大家讲讲在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不同的状态下自定义鼠标样式的更多相关文章

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

    俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...

  2. C#、WPF中如何自定义鼠标样式

    需求:在C#中如何自定义鼠标样式?在这里可以分两种情况,一种是在winForm,另一种是在WPF中(注意使用的Cursor对象不一样) 解决办法如下: a.首先针对WinForm中,我们可以采用图标加 ...

  3. CSharp如何自定义鼠标样式

    一.如何设置鼠标样式? 在CSharp的WinForm开发中,可以通过下面的API设置鼠标样式: //把鼠标样式设置为十字(系统自带的一种鼠标样式) this.Cursor = Cursors.Cro ...

  4. Android：系统自定义鼠标样式切换

    一.APP通过View修改鼠标样式 app view上修改鼠标样式比较简单,通过 hover event 获取鼠标坐标并使用如下方法修改为自定义图片: getWindow().getDecorView ...

  5. android 控件在不同状态下的内容样式与背景样式

    1 控件内容(如字体颜色)在不同状态下有不同的表现色ref:http://developer.android.com/guide/topics/resources/color-list-resourc ...

  6. ArcGIS AddIN开发之自定义鼠标样式

    如果想修改Windows默认的鼠标样式,可以这样 //设置鼠标样式 this.Cursor = System.Windows.Forms.Cursors.Cross; 可是如果想设置成一些自定义的很好 ...

  7. cursor url 自定义鼠标样式

    cursor可以自定义鼠标,写法是cursor:url(“图片路径”),pointer; url:需使用的自定义光标的 URL.图片类型需要是.cur或.ani和jpg,png等格式的(.cur或.a ...

  8. C#winform程序自定义鼠标样式

    public void SetCursor(Bitmap cursor, Point hotPoint) { int hotX = hotPoint.X; int hotY = hotPoint.Y; ...

  9. web中自定义鼠标样式

    实现一个功能:鼠标移动到一个图片左边显示左箭头,移动到右边显示右箭头. 实现方法:一个img上面定位两个div,div的样式如下: .toleft { width: 200px; height: 30 ...

随机推荐

  1. Python HTML Resolution Demo - SGMLParser & PyQuery

    1. SGMLParser: 这里定义了一个Parse类,继承SGMLParser里面的方法.使用一个变量is_h4做标记判定html文件中的h4标签,如果遇到h4标签,则将标签内的内容加入到Pars ...

  2. Linux定时器 使用

    1.alarm alarm()执行后,进程将继续执行,在后期(alarm以后)的执行过程中将会在seconds秒后收到信号SIGALRM并执行其处理函数. #include <stdio.h&g ...

  3. while循环中的break、continue和else

    break:直接结束当前循环然后跳到下面的语句.break之后在循环外continue:结束本次循环,跳到下次循环.continue之后依然还在循环内else:这是while循环所特有,当循环结束之后 ...

  4. Rest_framework-2

    一 版本 二 解析器 三 序列化 四 请求数据验证 一 版本 作用:应用程序的更新迭代(丰富或添加功能),可以通过版本来实现. 1 .没用rest_framework之前,我们可以通过以下方式来获取 ...

  5. LocalReport Print with C# C#打印RDLC

             {             ;                                                      )             {        ...

  6. Maven实战--- dependencies与dependencyManagement的区别

    在上一个项目中遇到一些jar包冲突的问题,之后还有很多人分不清楚dependencies与dependencyManagement的区别,本篇文章将这些区别总结下来. 1.DepencyManagem ...

  7. 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能

    在线演示 本地下载

  8. shell-一些有趣的使用

    1. 对字符串进行MD5加密  echo test |md5sum|awk '{print $1}' 字符串数量很多时可以这样做: echo test |md5sum|awk '{print $1}' ...

  9. codeforces 808D

    题意:给出一个序列,询问是否能移动一个数(或不操作)使得序列能分为左右两个和相等的子序列. 思路:对每个数处理最左边和最右边出现的位置.设置断点分左右区间,左右区间和差值的一半就是要找的数,进行判断. ...

  10. linux 挂在新硬盘

    记录一下    全忘了..... PS 测试服务器的主板太差劲了,没有多余的电源接口,只能把光驱的电源拿出来,才能让硬盘使用.把硬盘装好后,我们用 fdisk -l 查看下: 图中可以看出 /dev/ ...