OpenLayers3实现鼠标移动显示坐标
本文实例为大家分享了OpenLayers3实现鼠标移动显示坐标的具体代码，供大家参考，具体内容如下
1. 前言
鼠标移动显示坐标，OpenLayers 3 框架提供了鼠标移动显示坐标的控件（ol.control.MousePosition）,默认显示在地图的右上角，其样式可以自定义。在这个例子中，我们通过前面的加载 OSM 加载瓦片图层，实现在地图容器的左下角显示坐标点的信息。
2. 实现思路
（1）新建一个网页，参考前面的加载 OSM 瓦片地图，实现加载瓦片地图。
（2）在地图容器中新建一个 div 用于显示坐标信息，并设置其样式，通过设置 z-index 让其显示到地图上面。
（3）实例化一个鼠标位置控件（ol.control.MousePosition），可以根基实际的需求设置其，参数，例如坐标系（projection）、坐标值的显示格式（coordinateFormat）、关联显示鼠标位置坐标点的目标容器（target）等。
（4）在地图容器中加载到地图容器中。可以在实例化地图容器 Map 的代码中，通过设置 controlas 参数加载鼠标位置控件，也可以调用 map 对象的 addControl 方法加载控件。
3. 实现代码如下：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移动显示坐标信息</title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="css/ol.css" rel="external nofollow" >
<link rel="stylesheet" href="css/ZoomSlider.css" rel="external nofollow" >
<script src="js/ol.js"></script>
<script src="js/MousePosition.js"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
#mouse-position {
float: left;
position: absolute;
bottom: 5px;
width: 200px;
height: 20px;
/* 将z-index设置为显示在地图上层 */
z-index: 2000;
}
/* 显示鼠标信息的自定义样式设置 */
.custom-mouse-position {
color: red;
font-size: 16px;
font-family: "微软雅黑";
}
</style>
</head>
<body onload="init()">
<div id="map">
<div id="mouse-position"></div>
</div>
</body>
</html>
代码解析：
在地图容器中创建一个 div 用于显示坐标信息，并设置其样式，这个 div 层是是鼠标位置控件的最外层容器，它所包含的内层为鼠标信息文本标签，默认类名为 ol-mouse-position，可以自行定义。例如我们修改了他的字体大小以及颜色等。
js代码:
function init() {
// 实例化鼠标位置控件
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4), //坐标格式
projection: 'EPSG:4326', //地图投影坐标系
className: 'custom-mouse-position', //坐标信息显示样式
// 显示鼠标位置信息的目标容器
target: document.getElementById('mouse-position'),
undefinedHTML: ' ' //未定义坐标的标记
});
// 实例化Map对象加载地图
var map = new ol.Map({
target: 'map', //地图容器div的id
layers: [ //地图容器加载的图层
new ol.layer.Tile({ //加载瓦片图层数据
source: new ol.source.OSM() //数据源，加载OSM数据
})
],
view: new ol.View({
center: [102, 35],
zoom: 3
}),
// 加载控件到地图容器中
// 加载鼠标位置控件
controls: ol.control.defaults().extend([mousePositionControl])
});
}
代码解析
（1）coordinateFormat：坐标值的显示格式。
（2）projection：投影坐标系，将当前鼠标位置的坐标点设置为当前坐标系下的相应值进行显示。
（3）target：关联显示其坐标点信息的目标容器，即最外层容器元素，就是我们创建的 id 为mouse-position 的 div 元素。
（4）className：坐标信息采用的显示样式的类名即坐标值文本的样式类名，就是我们自定义的样式类名 custom-mouse-position 。
实现效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue-openlayers实现地图坐标弹框效果
本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma
-
openlayers实现图标拖动获取坐标
本文实例为大家分享了openlayers实现图标拖动获取坐标的具体代码,供大家参考,具体内容如下 本文所涉及的技术如下: openlayers加载国家天地图和浙江天地图,图标拖动获取位置,openlayers动画. 效果如下: 代码如下: var map; var dataResult; var app = {}; /** * @constructor * @extends {ol.interaction.Pointer} */ app.Drag = function() { ol.intera
-
OpenLayers3实现鼠标移动显示坐标
本文实例为大家分享了OpenLayers3实现鼠标移动显示坐标的具体代码,供大家参考,具体内容如下 1. 前言 鼠标移动显示坐标,OpenLayers 3 框架提供了鼠标移动显示坐标的控件(ol.control.MousePosition),默认显示在地图的右上角,其样式可以自定义.在这个例子中,我们通过前面的加载 OSM 加载瓦片图层,实现在地图容器的左下角显示坐标点的信息. 2. 实现思路 (1)新建一个网页,参考前面的加载 OSM 瓦片地图,实现加载瓦片地图. (2)在地图容器中新建一个
-
pyqt5移动鼠标显示坐标的方法
如下所示: # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import (QApplication, QMainWindow, QLabel) from PyQt5.QtCore import Qt class AppDemo(QMainWindow): def __init__(self): super(AppDemo, self).__init__() self.init_ui() def init_ui(self): sel
-
Python鼠标事件及坐标获取窗口和屏幕坐标
目录 效果如下: 分析: 重写关闭事件 重写上下文菜单事件 重写自带的绘制事件 也就是自定义 重新实现调整窗口大小事件 重新实现鼠标的释放事件 重新实现鼠标的移动事件 重新实现鼠标双击事件 重新实现键盘按下事件 源码如下 本文主要介绍重写自带的一些方法,拾取屏幕和窗口坐标信息 效果如下: 分析: 定时服务:在固定一段时间后执行相关的函数方法,例如这里表示的是在0秒后执行self.giveHelp这个方法 QTimer.singleShot(0, self.giveHelp) 重写关闭事件 def
-
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015
-
jQuery实现鼠标悬停显示提示信息窗口的方法
本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
JS+CSS实现感应鼠标渐变显示DIV层的方法
本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
BootStrap使用popover插件实现鼠标经过显示并保持显示框
在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas
-
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam
-
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
根据鼠标悬停显示.隐藏,回复和引用按钮 思路及原理 原理嘛很简单,如果你阅读过一页或者两页甚至更多页 Jquery 手册的话, 那么下面的原理解释你肯定能看懂,否则请跳至代码实现区域阅读. 思路很简单, 将回复.引用按钮放置在你想要的地方,CSS 样式设置 display:none; 绑定Jquery中的hover动作到你想要鼠标悬停后显示按钮的区域 是不是很简单?要是我以前写博客肯定会就此结束, 好吧,既然授人鱼那么继续--. 特效的代码实现部分 回复.引用的HTML代码 复制代码 代码如下:
-
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA