前端小知识--地图坐标转换

liangdas 发布于2019-08-22 15:08 / 544人阅读

摘要：实际中我们可能会用到不同的地图，那么就对应到不同坐标系的转换，比如说，你有一份的数据服务，你要展现在百度或者高德地图上，这时候你就需要转换了。

地图坐标转换

LBS，基于位置的服务（Location Based Service)，近年来已经无处不在，尤其是我们前端，相信或多或少都有接触一些地图API服务，比如高德、百度啊、谷歌啊~
但是用的时候可能看到下面这些字眼：比如BD09、火星坐标、WGS84……不由得还是蒙圈了啊?

那么接下来，我们就来了解一下，关于当前用到的一些互联网地图的基础坐标转换知识~

0、首先给大家出一个题

地图上的经纬度转换到平面坐标时，和平面坐标的XY的对应关系是什么，就是经度（longitude）和维度（latitude）分别给对应X,Y中的谁？

这是在实际中经常会用到的一个知识点，我之前没有想太多，反正就把数值往里尝试，因为位置差异很大，正确还是错误一眼就看出来了的，但是这样其实很不好，被师兄说了，我一个GISer的连这个都弄不明白不应该，哈哈哈。不求甚解是可以的，但是专业性还是要强化的。

来看看上面的图：
经纬度大家都知道，地球上横线是纬度，纵线是经度。
这也导致了我们下意识就会觉得，横线是X，纵线是Y。这样的认知显然是错误的。

但其实，横线是刻画了Y轴上的刻度，纵线是刻画了X轴上的刻度，这里要用到投影的角度来看问题。

所以大家要记住经纬XY
经度（longitude） —— 对应 X
维度（ latitude ） —— 对应 Y

一、当前互联网地图的坐标系现状 1.地球坐标 (WGS84)

国际标准，从专业GPS 设备中取出的数据的坐标系
国际地图提供商使用的坐标系

2.火星坐标 (GCJ-02)也叫国测局坐标系

中国标准，从国行移动设备中定位获取的坐标数据使用这个坐标系
国家规定：国内出版的各种地图系统（包括电子形式），必须至少采用GCJ-02对地理位置进行首次加密。

3.百度坐标 (BD-09)

百度标准，百度 SDK，百度地图，Geocoding 使用
(百度在火星坐标上的二次加密)

二、互联网在线地图使用的坐标系

火星坐标系：

    iOS 地图（其实是高德）
    Gogole地图
    搜搜、阿里云、高德地图

百度坐标系：

    当然只有百度地图

WGS84坐标系：

    国际标准，谷歌国外地图、osm地图等国外的地图一般都是这个

三、从设备获取经纬度（GPS）坐标

  如果使用的是百度sdk那么可以获得百度坐标（bd09）或者火星坐标（GCJ02),默认是bd09
  如果使用的是ios的原生定位库，那么获得的坐标是WGS84
  如果使用的是高德sdk,那么获取的坐标是GCJ02

四、坐标转换方法--JS版本

我在之前的一篇文章里，基于Ionic框架的使用讲到了地图定位：ionic2入门教程（六）地图服务（谷歌、高德、百度定位），现在重新写一个小demo来实现我们的坐标转换。
关于方法，我找到了应该是最通用的一种，源码地址——作者wandergis，大部分的转换方式应该都是基于他的这个版本，相关说明也是最清楚的。
实际中我们可能会用到不同的地图，那么就对应到不同坐标系的转换，比如说，你有一份wgs84的数据服务，你要展现在百度或者高德地图上，这时候你就需要转换了。
我这里的例子是，我用到百度搜索地名，得到经纬度，但是我要将它绘制在以84为坐标系的地图leaflet之上，这时候我就需要将返回的经纬度进行转换。
我们先用百度搜索广州塔，定位中心

