zoukankan      html  css  js  c++  java

  • （转）OL2中设置鼠标的样式

    http://blog.csdn.net/gisshixisheng/article/details/49496289

    概述：

    在OL2中，鼠标默认是箭头，地图移动时，鼠标样式是移动样式；很多时候，为了形象起见，我们总是希望鼠标在地图上的时候和移动地图的时候鼠标的样式不是默认的效果，本文讲述如何实现这样的效果。

    实现方式：

    通过下面的代码实现修改鼠标样式。

    map.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
    

    在地图初始化完成后，设置地图的样式，并添加map的move和moveend事件，实现的完整代码如下：
    

    

    

    [html] view plain copy

     
    
 print?
    

    

      

    1. <!DOCTYPE html>  
      2. 

    2. <html>  
      3. 

    3. <head lang="en">  
      4. 

    4.     <meta charset="UTF-8">  
      5. 

    5.     <title>openlayers map</title>  
      6. 

    6.     <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">  
      7. 

    7.     <style>  
      8. 

    8.         html, body{  
      9. 

    9.             padding:0;  
      10. 

    10.             margin:0;  
      11. 

    11.             height:100%;  
      12. 

    12.             100%;  
      13. 

    13.             overflow: hidden;  
      14. 

    14.             font-size: 12px;  
      15. 

    15.         }  
      16. 

    16.         #map1{  
      17. 

    17.              500px;  
      18. 

    18.             height: 500px;  
      19. 

    19.             float: left;  
      20. 

    20.             overflow: hidden;  
      21. 

    21.             border: 1px solid #f0e68c;  
      22. 

    22.         }  
      23. 

    23.     </style>  
      24. 

    24.     <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>  
      25. 

    25.     <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>  
      26. 

    26.     <script>  
      27. 

    27.         var map1;  
      28. 

    28.         $(function(){  
      29. 

    29.             var bounds = new OpenLayers.Bounds(  
      30. 

    30.                     73.45100463562233, 18.16324718764174,  
      31. 

    31.                     134.97679764650596, 53.531943152223576  
      32. 

    32.             );  
      33. 

    33.             var options = {  
      34. 

    34.                 controls: [],  
      35. 

    35.                 maxExtent: bounds,  
      36. 

    36.                 maxResolution: 0.2403351289487642,  
      37. 

    37.                 projection: "EPSG:4326",  
      38. 

    38.                 units: 'degrees'  
      39. 

    39.             };  
      40. 

    40.             map1 = new OpenLayers.Map('map1', options);  
      41. 

    41.             var wms = new OpenLayers.Layer.WMS(  
      42. 

    42.                     "Geoserver layers - Tiled",  
      43. 

    43.                     "http://localhost:8088/geoserver/lzugis/wms",  
      44. 

    44.                     {  
      45. 

    45.                         "LAYERS": "province",  
      46. 

    46.                         "STYLES": '',  
      47. 

    47.                         format: 'image/png'  
      48. 

    48.                     },  
      49. 

    49.                     {  
      50. 

    50.                         buffer: 0,  
      51. 

    51.                         displayOutsideMaxExtent: true,  
      52. 

    52.                         isBaseLayer: true,  
      53. 

    53.                         yx : {'EPSG:4326' : true}  
      54. 

    54.                     }  
      55. 

    55.             );  
      56. 

    56.             map1.addLayer(wms);  
      57. 

    57.             map1.addControl(new OpenLayers.Control.Zoom());  
      58. 

    58.             map1.addControl(new OpenLayers.Control.Navigation());  
      59. 

    59.             map1.zoomToExtent(bounds);  
      60. 

    60.   
      61. 

    61.             map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");  
      62. 

    62.             map1.events.register("move", map1, function(){  
      63. 

    63.                 map1.layerContainerDiv.style.cursor = ("url(img/closedhand.cur),default");  
      64. 

    64.             });  
      65. 

    65.             map1.events.register("moveend", map1, function(){  
      66. 

    66.                 map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");  
      67. 

    67.             });  
      68. 

    68.         });  
      69. 

    69.     </script>  
      70. 

    70. </head>  
      71. 

    71. <body>  
      72. 

    72. <div id="map1"></div>  
      73. 

    73. </body>  
      74. 

    74. </html>  
      75. 

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  每周进度及工作量统计——2016.10.06-2016.10.13
                    
    SCRUM站立会议模拟
                    
    java词频统计——web版支持
                    
    每周进度及工作量统计——2016.9.22--2016.9.29
                    
    简易四则运算生成程序——第一次改进后的单元测试
                    
    java词频统计——改进后的单元测试
                    
    第一次通读《构建之法》阅读笔记
                    
    centOS6.5网络配置
                    
    webpack安装
                    
    CommonJS和AMD/CMD
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/telwanggs/p/6972491.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看