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

概述：

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

实现方式：

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

  1. map.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
  1.  
  1. 在地图初始化完成后，设置地图的样式，并添加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. map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
  61. map1.events.register("move", map1, function(){
  62. map1.layerContainerDiv.style.cursor = ("url(img/closedhand.cur),default");
  63. });
  64. map1.events.register("moveend", map1, function(){
  65. map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
  66. });
  67. });
  68. </script>
  69. </head>
  70. <body>
  71. <div id="map1"></div>
  72. </body>
  73. </html>

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

  1. 【Java】在JTable中设置鼠标监听器，点击操作对应数据

    最终效果 鼠标点击JTable中任一数据,修改相应的信息. 确定点击的行和列 package com.dao; import java.awt.event.MouseAdapter; import j ...

  2. 对span设置鼠标光标样式

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

  3. Extjs中设置只读的样式问题

    废话不多说,直接上代码:   view.down('#imageFile').hide(); view.down('#save_button').hide(); view.show(); view.d ...

  4. flash中设置文本字体样式

    txt.setTextFormat(tf);  txt.defaultTextFormat = tf;

  5. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

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

    在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...

  7. wxpython 设置鼠标样式

    鼠标指针被设置为放大镜样式.可用的鼠标指针样式有: wx.CURSOR_ARROWwx.CURSOR_RIGHT_ARROWwx.CURSOR_BLANKwx.CURSOR_BULLSEYEwx.CU ...

  8. Winform中设置ZedGraph曲线图的字体样式是避免出现边框

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  9. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题

    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

随机推荐

  1. 【CV论文阅读】YOLO：Unified, Real-Time Object Detection

    YOLO的一大特点就是快,在处理上可以达到完全的实时.原因在于它整个检测方法非常的简洁,使用回归的方法,直接在原图上进行目标检测与定位. 多任务检测: 网络把目标检测与定位统一到一个深度网络中,而且可 ...

  2. 怎样在Linux下使用Markdown进行文档工作

    怎样在Linux下使用Markdown进行文档工作 在Linux系统中,编辑markdown能够用retext工具: sudo apt-get install retext retext Releas ...

  3. C#邮件发送(含附件)

    class SendEmail { static void Main(string[] args) { string from = "发件人@yingu.com"; string ...

  4. 小胖说事31------iOS 真机编译错误&quot;“XXX”的 iPod&quot; and run &quot;XXX&quot; again, or if &quot;XXX&quot; is still running

    在真机上測试时用一会就出现例如以下信息,且应用挂掉. Restore the connection to ""XXX"的 iPod" and run " ...

  5. JXLS-----JXLS导出Excel

  6. iOS_截屏并裁剪

    截图使用场景: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fil ...

  7. Angular常用标记

    (如果没有特别指明,则所有的HTML元素都支持该标记) (如果没有特别指明,则 AngularJS 指令不会覆盖原生js的指令) 1.数据绑定类: 1.插值语法:{{}} 2.标签内容绑定:ng-bi ...

  8. HDU 5446 CRT+Lucas+快速乘

    Unknown Treasure Problem Description On the way to the next secret treasure hiding place, the mathem ...

  9. Codeforces Round #273 (Div. 2)D. Red-Green Towers DP

    D. Red-Green Towers   There are r red and g green blocks for construction of the red-green tower. Re ...

  10. oc82--成员变量使用copy修饰

    // // Person.h #import <Foundation/Foundation.h> typedef void (^myBlock)(); @interface Person ...