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



  • 相关阅读:
    Confluence 6 配置服务器基础地址示例
    (七)git分支的操作
    (六)最最基本的git操作
    (四)创建表、查看表、插入记录
    (三)数据库基本操作(创建、查询、修改、删除数据库)
    c++第九天
    (五)使用GitHub的前期准备
    (四)github之Git的初始设置
    (三)github之GIT的导入
    (二)github的价值意义篇
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539805.html
Copyright © 2020-2023  润新知