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

    #!/usr/bin/env python #coding:utf-8 import MySQLdb,requests import time from datetime import datetim ...

  2. 微信小程序组件progress

    基础内容progress:官方文档 Demo Code: Page({ data:{ percent:0 }, onReady:function(){ this.percentAdd(); }, pe ...

  3. freemarker split字符串分割 遍历map

    <#list "张三三,李思思,,王强,柳树,诸葛正我"?split(",") as name> "${name}" </ ...

  4. unity,  在编辑界面中隐藏公开变量

    unity默认声明为public的变量都是在编辑界面可见的,如果要隐藏的话就可以这样做 一种是使用属性 Public float Age { get; set; } 另一种是使用标签 [HideInI ...

  5. JVM(4) 虚拟机性能监控与故障处理工具

    1. Sun JDK 监控和故障处理工具 1)jps:JVM process Status Tool,显示指定系统内所有的HotSpot虚拟机进程.可以列出正在运行的虚拟机进程,并显示虚拟机执行主类( ...

  6. C3p0的参数

    C3p0的参数设置:ComboPooledDataSource和BasicDataSource一样提供了一个用于关闭数据源的close()方法,这样我们就可以保证Spring容器关闭时数据源能够成功释 ...

  7. centos7下安装ngnix1.8.1

    参考 http://www.linuxidc.com/Linux/2016-09/134907.htm 安装依赖 openssl zlib pcre gcc 下载安装包 [root@localhost ...

  8. 微信小程序选择器

  9. Hardware Prefetcher

    硬件预取选项,指CPU有硬件预取功能,在CPU处理指令或数据之前,它将这些指令或数据从内存预取到L2缓存中,借此减少内存读取的时间,帮助消除潜在的瓶颈,以此提高系统效能.通常情况下建议设置为Enabl ...

  10. BZOJ4487 [Jsoi2015]染色问题

    BZOJ4487 [Jsoi2015]染色问题 题目描述 传送门 题目分析 发现三个限制,大力容斥推出式子是\(\sum_{i=0}^{N}\sum_{j=0}^{M}\sum_{k=0}^{C}(- ...