俗话说：爱美之心，人皆有之。是的，没错，即使我只是一个做地图的，我也希望自己的地图看起来好看一点。在本文，给大家讲讲在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. list comprehension & generator expression

    List comprehensions(列表推导式) are better when you want to iterate over something multiple times. Howeve ...

  2. 解决 hybird 应用中重复获取 WebView，导致页面元素无法识别的问题

    转载地址:http://blog.csdn.net/testman930/article/details/50799532 问题描述 在测APP的业务流,WebView和Native模式耦合在一起.例 ...

  3. Python之验证码

    Python生成随机验证码,需要使用PIL模块. 安装: ? 1 pip3 install pillow 基本使用 1. 创建图片 ? 1 2 3 4 5 6 7 8 9 from PIL impor ...

  4. 常用模块(hashlib,configparser,logging)

    常用模块(hashlib,configparser,logging) hashlib hashlib 摘要算法的模块md5 sha1 sha256 sha512摘要的过程 不可逆能做的事:文件的一致性 ...

  5. Java集合（1）：ArrayList

    Java容器类的用途是“保存对象”,分为两类:Map——存储“键值对”组成的对象:Collection——存储独立元素.Collection又可以分为List和Set两大块.List保持元素的顺序(有 ...

  6. Shiro理解与总结

    Feature Apache Shiro is a comprehensive application security framework with many features. The follo ...

  7. Educational Codeforces Round 11B. Seating On Bus 模拟

    地址:http://codeforces.com/contest/660/problem/B 题目: B. Seating On Bus time limit per test 1 second me ...

  8. JetBrains IntelliJ IDEA 15 Ultimate Edition版本激活破解

        由于JetBrains系列新版本注册激活发生了变化,所以原来的激活方式已经不能在使用. 只能用新的方式来破解了.此方式支持所有系列的新版版.包括IDEA15,PHPSTORM10,WEBSTO ...

  9. Linux防火墙--iptables学习

    iptables是Linux系统提供的一个强大的防火墙工具,可以实现包过滤.包重定向.NAT转换等功能.iptables是免费的,iptables是一个工具,实际的功能是通过netfilter模块来实 ...

  10. [CTSC2008]祭祀

    题目描述 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河 ...