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>



  • 相关阅读:
    10分钟用JS实现微信 "炸屎"大作战
    基于nodejs 的多页面爬虫
    react+react-router 4.0+redux 构建购物车实战项目
    vue+websocket+express+mongodb实战项目(实时聊天)
    用vuejs仿网易云音乐(实现听歌以及搜索功能)
    js 实现 bind 的这五层,你在第几层?
    教你如何搭建一个自动化构建的博客
    vue-chat项目之重构与体验优化
    vue+websocket+express+mongodb实战项目(实时聊天)(二)
    css 多栏自适应布局
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539805.html
Copyright © 2011-2022 走看看