（转）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. 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>
    74. 

				


				
时间： 2024-08-08 02:05:06 

		


		


	

	
	

		


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


								

		

			

                Extjs中设置只读的样式问题
			

		

		

									

				废话不多说,直接上代码:   view.down('#imageFile').hide(); view.down('#save_button').hide(); view.show(); view.down('form #contentPanel').items.each(function(item, index, length) { item.setReadOnly(true); item.getEl().down('.x-form-field').addCls("required"			

		

	

				

		

			

                html中设置滚动条的样式
			

		

		

									

				一.效果图 二.css ::-webkit-srollbar-track-piece{background:none;-webkit-border-radius:0;} ::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#bbbbbb;-webkit-border-radius:4px;outline:0px solid #fffff			

		

	

				

		

			

                设置鼠标光标方法
			

		

		

									

				一.在MFC中设置鼠标光标 1.载入系统光标 ::SetCursor( ::LoadCursor( NULL, IDC_HAND )  ); 注意: LoadCursor第一个参数必须为NULL,否则会载入失败.如果以以下方式调用,则会失败: ::SetCursor(  ::LoadCursor( AfxGetApp()->LoadCursor( IDC_HAND ) ) ); 或::SetCursor( ::LoadCursor( AfxGetInstanceHandle(), IDC_HAN			

		

	

				

		

			

                unity中自定义鼠标样式
			

		

		

									

				在用unity制作游戏过程中,运行游戏时,有没有感觉到原来的鼠标看着是不是特别不爽了?反正我是看腻了,哈哈! 下面来看看自定义鼠标样式的自作:首先你需要在unity中将图片的样式改为Cursor类型的: 然后我们来看看代码: public Texture2D cursorTexture;    //在外面为该变量赋值; void OnGUI() {      Vector2 mouse_Pos=Input.MousePosition;      GUI.DrawTexture(new Rect(			

		

	

				

		

			

                CSS中cursor 鼠标指针光标样式（形状）
			

		

		

									

				在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被			

		

	

				

		

			

                css样式表中设置table的第一列的宽度是固定值
			

		

		

									

				table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的宽度都会和他一样. *注意 第一行 第一个用的是 td 还是 th css样式表中设置table的第一列的宽度是固定值,布布扣,bubuko.com			

		

	

				

		

			

                Qt中设置widget背景颜色/图片的注意事项（使用样式表 setStyleSheet()）
			

		

		

									

				在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易陷入麻烦中. 1:setStyleSheet() 这个函数我一直很喜欢使用,因为只要写一句就可以实现效果,比其他方法都简单,但是其却有一个很值得注意的地方,也就是这个地方让我大吃苦头. 亦即:①:该函数只能用于设置有父窗口的子窗口的背景!如果一个窗口没有子窗口,则无法使用该函数来设置背景颜色或图  			

		

	

				

		

			

                wxpython 设置鼠标样式
			

		

		

									

				鼠标指针被设置为放大镜样式.可用的鼠标指针样式有: wx.CURSOR_ARROWwx.CURSOR_RIGHT_ARROWwx.CURSOR_BLANKwx.CURSOR_BULLSEYEwx.CURSOR_CHARwx.CURSOR_CROSSwx.CURSOR_HANDwx.CURSOR_IBEAMwx.CURSOR_LEFT_BUTTONwx.CURSOR_MAGNIFIERwx.CURSOR_MIDDLE_BUTTONwx.CURSOR_NO_ENTRYwx.CURSOR_PAINT_			

		

	

				

		

			

                制作由下向上的滚动字幕，字幕内容要求包含网站超级链接和图片超级链接，     		       使用鼠标移动事件控制字幕运动和停止。 			2、在下拉列表框中设置五种以上颜色，选择颜色后， 			       滚动字幕背景色改变成相应颜色
			

		

		

									

				<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        时间:2016-12-28        描述:1.制作由下向上的滚动字幕,字幕内容要求包含网站超级链接和图片超级链接,                   使用鼠标移动事件控制