地图经纬度转换(百度,高德,谷歌,Leaflet)-程序员宅基地

技术标签: 踩坑  vue.js  map  

地图经纬度转换(百度,高德,谷歌,Leaflet)

-----因项目需求,要把百度地图的经纬度转换成Leaflet经纬度,感谢leaflet群里一个老哥提供的坐标转换插件(gcoord)-----

常用地图的经纬度一般为这几种格式:GCJ02BD09WGS84(既EPSG:4326)EPSG:3857(基于墨卡托坐标系)

高德、腾讯(使用GCJ02)

  1. GCJ-02坐标系,也称火星坐标系,由中国国家测绘局在02年发布,是在GPS坐标(WGS-84坐标系)基础上经加密后而来。

谷歌(使用GCJ02和WGS84)

  1. 谷歌国内版经纬度用的 GCJ02(又名 国测局 或 火星坐标 )。

    国外版用的是WGS84,通常【GPS设备获取到的原始经纬度和国外的地图厂商使用的都是WGS-84坐标系】,此外它的EPSG编号为EPSG:4326

百度(使用BD09)

  1. BD09坐标,是在的GCJ02基础上再加密得到

Leaflet(默认使用EPSG:3857,也可以使用WGS84)

  1. EPSG:3857是平面坐标系,单位是米,它基于墨卡托投影,例如: [12914838.35, 4814529.9]
  2. 详细解释:GCJ02BD09WGS84都是地理坐标系,球面坐标,单位为,这种坐标方便在地球上定位,但是不方便展示和进行面积距离计算,我们印象中的地图都是平面的,所以就有了另外一种平面坐标系,平面坐标系是通过投影的方式从地理坐标系中转换过来,所以也称为投影坐标系,通常单位为,投影坐标系根据投影方式的不同存在多种,在Web开发的场景里通常使用的是Web墨卡托投影,编号为EPSG:3857,它基于墨卡托投影,把WGS-84坐标系投影成正方形,这是通过舍弃了南北85.051129纬度以上的地区实现的,因为它是正方形,所以一个大的正方形可以很方便的被分割为更小的正方形。

如何将xy轴坐标与经纬度坐标互转

  1. 在一般情况下,想要把EPSG:3857的坐标在球面坐标系上使用时,必须转换成经纬度坐标,方法如下:

    //  EPSG3857 xy轴坐标 转 经纬度坐标
    const Convert_EPSG3857_To_Default3857 = (lat, lng) => {
          
      let tempLng = lng/20037508.34*180;
      let tempLat = lat/20037508.34*180;
      tempLat = 180/Math.PI*(2*Math.atan(Math.exp(tempLat*Math.PI/180))-Math.PI/2);
      return {
          
        lng: lng == 0 ? 0 : tempLng,
        lat: lat == 0 ? 0 : tempLat
      };
    };
    //  经纬度坐标 转 EPSG3857 xy轴坐标
    const Convert_Default3857_To_EPSG3857 = (lat, lng) => {
          
      let mercator = {
          };
      let x = lng * 20037508.34 / 180;
      let y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
      y = y * 20037508.34 / 180;
      mercator.x = x;
      mercator.y = y;
      return {
          
        lng: lng == 0 ? 0 : mercator.x,
        lat: lat == 0 ? 0 : mercator.y
      };
    };
    

各种经纬度坐标互转

  1. 通过插件进行转换

    // 百度 转 EPSG3857
    const Convert_BD09_To_EPSG3857 = (lat, lng) => {
          
      // 使用工具将百度经纬度直接转成EPSG:3857
      let result = gcoord.transform(
        [lng, lat],        // 经纬度坐标
        gcoord.BD09,       // 当前坐标系
        gcoord.EPSG3857    // 目标坐标系
      );
      return {
          
        lng: lng == 0 ? 0 : result[0],
        lat: lat == 0 ? 0 : result[1]
      };
    };
    // EPSG3857 转 百度
    const Convert_EPSG3857_To_BD09 = (lat, lng) => {
          
      // 使用工具将EPSG:3857经纬度直接转成百度经纬度
      let result = gcoord.transform(
        [lng, lat],    		// 经纬度坐标
        gcoord.EPSG3857,	// 当前坐标系
        gcoord.BD09         // 目标坐标系
      );
      return {
          
        lng: lng == 0 ? 0 : result[0],
        lat: lat == 0 ? 0 : result[1]
      };
    };
    

    注:如想要 leaflet 地图使用源码可私信我或评论区留邮箱

坐标转换(插件 gcoord )

插件使用方法:

// 引入插件 gcoord,(摘自插件文档)
let result = gcoord.transform(
  [116.403988, 39.914266],    // 经纬度坐标
  gcoord.WGS84,               // 当前坐标系
  gcoord.BD09                 // 目标坐标系
);
console.log(result);  // [116.41661560068297, 39.92196580126834]
// 当前坐标和目标坐标就是下面的 CRS,找到对应的值,进行转换即可

