zoukankan      html  css  js  c++  java
  • 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>

    源码下载





  • 相关阅读:
    Saltstack module acl 详解
    Saltstack python client
    Saltstack简单使用
    P5488 差分与前缀和 NTT Lucas定理 多项式
    CF613D Kingdom and its Cities 虚树 树形dp 贪心
    7.1 NOI模拟赛 凸包套凸包 floyd 计算几何
    luogu P5633 最小度限制生成树 wqs二分
    7.1 NOI模拟赛 dp floyd
    springboot和springcloud
    springboot集成mybatis
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539888.html
Copyright © 2011-2022 走看看