（转）OL2中设置鼠标的样式

http://blog.csdn.net/gisshixisheng/article/details/49496289

概述：

在OL2中，鼠标默认是箭头，地图移动时，鼠标样式是移动样式；很多时候，为了形象起见，我们总是希望鼠标在地图上的时候和移动地图的时候鼠标的样式不是默认的效果，本文讲述如何实现这样的效果。

实现方式：

通过下面的代码实现修改鼠标样式。

map.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default");

在地图初始化完成后，设置地图的样式，并添加map的move和moveend事件，实现的完整代码如下：

[html] view plaincopy print?

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

转载于:https://www.cnblogs.com/telwanggs/p/6972491.html

（转）OL2中设置鼠标的样式相关推荐

JavaScript中改变鼠标指针样式的方法
JavaScript中改变鼠标指针样式的方法在js中我们可以通过style对象的cursor属性来设置鼠标指针的样式,例 var body = document.querySelector(&quo ...
在Qt中设置鼠标光标形状的方法介绍
本文主要介绍在 Qt 中设置鼠标光标形状的方法. 说明: 本文中的应用程序是面向 Windows 操作系统的: 本文中使用的 Qt Creator 版本号为:7.0.0: 本文中使用的 Qt 版本号为 ...
HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...
本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) ...
在html中设置全局字体样式
背景需要对一个没有设置布局样式的html文档中所有文字样式进行修改,作为一个不是很了解前端开发的人来说,自然是想有没有那种比较简单,能在html中加几行代码就把所有段落字体样式进行统一修改的案例,网 ...
Vue中设置class类样式
vue中通过属性绑定为元素设置class类样式 vue中class类样式的4种绑定方式 1.数组 2.三元表达式 3.数组嵌套对象 4.直接使用对象 vue中class类样式的4种绑定方式 1.数组 ...
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
java jtable 监听事件_【Java】在JTable中设置鼠标监听器，点击操作对应数据
最终效果鼠标点击JTable中任一数据,修改相应的信息. 确定点击的行和列 package com.dao; import java.awt.event.MouseAdapter; import j ...
css中设置鼠标形状的函数,css怎样设置鼠标的形状
css怎样设置鼠标的形状发布时间:2020-11-13 10:10:40 来源:亿速云阅读:91 作者:小新小编给大家分享一下css怎样设置鼠标的形状,相信大部分人都还不怎么了解,因此分享这篇文 ...
qml 鼠标点击_qml中设置鼠标样式
部分代码有改动,为的是在QML中实现动态更改鼠标图案的效果! 目的:在qml中,当鼠标移动到一个位置(区域)时候(或其它的触发事件),改变鼠标的图案: 前提:自己定义了一个declarativevie ...

（转）OL2中设置鼠标的样式

（转）OL2中设置鼠标的样式相关推荐

最新文章

热门文章