首页 > 其他 > 详细

(转)OL2中设置鼠标的样式

时间:2017-06-09 16:20:47      阅读:272      评论:0      收藏:0      [点我收藏+]

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

概述:

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

 

实现方式:

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

 

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

在地图初始化完成后,设置地图的样式,并添加map的move和moveend事件,实现的完整代码如下:
  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://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="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>  
  25.     <script src="../../../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中设置鼠标的样式

原文:http://www.cnblogs.com/love540376/p/6972491.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!