「前端小知识——地图坐标转换」百家号Lite

「前端小知识——地图坐标转换」百家号Lite_作者自评：

如何评价百家号Lite小程序热议话题「前端小知识——地图坐标转换」
LBS，基于位置的服务（LocationBasedService)，近年来已经无处不在，尤其是我们前端，相信或多或少都有接触一些地图API服务，比如高德、百度啊、谷歌啊~
但是用的时候可能看到下面这些字眼：比如BD09、火星坐标、WGS84……不由得还是蒙圈了啊那么接下来，我们就来了解一下，关于当前用到的一些互联网地图的基础坐标转换知识~1、首先给大家出一个题地图上的经纬度
转换到平面坐标时，和平面坐标
的XY的对应关系是什么，就是经度（longitude）和维度（latitude）分别给对应X,Y中的谁？
这是在实际中经常会用到的一个知识点，我之前没有想太多，反正就把数值往里尝试，因为位置差异很大，正确还是错误一眼就看出来了的，但是这样其实很不好，被师兄说了，我一个GISer的连这个都弄不明白不应该，哈哈哈。
不求甚解是可以的，但是专业性还是要强化的。
来看看上面的图：经纬度大家都知道，地球上横线是纬度，纵线是经度。这也导致了我们下意识就会觉得，横线是X，纵线是Y。这样的认知显然是错误的。
但其实，横线是刻画了Y轴上的刻度，纵线是刻画了X轴上的刻度，这里要用到投影的角度来看问题。
所以大家要记住经纬XY：
经度（longitude）——对应X
维度（latitude）——对应Y2、当前互联网地图的坐标系现状1.地球坐标(WGS84)
国际标准，从专业GPS设备中取出的数据的坐标系。国际地图提供商使用的坐标系。
2.火星坐标(GCJ02)也叫国测局坐标系
中国标准，从国行移动设备中定位获取的坐标数据使用这个坐标系。
国家规定：国内出版的各种地图系统（包括电子形式），必须至少采用GCJ02对地理位置进行首次加密。
3.百度坐标(BD09)
百度标准，百度SDK，百度地图，Geocoding使用(百度在火星坐标上的二次加密)。互联网在线地图使用的坐标系火星坐标系：
iOS地图（其实是高德）、Gogole地图、搜搜、阿里云、高德地图
百度坐标系：当然只有百度地图
WGS84坐标系：国际标准，谷歌国外地图、osm地图等国外的地图一般都是这个。从设备获取经纬度（GPS）坐标如果使用的是百度sdk那么可以获得百度坐标（bd09）或者火星坐标（GCJ02),默认是bd09。
如果使用的是ios的原生定位库，那么获得的坐标是WGS84。
如果使用的是高德sdk,那么获取的坐标是GCJ02。坐标转换方法JS版本我在之前的一篇文章里，基于Ionic框架的使用讲到了地图定位：ionic2入门教程（六）地图服务（谷歌、高德、百度定位），现在重新写一个小demo来实现我们的坐标转换。
关于方法，我找到了应该是最通用的一种，源码地址——作者wandergis，大部分的转换方式应该都是基于他的这个版本，相关说明也是最清楚的。
实际中我们可能会用到不同的地图，那么就对应到不同坐标系的转换，比如说，你有一份wgs84的数据服务，你要展现在百度或者高德地图上，这时候你就需要转换了。
我这里的例子是，我用到百度搜索地名，得到经纬度，但是我要将它绘制在以84为坐标系的地图leaflet之上，这时候我就需要将返回的经纬度进行转换。
我们先用百度搜索广州塔，定位中心
基于我们选择的OpenStreetMap，未转换之前，我们用百度搜索广州塔返回的值画点，可以看出很明显是偏移了的：
<h1>百度地名搜索</h1><inputtype=textid=searchVal><buttonid=searchBtn>广州市内搜索</button><divid=map1></div><script> varsearchBtn=document.getElementById('searchBtn'); varmymap=L.map('map1').setView([39.897445,116.331398],13); L.tileLayer(  'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',{maxZoom:18,attribution:'Mapdata&copy;<ahref=http://openstreetmap.org>OpenStreetMap</a>contributors,'+ '<ahref=http://creativecommons.org/licenses/bysa/2.0/>CCBYSA</a>,'+ 'Imagery <ahref=http://mapbox.com>Mapbox</a>',id:'mapbox.streets'  }).addTo(mymap); //创建地址解析器实例 searchBtn.onclick=function(){  varsearchVal=document.getElementById('searchVal').value;  varmyGeo=newBMap.Geocoder();  //将地址解析结果显示在地图上,并调整地图视野  myGeo.getPoint(searchVal,function(point){if(point){ console.log(point); L.marker([point.lat,point.lng]).addTo(mymap); mymap.setView([point.lat,point.lng],15);}else{ alert(您选择地址没有解析到结果!);}  },广州市); }转换代码如下：/***copyfromhttps://github.com/wandergis/coordtransform*CreatedbyWandergison2015/7/8.*提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换*///UMD魔法代码//ifthemodulehasnodependencies,theabovepatterncanbesimplifiedto(function(root,factory){if(typeofdefine==='function'&&define.amd){  //AMD.Registerasananonymousmodule.  define([],factory);}elseif(typeofmodule==='object'&&module.exports){  //Node.DoesnotworkwithstrictCommonJS,but  //onlyCommonJSlikeenvironmentsthatsupportmodule.exports,  //likeNode.  module.exports=factory();}else{  //Browserglobals(rootiswindow)  root.coordtransform=factory();} }(this,function(){//定义一些常量varx_PI=3.14159265358979324*3000.0/180.0;varPI=3.1415926535897932384626;vara=6378245.0;varee=0.00669342162296594323;/** *百度坐标系(BD09)与火星坐标系(GCJ02)的转换 *即百度转谷歌、高德 *@parambd_lon *@parambd_lat *@returns{*[]} */varbd09togcj02=functionbd09togcj02(bd_lon,bd_lat){  varbd_lon=+bd_lon;  varbd_lat=+bd_lat;  varx=bd_lon0.0065;  vary=bd_lat0.006;  varz=Math.sqrt(x*x+y*y)0.00002*Math.sin(y*x_PI);  vartheta=Math.atan2(y,x)0.000003*Math.cos(x*x_PI);  vargg_lng=z*Math.cos(theta);  vargg_lat=z*Math.sin(theta);  return[gg_lng,gg_lat]};/** *火星坐标系(GCJ02)与百度坐标系(BD09)的转换 *即谷歌、高德转百度 *@paramlng *@paramlat *@returns{*[]} */vargcj02tobd09=functiongcj02tobd09(lng,lat){  varlat=+lat;  varlng=+lng;  varz=Math.sqrt(lng*lng+lat*lat)+0.00002*Math.sin(lat*x_PI);  vartheta=Math.atan2(lat,lng)+0.000003*Math.cos(lng*x_PI);  varbd_lng=z*Math.cos(theta)+0.0065;  varbd_lat=z*Math.sin(theta)+0.006;  return[bd_lng,bd_lat]};/** *WGS84转GCj02 *@paramlng *@paramlat *@returns{*[]} */varwgs84togcj02=functionwgs84togcj02(lng,lat){  varlat=+lat;  varlng=+lng;  if(out_of_china(lng,lat)){ return[lng,lat]  }else{ vardlat=transformlat(lng105.0,lat35.0); vardlng=transformlng(lng105.0,lat35.0); varradlat=lat/180.0*PI; varmagic=Math.sin(radlat); magic=1ee*magic*magic; varsqrtmagic=Math.sqrt(magic); dlat=(dlat*180.0)/((a*(1ee))/(magic*sqrtmagic)*PI); dlng=(dlng*180.0)/(a/sqrtmagic*Math.cos(radlat)*PI); varmglat=lat+dlat; varmglng=lng+dlng; return[mglng,mglat]  }};/** *GCJ02转换为WGS84 *@paramlng *@paramlat *@returns{*[]} */vargcj02towgs84=functiongcj02towgs84(lng,lat){  varlat=+lat;  varlng=+lng;  if(out_of_china(lng,lat)){ return[lng,lat]  }else{ vardlat=transformlat(lng105.0,lat35.0); vardlng=transformlng(lng105.0,lat35.0); varradlat=lat/180.0*PI; varmagic=Math.sin(radlat); magic=1ee*magic*magic; varsqrtmagic=Math.sqrt(magic); dlat=(dlat*180.0)/((a*(1ee))/(magic*sqrtmagic)*PI); dlng=(dlng*180.0)/(a/sqrtmagic*Math.cos(radlat)*PI); varmglat=lat+dlat; varmglng=lng+dlng; return[lng*2mglng,lat*2mglat]  }};vartransformlat=functiontransformlat(lng,lat){  varlat=+lat;  varlng=+lng;  varret=100.0+2.0*lng+3.0*lat+0.2*lat*lat+0.1*lng*lat+0.2*Math.sqrt(Math.abs(lng));  ret+=(20.0*Math.sin(6.0*lng*PI)+20.0*Math.sin(2.0*lng*PI))*2.0/3.0;  ret+=(20.0*Math.sin(lat*PI)+40.0*Math.sin(lat/3.0*PI))*2.0/3.0;  ret+=(160.0*Math.sin(lat/12.0*PI)+320*Math.sin(lat*PI/30.0))*2.0/3.0;  returnret};vartransformlng=functiontransformlng(lng,lat){  varlat=+lat;  varlng=+lng;  varret=300.0+lng+2.0*lat+0.1*lng*lng+0.1*lng*lat+0.1*Math.sqrt(Math.abs(lng));  ret+=(20.0*Math.sin(6.0*lng*PI)+20.0*Math.sin(2.0*lng*PI))*2.0/3.0;  ret+=(20.0*Math.sin(lng*PI)+40.0*Math.sin(lng/3.0*PI))*2.0/3.0;  ret+=(150.0*Math.sin(lng/12.0*PI)+300.0*Math.sin(lng/30.0*PI))*2.0/3.0;  returnret};/** *判断是否在国内，不在国内则不做偏移 *@paramlng *@paramlat *@returns{boolean} */varout_of_china=functionout_of_china(lng,lat){  varlat=+lat;  varlng=+lng;  //纬度3.86~53.55,经度73.66~135.05return!(lng>73.66&&lng<135.05&&lat>3.86&&lat<53.55);};return{  bd09togcj02:bd09togcj02,  gcj02tobd09:gcj02tobd09,  wgs84togcj02:wgs84togcj02,  gcj02towgs84:gcj02towgs84} }));坐标转换后显示如下，我们需要将百度坐标转成火星坐标再转成wgs84，因为我们用的地图是openstreet，是wgs84坐标系。
可以看到，下面中三个点中，有一个已经是正确了的。
myGeo.getPoint(searchVal,function(point){
if(point){
console.log(point);
//bd09>gcj02
varmyPoint=coordtransform.bd09togcj02(point.lng,point.lat);
console.log(myPoint);
//gcj02>wgs84
varmyPoint2=coordtransform.gcj02towgs84(myPoint[0],myPoint[1]);
console.log(myPoint2);
varlatlng=L.latLng([myPoint[1],myPoint[0]]);
varlatlng2=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(您选择地址没有解析到结果!);
}
},广州市);3、EPSG:3857如果你用到了leaflet/openlayers/arcgisjsAPI的话，应该还有一个点需要了解。
这个算是题外话，因为一般都是学gis的才会用到这些，一般情况下百度高德这些大概都能够满足需求了。
像用到这些地图的情况，经常会涉及到EPSG:3857或者OpenLayers:900913，acrgis：102100(3857)。
EPSG:3857其实是EPSG协会（EuropeanPetroleumSurveyGroup）为WebWercator最终设立的WKID，也就是现在我们常用的Web地图的坐标系，并且给定官方命名“WGS84/PseudoMercator“。
WebMercator是一个投影坐标系统，其基准面是WGS1984。
WGS1984是一个长半轴(a)为6378137，短半轴（b）为6356752.314245179的椭球体，扁率(f)为298.257223563，f=(ab)/a。但是，WebMercator坐标系使用的投影方法不是严格意义的墨卡托投影而是一个被EPSG称为伪墨卡托的投影方法，这个伪墨卡托投影方法的大名是PopularVisualizationPseudoMercator，PVPM。
Google最先发明了这套系统，在投影过程中，将表示地球的参考椭球体近似的作为正球体处理（正球体半径R=椭球体半长轴a）。
后来，WebMercator在Web地图领域被广泛使用，这个坐标系就名声大噪。尽管这个坐标系由于精度问题一度不被GIS专业人士接受，但最终EPSG还是给了WKID:3857。
所以其实看到EPSG:3857，就知道，当前的坐标系是wgs84，而这个属性，通常在地图的默认设置中。就是说，如果你不改，这些地图就应该是wgs84坐标系。实力小编说如果对你有帮助的话，能否考虑打赏acupofcoffee,笔芯哟~
该话题由百家号作者实力IT直通车「简介:主要为大家分享IT行业知识、职场技巧等」
更多有关前端小知识——地图坐标转换的话题讨论请访问百家号Litex小程序关注作者-实力IT直通车