附gcoord文档内,各种经纬度说明:

CRS 坐标格式 说明
gcoord.WGS84 [lng,lat] WGS-84坐标系,GPS设备获取的经纬度坐标
gcoord.GCJ02 [lng,lat] GCJ-02坐标系,google中国地图、soso地图、aliyun地图、mapabc地图和高德地图所用的经纬度坐标
gcoord.BD09 [lng,lat] BD-09坐标系,百度地图采用的经纬度坐标
gcoord.BD09LL [lng,lat] 同BD09
gcoord.BD09MC [x,y] BD-09米制坐标,百度地图采用的米制坐标,单位:米
gcoord.BD09Meter [x,y] 同BD09MC
gcoord.Baidu [lng,lat] 百度坐标系,BD-09坐标系别名,同BD-09
gcoord.BMap [lng,lat] 百度地图,BD-09坐标系别名,同BD-09
gcoord.AMap [lng,lat] 高德地图,同GCJ-02
gcoord.WebMercator [x,y] Web Mercator投影,墨卡托投影,同EPSG3857,单位:米
gcoord.WGS1984 [lng,lat] WGS-84坐标系别名,同WGS-84
gcoord.EPSG4326 [lng,lat] WGS-84坐标系别名,同WGS-84
gcoord.EPSG3857 [x,y] Web Mercator投影,同WebMercator,单位:米
gcoord.EPSG900913 [x,y] Web Mercator投影,同WebMercator,单位:米

注:[插件github地址](GitHub - hujiulong/gcoord: 地理坐标系转换工具)

参考:[墨卡托坐标系与经纬度坐标系互相转换](墨卡托坐标系与经纬度坐标系互相转换 - 简书 (jianshu.com))

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42116924/article/details/117816754

智能推荐

苹果https java_apple登录 后端java实现最终版-程序员宅基地

文章浏览阅读298次。import com.alibaba.fastjson.JSONArray;import com.alibaba.fastjson.JSONObject;import com.auth0.jwk.Jwk;import com.helijia.appuser.modules.user.vo.AppleCredential;import com.helijia.common.api.model.Api..._com.auth0.jwk.jwk

NLP学习记录(六)最大熵模型MaxEnt_顺序潜在最大熵强化学习(maxent rl)-程序员宅基地

文章浏览阅读4.7k次。原理在叧掌握关于未知分布的部分信息的情况下,符合已知知识的概率分布可能有夗个,但使熵值最大的概率分布最真实地反映了事件的的分布情况,因为熵定义了随机变量的不确定性,弼熵值最大时,随机变量最不确定,最难预测其行为。最大熵模型介绍我们通过一个简单的例子来介绍最大熵概念。假设我们模拟一个翻译专家的决策过程,关于英文单词in到法语单词的翻译。我们的翻译决策模型p给每一个单词或短语分配一..._顺序潜在最大熵强化学习(maxent rl)

计算机毕业设计ssm科研成果管理系统p57gs系统+程序+源码+lw+远程部署-程序员宅基地

文章浏览阅读107次。计算机毕业设计ssm科研成果管理系统p57gs系统+程序+源码+lw+远程部署。springboot基于springboot的影视资讯管理系统。ssm基于SSM高校教师个人主页网站的设计与实现。ssm基于JAVA的求职招聘网站的设计与实现。springboot校园头条新闻管理系统。ssm基于SSM框架的毕业生离校管理系统。ssm预装箱式净水站可视化信息管理系统。ssm基于SSM的网络饮品销售管理系统。

Caused by: org.xml.sax.SAXParseException; lineNumber: 38; columnNumber: 9; cvc-complex-type.2.3: 元素_saxparseexception; linenumber: 35; columnnumber: 9-程序员宅基地

文章浏览阅读1.6w次。不知道大家有没有遇到过与我类似的报错情况,今天发生了此错误后就黏贴复制了报错信息“Caused by: org.xml.sax.SAXParseException; lineNumber: 38; columnNumber: 9; cvc-complex-type.2.3: 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”。”然后就是一顿的百度啊, 可一直都没有找到..._saxparseexception; linenumber: 35; columnnumber: 9; cvc-complex-type.2.3:

计算机科学与技术创新创业意见,计算机科学与技术学院大学生创新创业工作会议成功举行...-程序员宅基地

文章浏览阅读156次。(通讯员 粟坤萍 2018-04-19)4月19日,湖北师范大学计算机科学与技术学院于教育大楼学院会议室1110成功召开大学生创新创业工作会议。参与本次会议的人员有党总支副书记黄海军老师,创新创业学院吴杉老师,计算机科学与技术学院创新创业活动指导老师,15、16、17级各班班主任及学生代表。首先吴杉老师介绍了“互联网+”全国大学生创新创业大赛的相关工作进度,动员各级班主任充分做好“大学生创新创业大..._湖北师范 吴杉

