OL2中设置鼠标的样式

lzugis

发布于 2018-10-23 12:17:05

7180

发布于 2018-10-23 12:17:05

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述：

在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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015年10月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

html