Openlayers显示地理位置坐标的方法


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了Openlayers显示地理位置坐标的具体代码,供大家参考,具体内容如下

1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和鼠标位置控件的容器;

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <script src="../lib/ol/ol.js"></script>
 <link href="../css/ol.css" rel="stylesheet" />
 <style type="text/css">
  #myposition
  {
   float:left;
   position:absolute;
   bottom:10px;
   width:400px;
   height:20px;
   z-index:2000;
  }
  .mosuePosition
  {
   color:blue;
   font-size:20px;
   font-family:'微软雅黑';
  }
 </style>
 <script type="text/javascript">
  window.onload = function () {
   //初始化鼠标位置控件
   var mousePositionControl = new ol.control.MousePosition({
    //样式类名称
    className: 'mosuePosition',
    //投影坐标格式,显示小数点后边多少位
    coordinateFormat: ol.coordinate.createStringXY(8),
    //指定投影
    projection: 'EPSG:4326',
    //目标容器
    target:document.getElementById('myposition')
   });
 
   //初始化地图容器
   var map = new ol.Map({
    target:'map',
    layers:[
     new ol.layer.Tile({
      source:new ol.source.OSM()
     }),
    ],
    view:new ol.View({
     center:[0,0],
     zoom:3
    })
   });
 
   //将鼠标位置坐标控件加入到map中
   map.addControl(mousePositionControl);
  }
 </script>
</head>
<body>
 <div id="map">
  <div id="myposition"></div>
 </div>
</body>
</html>

3、结果展示

当鼠标在地图上移动时,会在左下角显示当前位置的地理坐标

Openlayers显示地理位置坐标的方法

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

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
You might like
php GUID生成函数和类
2014/03/10 PHP
laravel学习教程之关联模型
2016/07/30 PHP
JavaScript使用cookie
2007/02/02 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
python web框架学习笔记
2016/05/03 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python3.6编写的单元测试示例
2019/08/17 Python
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
UML设计模式笔试题
2014/06/07 面试题
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
自荐信需注意事项
2014/01/25 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
二年级作文之动物作文
2019/11/13 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技