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

地图坐标转换

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，未转换之前，我们用百度搜索广州塔返回的值画点，可以看出很明显是偏移了的：

    百度地名搜索