OpenLayers3实现鼠标移动显示坐标


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了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" >
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <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 。

实现效果如下:

OpenLayers3实现鼠标移动显示坐标

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
js制作支付倒计时页面
Oct 21 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
js获取url页面id,也就是最后的数字文件名
Sep 25 #Javascript
OpenLayers3实现图层控件功能
Sep 25 #Javascript
OpenLayers实现图层切换控件
Sep 25 #Javascript
OpenLayers3实现对地图的基本操作
Sep 28 #Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 #Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 #Javascript
在webstorm中配置less的方法详解
Sep 25 #Javascript
You might like
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
建筑工程造价专业自荐信
2014/07/08 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
村官个人总结范文
2015/03/03 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
分析并发编程之LongAdder原理
2021/06/29 Java/Android
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技