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>

源码下载

时间: 2024-10-14 04:54:34

Arcgis for javascript不同的状态下自定义鼠标样式的相关文章

CSharp如何自定义鼠标样式

一.如何设置鼠标样式? 在CSharp的WinForm开发中,可以通过下面的API设置鼠标样式: 1 //把鼠标样式设置为十字(系统自带的一种鼠标样式) 2 this.Cursor = Cursors.Cross; 3 //把鼠标样式设置为自定义图片 4 this.Cursor = new Cursor(string fileName);//要求file为cur格式 5 this.Cursor = new Cursor(IntPtr handel); 6 this.Cursor = new Cu

unity中自定义鼠标样式

在用unity制作游戏过程中,运行游戏时,有没有感觉到原来的鼠标看着是不是特别不爽了?反正我是看腻了,哈哈! 下面来看看自定义鼠标样式的自作:首先你需要在unity中将图片的样式改为Cursor类型的: 然后我们来看看代码: public Texture2D cursorTexture;    //在外面为该变量赋值; void OnGUI() {      Vector2 mouse_Pos=Input.MousePosition;      GUI.DrawTexture(new Rect(

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

1 控件内容(如字体颜色)在不同状态下有不同的表现色ref:http://developer.android.com/guide/topics/resources/color-list-resource.htmlres/color/radio_state.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.co

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

如果想修改Windows默认的鼠标样式,可以这样 //设置鼠标样式 this.Cursor = System.Windows.Forms.Cursors.Cross; 可是如果想设置成一些自定义的很好看的鼠标样式呢? 参考如下网址,该帖子是英文,vb的,而且需要您活动活动手脚才能看到内容 http://www.maprantala.com/2011/07/19/arcgis-add-in-custom-mouse-cursor/ 具体操作步骤如下: (1)添加.cur文件,具体鼠标样式可以下载或

web中自定义鼠标样式

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

cursor url 自定义鼠标样式

cursor可以自定义鼠标写法是cursor:url("图片路径"),default url:需使用的自定义光标的 URL.图片类型需要是.cur或.ani格式的. pointer: 默认的鼠标光标样式,当没有找到可用的定义光标时会使用此光标. .cur和 .ani图片我们可以用PS来自己制作. 制作方法也很简单: 1.先创建一个32*32的模板 2.一般我们需要的是png格式的鼠标样式,所以这里拖入一张选好的png图片,图片置入后,在去掉背景 3.按下ctrl+s保存后这里如图选择即

自定义鼠标样式

效果图展示: 代码 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

UE4自定义鼠标样式

1.controller里面有这个变量 2.通过controller里面的2个方法切换与指定图案样式 原文地址:https://www.cnblogs.com/VirtualJourneyStudio/p/10557619.html

自定义鼠标光标cursor

通过css属性 Cursor:url()自定义鼠标光标 {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头),以防没有由 URL 定义的可用光标. 图标的格式根据不同的浏览器来分: IE支持cur,ani,ico这三种格式. Google,FF支持bmp,gif,jpg,cur,ico这几种格式,不 支持ani格式,也不支持gif动画格式. 在项目中,用到自定义鼠标样式遇到的问题: IE浏览器下图标地址需要为