【Android逆向】爬虫进阶实战应用必知必会-程序员宅基地

文章浏览阅读1.1w次,点赞69次,收藏76次。安卓逆向技术是一门深奥且充满挑战的领域。通过本文的介绍,我们了解了安卓逆向的基本概念、常用工具、进阶技术以及实战案例分析。然而,逆向工程的世界仍然在不断发展和变化,新的技术和方法不断涌现。展望未来,随着安卓系统的不断更新和加固,逆向工程将面临更大的挑战。同时,随着人工智能和机器学习技术的发展,我们也许能够看到更智能、更高效的逆向工具和方法的出现。由于篇幅限制,本文仅对安卓逆向技术进行了介绍和案例分析。

随便推点

Python数据可视化之环形饼图_数据可视化绘制饼图或圆环图-程序员宅基地

文章浏览阅读1.1k次。制作饼图还需要下载pyecharts库,Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。随着学习python的热潮不断增加,Python数据可视化也不停的被使用,那我今天就介绍一下Python数据可视化中的饼图。在我们的生活和学习中,编程是一项非常有用的技能,能够丰富我们的视野,为各行各业的领域提供了新的角度。环形饼图的制作并不难,主要是在于数据的打包和分组这里会有点问题,属性的标签可以去 这个网站进行修改。图中的zip压缩函数,并分组打包。_数据可视化绘制饼图或圆环图

SpringMVC开发技术~5~基于注解的控制器_jsp/servlet到controller到基于注解的控制器-程序员宅基地

文章浏览阅读325次。1 Spring MVC注解类型Controller和RequestMapping注释类型是SpringMVC API最重要的两个注释类型。基于注解的控制器的几个优点:一个控制器类可以控制几个动作,而一个实现了Controller接口的控制器只能处理一个动作。这就允许将相关操作写在一个控制器类内,从而减少应用类的数量基于注解的控制器的请求映射不需要存储在配置文件中,而是使用RequestM..._jsp/servlet到controller到基于注解的控制器

利用波特图来满足动态控制行为的要求-程序员宅基地

文章浏览阅读260次,点赞3次,收藏4次。相位裕量可以从增益图中的交越频率处读取(参见图2)。使用的开关频率、选择的外部元件(例如电感和输出电容),以及各自的工作条件(例如输入电压、输出电压和负载电流)都会产生巨大影响。图2所示为波特图中控制环路的增益曲线,其中提供了两条重要信息。对于图2所示的控制环路,这个所谓的交越频率出现在约80 kHz处。通过使用波特图,您可以查看控制环路的速度,特别是其调节稳定性。图2. 显示控制环路增益的波特图(约80 kHz时,达到0 dB交越点)。图3. 控制环路的相位曲线,相位裕量为60°。

Glibc Error: `_obstack@GLIBC_2.2.5‘ can‘t be versioned to common symbol ‘_obstack_compat‘_`_obstack@glibc_2.2.5' can't be versioned to commo-程序员宅基地

文章浏览阅读1.8k次。Error: `_obstack@GLIBC_2.2.5’ can’t be versioned to common symbol '_obstack_compat’原因:https://www.lordaro.co.uk/posts/2018-08-26-compiling-glibc.htmlThis was another issue relating to the newer binutils install. Turns out that all was needed was to initi_`_obstack@glibc_2.2.5' can't be versioned to common symbol '_obstack_compat

基于javaweb+mysql的电影院售票购票电影票管理系统(前台、后台)_电影售票系统javaweb-程序员宅基地

文章浏览阅读3k次。基于javaweb+mysql的电影院售票购票电影票管理系统(前台、后台)运行环境Java≥8、MySQL≥5.7开发工具eclipse/idea/myeclipse/sts等均可配置运行适用课程设计,大作业,毕业设计,项目练习,学习演示等功能说明前台用户:查看电影列表、查看排版、选座购票、查看个人信息后台管理员:管理电影排版,活动,会员,退票,影院,统计等前台:后台:技术框架_电影售票系统javaweb

分分钟拯救监控知识体系-程序员宅基地

文章浏览阅读95次。分分钟拯救监控知识体系本文出自:http://liangweilinux.blog.51cto.com0 监控目标我们先来了解什么是监控,监控的重要性以及监控的目标,当然每个人所在的行业不同、公司不同、业务不同、岗位不同、对监控的理解也不同,但是我们需要注意,监控是需要站在公司的业务角度去考虑,而不是针对某个监控技术的使用。监控目标1.对系统不间断实时监控:实际上是对系统不间..._不属于监控目标范畴的是 实时反馈系统当前状态

推荐文章

热门文章

相关标签