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://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>

源码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

React V16 给我们带来了那些东西 ?

在如今越来越复杂的前端环境下,往往可能需要加载且渲染大量的 DOM 节点,那么在渲染的过程中,即使我们使用了 React virtualDom 进行维护,但是,...

61100
来自专栏码云1024

Jupyter Notebook

40980
来自专栏技术墨客

React学习(11)—— 高阶应用:Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declar...

8420
来自专栏前端新视界

Vue.js 系列教程 1:渲染,指令,事件

原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可...

24490
来自专栏极客编程

Cheerio,服务端的JQuery。

cheerio 是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上,且解析、操作、呈送都很高效。

11110
来自专栏从零开始学自动化测试

Selenium2+python自动化19-单选和复选框

最近发生了一些不愉快的事,其中缘由就不多说了,小编以后在这个公众号继续给大家更新,在过去的一年里感谢大家的一路支持,当然最感动的是能留下来的小伙伴,是你...

45180
来自专栏葡萄城控件技术团队

React Native基础&入门教程:以一个To Do List小例子,看props和state

在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexbox布局。还没有看过的小伙伴欢迎回到文章列表点击查看之前的文章了解。

10930
来自专栏小狼的世界

Vimperator:玩酷你的Firefox

First there was a Navigator, then there was an Explorer. Later it was time for a...

13140
来自专栏十月梦想

一天带入门到放弃vue.js(三)

自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

32440
来自专栏乐享123

Http Referer 的盗链与反盗链

1.2K30

扫码关注云+社区

领取腾讯云代金券