首页 > 代码库 > （转）OL2中设置鼠标的样式

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

2024-10-03 10:43:39   217人阅读

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. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>openlayers map</title>  
  6.     <link rel="stylesheet" href=http://www.mamicode.com/"http://localhost/olapi/theme/default/style.css" type="text/css">  
  7.     <style>  
  8.         html, body{  
  9.             padding:0;  
  10.             margin:0;  
  11.             height:100%;  
  12.             width:100%;  
  13.             overflow: hidden;  
  14.             font-size: 12px;  
  15.         }  
  16.         #map1{  
  17.             width: 500px;  
  18.             height: 500px;  
  19.             float: left;  
  20.             overflow: hidden;  
  21.             border: 1px solid #f0e68c;  
  22.         }  
  23.     </style>  
  24.     <script src=http://www.mamicode.com/"../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>  
  25.     <script src=http://www.mamicode.com/"../../../plugin/jquery/jquery-1.8.3.js"></script>  
  26.     <script>  
  27.         var map1;  
  28.         $(function(){  
  29.             var bounds = new OpenLayers.Bounds(  
  30.                     73.45100463562233, 18.16324718764174,  
  31.                     134.97679764650596, 53.531943152223576  
  32.             );  
  33.             var options = {  
  34.                 controls: [],  
  35.                 maxExtent: bounds,  
  36.                 maxResolution: 0.2403351289487642,  
  37.                 projection: "EPSG:4326",  
  38.                 units: ‘degrees‘  
  39.             };  
  40.             map1 = new OpenLayers.Map(‘map1‘, options);  
  41.             var wms = new OpenLayers.Layer.WMS(  
  42.                     "Geoserver layers - Tiled",  
  43.                     "http://localhost:8088/geoserver/lzugis/wms",  
  44.                     {  
  45.                         "LAYERS": "province",  
  46.                         "STYLES": ‘‘,  
  47.                         format: ‘image/png‘  
  48.                     },  
  49.                     {  
  50.                         buffer: 0,  
  51.                         displayOutsideMaxExtent: true,  
  52.                         isBaseLayer: true,  
  53.                         yx : {‘EPSG:4326‘ : true}  
  54.                     }  
  55.             );  
  56.             map1.addLayer(wms);  
  57.             map1.addControl(new OpenLayers.Control.Zoom());  
  58.             map1.addControl(new OpenLayers.Control.Navigation());  
  59.             map1.zoomToExtent(bounds);  
  60.   
  61.             map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");  
  62.             map1.events.register("move", map1, function(){  
  63.                 map1.layerContainerDiv.style.cursor = ("url(img/closedhand.cur),default");  
  64.             });  
  65.             map1.events.register("moveend", map1, function(){  
  66.                 map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");  
  67.             });  
  68.         });  
  69.     </script>  
  70. </head>  
  71. <body>  
  72. <div id="map1"></div>  
  73. </body>  
  74. </html>  
（转）OL2中设置鼠标的样式






























        

            
                
                  
                
                

                    联系

                    我们