OL2中设置鼠标的样式

概述：

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


实现方式：

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

map.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");
在地图初始化完成后，设置地图的样式，并添加map的move和moveend事件，实现的完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="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="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="../../../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>



   






	
posted on 
2015-10-29 20:50 
LZU-GIS 
阅读(210) 
评论(0) 
编辑 
收藏 
举报