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 相关文章推荐
javascript数组去重方法终极总结
Jun 05 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 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
杏林同学录(五)
2006/10/09 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
在视频前插入广告
2006/11/20 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python程序输出无内容的解决方式
2020/04/09 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
买房子个人收入证明
2014/01/16 职场文书
老师的检讨书
2014/02/23 职场文书
党员干部承诺书
2014/03/25 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
党员服务承诺书
2014/05/28 职场文书
师德模范事迹材料
2014/06/03 职场文书
教师工作失职检讨书
2014/09/18 职场文书
小学教育见习报告
2014/10/31 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL