首页 > 代码库 > (转)OL2中设置鼠标的样式
(转)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?
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>openlayers map</title>
- <link rel="stylesheet" href=http://www.mamicode.com/"http://localhost/olapi/theme/default/style.css" type="text/css">
- <style>
- html, body{
- padding:0;
- margin:0;
- height:100%;
- width:100%;
- overflow: hidden;
- font-size: 12px;
- }
- #map1{
- width: 500px;
- height: 500px;
- float: left;
- overflow: hidden;
- border: 1px solid #f0e68c;
- }
- </style>
- <script src=http://www.mamicode.com/"../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
- <script src=http://www.mamicode.com/"../../../plugin/jquery/jquery-1.8.3.js"></script>
- <script>
- var map1;
- $(function(){
- var bounds = new OpenLayers.Bounds(
- 73.45100463562233, 18.16324718764174,
- 134.97679764650596, 53.531943152223576
- );
- var options = {
- controls: [],
- maxExtent: bounds,
- maxResolution: 0.2403351289487642,
- projection: "EPSG:4326",
- units: ‘degrees‘
- };
- map1 = new OpenLayers.Map(‘map1‘, options);
- var wms = new OpenLayers.Layer.WMS(
- "Geoserver layers - Tiled",
- "http://localhost:8088/geoserver/lzugis/wms",
- {
- "LAYERS": "province",
- "STYLES": ‘‘,
- format: ‘image/png‘
- },
- {
- buffer: 0,
- displayOutsideMaxExtent: true,
- isBaseLayer: true,
- yx : {‘EPSG:4326‘ : true}
- }
- );
- map1.addLayer(wms);
- map1.addControl(new OpenLayers.Control.Zoom());
- map1.addControl(new OpenLayers.Control.Navigation());
- map1.zoomToExtent(bounds);
- map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
- map1.events.register("move", map1, function(){
- map1.layerContainerDiv.style.cursor = ("url(img/closedhand.cur),default");
- });
- map1.events.register("moveend", map1, function(){
- map1.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
- });
- });
- </script>
- </head>
- <body>
- <div id="map1"></div>
- </body>
- </html>
(转)OL2中设置鼠标的样式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。