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. 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. Docker: Docker容器之间互相通信

    最简单的方法,关闭防火墙(只建议用于开发环境) systemctl stop firewalld

  2. String的&#39;+&#39;的性能及原理

    逛了几个论坛. 不少人在讨论String的"+",StringBuilder与StringBuffer等一系列的问题.先不多说了了 现分类详述: 1.String的'+',底层运行 ...

  3. ios7 真机调试 设置 bitcode

    用Xcode 7 beta 3在真机(iOS 8.3)上运行一下工程,结果发现工程编译不过.看了下问题,报的是以下错误: ld: ‘/Users/**/Framework/SDKs/PolymerPa ...

  4. 具体解释clone函数

    我们都知道linux中创建新进程是系统调用fork,但实际上fork是clone功能的一部分,clone和fork的主要差别是传递了几个參数.clone隶属于libc.它的意义就是实现线程. 看一下c ...

  5. Linux设备驱动模型【转】

    本文转载自:http://blog.csdn.net/xiahouzuoxin/article/details/8943863 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+ ...

  6. 第二章 在Html中使用JavaScript

    https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...

  7. YTU 2750: 猜算式

    2750: 猜算式 时间限制: 1 Sec  内存限制: 128 MB  Special Judge 提交: 22  解决: 1 题目描述 看下面的算式: □□ x □□ = □□ x □□□ 它表示 ...

  8. 【Codevs1322】单词矩阵

    Position: http://codevs.cn/problem/1322/ List Codevs1322 单词矩阵 List Description Input Output Sample I ...

  9. 洛谷 P4149 [ IOI 2011 ] Race —— 点分治

    题目:https://www.luogu.org/problemnew/show/P4149 仍然是点分治: 不过因为是取 min ,所以不能用容斥,那么子树之间就必须分开算,记录桶时注意这个: 每次 ...

  10. poj3539 Elevator——同余类bfs

    题目:http://poj.org/problem?id=3539 题目大意是给定 a, b, c,求 1~h 内有多少个数可以被 a, b, c 通过加减法组成: 这是今天刚讲的神奇的——同余类 b ...