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. 

  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. width:100%;
    13. 

  13. overflow: hidden;
    14. 

  14. font-size: 12px;
    15. 

  15. }
    16. 

  16. #map1{
    17. 

  17. width: 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. map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
    61. 

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

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

  63. });
    64. 

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

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

  66. });
    67. 

  67. });
    68. 

  68. </script>
    69. 

  69. </head>
    70. 

  70. <body>
    71. 

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

  72. </body>
    73. 

  73. </html>


												


											
（转）OL2中设置鼠标的样式的更多相关文章
	

    
								
  1. 【Java】在JTable中设置鼠标监听器，点击操作对应数据
		
    最终效果 鼠标点击JTable中任一数据,修改相应的信息. 确定点击的行和列 package com.dao; import java.awt.event.MouseAdapter; import j ...
    
		
    2. 
						
  2. 对span设置鼠标光标样式
		
    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...
    
		
    3. 
						
  3. Extjs中设置只读的样式问题
		
    废话不多说,直接上代码:   view.down('#imageFile').hide(); view.down('#save_button').hide(); view.show(); view.d ...
    
		
    4. 
						
  4. flash中设置文本字体样式
		
    txt.setTextFormat(tf);  txt.defaultTextFormat = tf;
    
		
    5. 
						
  5. Html中<a>标签的样式的设置
		
    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
    
		
    6. 
						
  6. Qt中设置widget背景颜色/图片的注意事项（使用样式表 setStyleSheet()）
		
    在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...
    
		
    7. 
						
  7. wxpython 设置鼠标样式
		
    鼠标指针被设置为放大镜样式.可用的鼠标指针样式有: wx.CURSOR_ARROWwx.CURSOR_RIGHT_ARROWwx.CURSOR_BLANKwx.CURSOR_BULLSEYEwx.CU ...
    
		
    8. 
						
  8. Winform中设置ZedGraph曲线图的字体样式是避免出现边框
		
    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
    
		
    9. 
						
  9. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
		
    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 简单的事件处理类Event
			
    class Event{ constructor(){ this.handlers=[] } on(type,fn){ //订阅事件 if(!this.handlers[type]){ this.ha ...
    
			
    2. 
						
  2. Android 学习历程摘要（三）
			
    1.proguard混淆:对与Activity等不应进行混淆.否则系统将找不到生命周期函数:JSON字符串要考虑混淆之后是否会影响字段名:native方法也不混淆,否则调用不到 2.ListView的 ...
    
			
    3. 
						
  3. 未来 Web 设计的 7 大趋势
			
    1.手势代替点击 还记得曾经是怎样滚动网页的吗?将鼠标移到屏幕的右边缘,然后拖动古代称为"滚动栏"的玩意儿: 略微专业点的可能会使用鼠标滚轮,光标键或触控板,这已经率先于大多数的用 ...
    
			
    4. 
						
  4. [Vue @Component] Write Vue Functional Components Inline
			
    Vue's functional components are small and flexible enough to be declared inside of .vue file next to ...
    
			
    5. 
						
  5. iOS8開始默认语言有变化
			
    [问题] 測试组发现APP在iOS8及以上系统设备上,语言设置为我们不支持的小语种时.APP没有使用默认的英文,而是选择了上一次设置的语言. [分析] 经过研究发现,在iOS8系统開始,在设备语言设置 ...
    
			
    6. 
						
  6. 一致性哈希server的数据维护
			
    本文是实例说明一致性哈希server的数据维护用途. 理论说明參考:http://blog.csdn.net/chenjiayi_yun/article/details/41624603 例如以下图所 ...
    
			
    7. 
						
  7. C#趣味程序---九九乘法表
			
    using System; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { for  ...
    
			
    8. 
						
  8. Java大数练习第二弹
			
    hdu1250 水题 题目链接:pid=1250">http://acm.hdu.edu.cn/showproblem.php?pid=1250 import java.util.*; ...
    
			
    9. 
						
  9. java学习笔记：Eclipse打开现有项目
			
    初学JAVA,觉得困难重重. 多年来,已经习惯了微软系列的VS,现在使用Eclipse,觉得差别很大. 比如打开一个现有项目.并没有什么所谓的项目文件,如*.sln,*.cproj什么的.那怎么打开? ...
    
			
    10. 
						
  10. PCB javascript解析Gerber274X格式实现方法
			
    解析钻Gerber274X格式前首先得了解此格式,这样才能更好的解析呀. 一个Gerber274X里面包含的基本信息如下: 1.单位:公式mm,英制inch 2.省零方式:前省零,后省零 3.坐标方式 ...
    
			
    11.