(转)OL2中设置鼠标的样式
http://blog.csdn.net/gisshixisheng/article/details/49496289
概述:
在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%;
- 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>
(转)OL2中设置鼠标的样式的更多相关文章
- 【Java】在JTable中设置鼠标监听器,点击操作对应数据
最终效果 鼠标点击JTable中任一数据,修改相应的信息. 确定点击的行和列 package com.dao; import java.awt.event.MouseAdapter; import j ...
- 对span设置鼠标光标样式
<html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...
- Extjs中设置只读的样式问题
废话不多说,直接上代码: view.down('#imageFile').hide(); view.down('#save_button').hide(); view.show(); view.d ...
- flash中设置文本字体样式
txt.setTextFormat(tf); txt.defaultTextFormat = tf;
- Html中<a>标签的样式的设置
html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...
- wxpython 设置鼠标样式
鼠标指针被设置为放大镜样式.可用的鼠标指针样式有: wx.CURSOR_ARROWwx.CURSOR_RIGHT_ARROWwx.CURSOR_BLANKwx.CURSOR_BULLSEYEwx.CU ...
- Winform中设置ZedGraph曲线图的字体样式是避免出现边框
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
随机推荐
- Ubuntu 16.04下没有“用户和组”功能的问题解决
在16.04以前的版本会自带“用户和组”的功能,但是在16.04发现系统只自带了“用户账户”的功能. 问题解决: 1.安装gnome-system-tools sudo apt-get install ...
- mysql Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’
mysql Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’ 今天在linux中安装了mys ...
- sizeof小览
一.文章来由-一道面试题迁出的探究 我发现我已经形成一种习惯写来由了,以后看博客的时候能够让我回顾起为什么出现这个问题,我用什么方法解决的,既然形成习惯就让这个习惯保持下去吧.今天实验室师姐在看书,一 ...
- Codeforces Round #119 (Div. 2)A. Cut Ribbon
A. Cut Ribbon time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- 数组和字符串长度length
数组.length 字符串.length() list list.size();map map.size();set set.size();1 java中的length属性是针对数组说的,比如说你声明 ...
- [置顶]
Snow的追寻
题目描述 Snow终于得知母亲是谁,他现在要出发寻找母亲. 王国中的路由于某种特殊原因,成为了一棵有n个节点的根节点为1的树,但由于"Birds are everywhere.", ...
- CF85 E Guard Towers——二分图
题目:http://codeforces.com/contest/85/problem/E 给定一些点的坐标,求把它们分成两组,组内最大距离的最小值: 二分答案,判断就是看距离大于 mid 的点能否组 ...
- 新版chrome调整开发者工具位置方式改变
转自:https://blog.csdn.net/gsls200808/article/details/70244150 本文所指新版56.0.2924.87 (64-bit) 原来F12可以看到窗口 ...
- 如何为你的Go应用创建轻量级Docker镜像?
介绍 多什么? 简单来讲,多阶段. 多阶段允许在创建Dockerfile时使用多个from,它非常有用,因为它使我们能够使用所有必需的工具构建应用程序.举个例子,首先我们使用Golang的基础镜像,然 ...
- 一个thinkphhp的聊天类,感觉还可以
<?phpnamespace Common\Controller;use Think\Controller;class HxController extends Controller{ /** ...