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

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

在本文，给大家讲讲在Arcgis
for javascript下怎样自己定义鼠标样式。

首先。说几个状态。1、鼠标在地图上面移动；2、按住鼠标左键拖拽鼠标。3、拉框放大地图；4、拉框缩小地图。

鼠标在地图上面时为

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">；

按住鼠标拖拽地图时为。

拉框放大地图时为；

拉框缩小地图时为。

接下来，说说我的实现思路。

第一种状态，在地图载入完毕时出现，代码：

 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");

                });

            });

这样，在上述四种状态下的鼠标状态时由我们自己控制样式的，以下是完整代码：

<!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. MouseMoveEvent为了不太耗资源在默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到，需要setMouseTracking(true)

    最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...

  3. Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...

  4. Arcgis for Javascript之统计图的实现

    首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...

  5. Arcgis for Javascript实现图

    首先,截个图给大家看结果: 初始化状态 放大后的状态 点击选中后的状态 如上图所看到的,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态.2.缩放后的状态:3.点击选中显示详情状态. ...

  6. ArcGIS For JavaScript API 默认参数

    “esri.config”的是在1.3版中的的“esriConfig”的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对于版本1.3或更高版本,您可以使用“es ...

  7. arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

    图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...

  8. Arcgis for javascript map操作addLayer具体解释

    本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...

  9. Arcgis for Javascript之featureLayer图和属性互操作性

    说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果 如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...

随机推荐

  1. werkzeug源码阅读笔记(二) 下

    wsgi.py----第二部分 pop_path_info()函数 先测试一下这个函数的作用: >>> from werkzeug.wsgi import pop_path_info ...

  2. const 用在函数后

    类的成员函数后面加 const,表明这个函数不会对这个类对象的数据成员(准确地说是非静态数据成员)作任何改变.C++支持常量性不同的重载,例如下面的GetData函数. #include " ...

  3. 车间任务不允许"每个装配件"超过100000

    应用 Oracle Work in   Progress 层 Level Function 函数名 Funcgtion Name WIP_WIPMRMDF 表单名 Form Name WIPMRMDF ...

  4. 解密电子书之二：EPD控制芯片

    EPD控制芯片大致上相当于计算机的显卡,没了它,所有电子书都变白板.类似显卡中的ATI与NVIDIA,EPD控制芯片中也是两家:Surf(泰信科)和EPSON(爱普生),其中爱普生是最早推出电子纸显示 ...

  5. Xcode证书破解 iphone真机部署

    Xcode证书破解 iphone真机部署 证书伪造: 先按照该教程的步骤添加证书.注意,原教程选择的是"系统"证书,这里我们用"登录"证书,切记. Xcode破 ...

  6. HDU 4914 Linear recursive sequence(矩阵乘法递推的优化)

    题解见X姐的论文 矩阵乘法递推的优化.仅仅是mark一下. .

  7. OracleOraDb10g_home1TNSListener服务无法启动

    启动OracleOraDb10g_home1TNSListener服务的时候就报错:“Windows无法启动OrcleOraDb11g_home1TNSListener服务(位于本地计算机上). 错误 ...

  8. VisualStudio中的代码段

    VS很强大,在这里就不过多说了,在平时码代码时应用代码段会提高我们的编写速度. 举个例子: 比如输入Console.WriteLine (); 传统方法就是一个字母一个字母的输入进去. 如果大家掌握了 ...

  9. 【攻防实战】SQL注入演练！

    这篇文章目的是让初学者利用SQL注入技术来解决他们面临的问题, 成功的使用它们,并在这种攻击中保护自己. 1.0 介绍 当一台机器只打开了80端口, 你最依赖的漏洞扫描器也不能返回任何有用的内容, 并 ...

  10. java23中设计模式详解

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...