基于我们选择的OpenStreetMap，未转换之前，我们用百度搜索广州塔返回的值画点，可以看出很明显是偏移了的：

    百度地名搜索
    
    
    

    
    
        myGeo.getPoint(searchVal, function (point) {
                if (point) {
                    console.log(point);
                    // bd09->gcj02
                    var myPoint = coordtransform.bd09togcj02(point.lng, point.lat);
                    console.log(myPoint);
                    // gcj02->wgs84
                    var myPoint2 = coordtransform.gcj02towgs84(myPoint[0], myPoint[1]);
                    console.log(myPoint2);
                    var latlng = L.latLng([myPoint[1], myPoint[0]]);
                    var latlng2 = L.latLng([myPoint2[1], myPoint2[0]]);
                    // 画点
                    L.marker(point).addTo(mymap);
                    L.marker(latlng).addTo(mymap);
                    L.marker(latlng2).addTo(mymap);
                    // 设置中心
                    mymap.setView([point.lat, point.lng], 13);
                } else {
                    alert("您选择地址没有解析到结果!");
                }
            }, "广州市");
源码：https://github.com/JiaXinYi/i...
五、EPSG:3857
如果你用到了leaflet/openlayers/arcgis jsAPI的话，应该还有一个点需要了解
这个算是题外话，因为一般都是学gis的才会用到这些，一般情况下百度高德这些大概都能够满足需求了。
像用到这些地图的情况，经常会涉及到EPSG:3857 或者OpenLayers:900913，acrgis： 102100(3857)。
EPSG:3857 其实是EPSG协会（European Petroleum Survey Group）为 Web Wercator 最终设立的WKID，也就是现在我们常用的Web 地图的坐标系，并且给定官方命名 “WGS 84 / Pseudo-Mercator“。
Web Mercator 是一个投影坐标系统，其基准面是 WGS 1984 。
WGS 1984 是一个长半轴(a)为6378137，短半轴（b）为6356752.314245179 的椭球体，扁率(f)为298.257223563，f=(a-b)/a 。

但是，Web Mercator 坐标系使用的投影方法不是严格意义的墨卡托投影而是一个被 EPSG称为伪墨卡托的投影方法，这个伪墨卡托投影方法的大名是 Popular Visualization Pseudo Mercator，PVPM。
Google 最先发明了这套系统，在投影过程中，将表示地球的参考椭球体近似的作为正球体处理（正球体半径 R = 椭球体半长轴 a）。
后来，Web Mercator 在 Web 地图领域被广泛使用，这个坐标系就名声大噪。尽管这个坐标系由于精度问题一度不被GIS专业人士接受，但最终 EPSG 还是给了 WKID:3857。
所以其实看到EPSG:3857，就知道，当前的坐标系是wgs84，而这个属性，通常在地图的默认设置中。就是说，如果你不改，这些地图就应该是wgs84坐标系。
六、坐标转换方法--TS版本（待完成）
请输入代码
如果对你有帮助的话，能否考虑打赏a cup of coffee,比心

参考：
http://wandergis.com/coordtra...
http://blog.csdn.net/kikitamo...
https://www.sogou.com/link?ur...
http://developer.baidu.com/ma...

混合云 idc机房托管百度地图坐标苹果坐标系坐标转换坐标转换 php 坐标转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93201.html

GPU 渲染管线与着色器大白话总结 ---- 一篇就够

摘要：它的处理单位是顶点，也就是每个顶点，都会调用一次顶点着色器。这里给一个的代码，把顶点着色器和片元着色器的代码，放到了一个文件中，不过引擎会解析文件，转换个着色器代码段，传递给。通常，顶点着色器只处理顶点坐标，进行空间转换。 ...

roadtogeek 2021-10-13 09:40 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0
微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

keithyau 2019-08-30 15:43 评论0 收藏0
微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

BLUE 2019-08-23 16:30 评论0 收藏0
微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

taoszu 2019-08-05 16:36 评论0 收藏0