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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue实现Toast组件轻提示
Apr 10 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
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python使用matplotlib画饼状图
2018/09/25 Python
python中退出多层循环的方法
2018/11/27 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
Python实现一个论文下载器的过程
2021/01/18 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
成立公司计划书
2014/05/07 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
2014年个人总结范文
2015/03/09 职场文书
2015年教师节感言
2015/08/03 职场文书
调研报告的主要写法
2019/04/18 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android