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>



  • 相关阅读:
    B0BO TFS 安装指南(转载)
    Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版
    huhamhire-hosts — Hosts文件自动配置工具
    JFinal tomcat配置根路径(包括windows和linux)
    JSON 之FastJson解析
    JFinal使用笔记1-部署demo项目到本地tomcat
    HDU 4891 The Great Pan
    FragmentActivity+FragmentTabHost+Fragement替代TabActibvity+TabHost+Activity
    HIT 2255 Not Fibonacci(矩阵高速幂)
    STM32学习之路-感觉自己走到了一个天大的坑里了!
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539805.html
Copyright © 2011-2022 走看看