zoukankan      html  css  js  c++  java
  • 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%;
                100%;
                overflow: hidden;
                font-size: 12px;
            }
            #map1{
                 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>



  • 相关阅读:
    python基础5之装饰器
    python基础4之递归、lambda、深浅copy
    python基础3之文件操作、字符编码解码、函数介绍
    python基础1之python介绍、安装、变量和字符编码、数据类型、输入输出、数据运算、循环
    python基础2之字符串、列表、字典、集合
    Mysql主从复制的实现
    LNMP一键安装脚本
    LNMP搭建(CentOS 6.3+Nginx 1.2.0+PHP 5.3.15(fpm)+ MySQL 5.5.35)
    整合apache+tomcat+keepalived实现高可用tomcat集群
    浅谈CSRF
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539805.html
Copyright © 2011-2022 走看看