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

本文实例为大家分享了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、结果展示

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • OpenLayers3实现鼠标移动显示坐标

    本文实例为大家分享了OpenLayers3实现鼠标移动显示坐标的具体代码,供大家参考,具体内容如下 1. 前言 鼠标移动显示坐标,OpenLayers 3 框架提供了鼠标移动显示坐标的控件(ol.control.MousePosition),默认显示在地图的右上角,其样式可以自定义.在这个例子中,我们通过前面的加载 OSM 加载瓦片图层,实现在地图容器的左下角显示坐标点的信息. 2. 实现思路 (1)新建一个网页,参考前面的加载 OSM 瓦片地图,实现加载瓦片地图. (2)在地图容器中新建一个

  • openlayers实现图标拖动获取坐标

    本文实例为大家分享了openlayers实现图标拖动获取坐标的具体代码,供大家参考,具体内容如下 本文所涉及的技术如下: openlayers加载国家天地图和浙江天地图,图标拖动获取位置,openlayers动画. 效果如下: 代码如下: var map; var dataResult; var app = {}; /** * @constructor * @extends {ol.interaction.Pointer} */ app.Drag = function() { ol.intera

  • vue-openlayers实现地图坐标弹框效果

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

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

    本文实例为大家分享了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

  • Openlayers显示瓦片网格信息的方法

    本文实例为大家分享了Openlayers显示瓦片网格信息的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content

  • destoon切换城市后实现logo旁边显示地区名称的方法

    本文讲述了destoon切换城市后实现logo旁边显示地区名称的方法,针对不同地区建设分站的情况非常适用. 一般来说,当我们进入网站后默认的是总站,当我们开启城市分站的时候,点击选择分站后,在logo的旁边可以看到你选的城市分站名称,当选择全国的时候在logo旁边什么也不显示. 具体实现方法如下: 打开模板文件的header.htm的文件,将 {if $cityid} <span id="destoon_city">{$city_name}</span>{/if

  • 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"

  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

  • css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    <html>    <head>    <meta http-equiv="Content-Type" c>    <title>css把超出的部分显示为省略号的方法兼容火狐_我们_www.jb51.n

  • Node.js发送HTTP客户端请求并显示响应结果的方法示例

    Node.js发送HTTP客户端请求并显示响应结果的方法示例

    本文实例讲述了Node.js发送HTTP客户端请求并显示响应结果的方法.分享给大家供大家参考,具体如下: wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求. data事件在数据到达时被触发,error事件在发生错误时被触发. HTTP请求中的数据格式通过MIME协议来声明,例如,提交HTML表单时它的Content-Type会被设置成multipart/form-data. 要在HTTP客户端请求中发送数据,只需调用.write方法并写入符合规范

  • bootstrap-datetimepicker实现只显示到日期的方法

    bootstrap-datetimepicker实现只显示到日期的方法

    本文实例讲述了bootstrap-datetimepicker实现只显示到日期的方法.分享给大家供大家参考,具体如下: bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1.引入 <link href="Public/css/bootstrap.min.css" type="text/css" rel="

  • python下载文件时显示下载进度的方法

    本文实例讲述了python下载文件时显示下载进度的方法.分享给大家供大家参考.具体分析如下: 将这段代码放入你的脚本中,类似:urllib.urlretrieve(getFile, saveFile, reporthook=report) 第三个参数如下面的函数定义report,urlretrieve下载文件时会实时回调report函数,显示下载进度 def report(count, blockSize, totalSize): percent = int(count*blockSize*10

  • javascript控制层显示或隐藏的方法

    本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

随机推荐