web地图前端入门知识小总结

神奇的转入与地图相关的工作,总结下最基础的行业知识;主要是怕我自己忘了,另外也不知道以后还会不会用到~ 内容包括墨卡托投影,墨卡托坐标与经纬度坐标之间的转换,以及常用的地图坐标之间的转换

web墨卡托投影

什么是墨卡托投影?

墨卡托(Mercator)投影,又名“等角正轴圆柱投影”,荷兰地图学家墨卡托(Mercator)在1569年拟定,假设地球被围在一个中空的圆柱里,其赤道与圆柱相接触,然后再假想地球中心有一盏灯,把球面上的图形投影到圆柱体上,再把圆柱体展开,这就是一幅标准纬线为零度(即赤道)的“墨卡托投影”绘制出的世界地图。

上面摘自网络,稍微运用下你的空间想象力,就能想象出这个投影的过程。

Web墨卡托投影坐标系

以整个世界范围,赤道作为标准纬线,本初子午线作为中央经线,两者交点为坐标原点,向东向北为正,向西向南为负。

X轴:由于赤道半径为6378137米,则赤道周长为2PIr = 20037508.3427892,因此X轴的取值范围:[-20037508.3427892,20037508.3427892]。

y轴:本来纬度接近90度的时候,y轴是接近无限,但是为了在web上好计算,y轴的取值范围也定为了[-20037508.3427892,20037508.3427892]

由上面的x轴和y轴的取值范围,反计算得到经纬度的取值范围为:

经度: [-180,180]

纬度: [-85.05112877980659,85.05112877980659]

是的,纬度没有达到90度,反正web上的地图,人们也不关心高纬度的情况,去到南极或者北极的时候,请使用专业地图。

墨卡托坐标到经纬度坐标的转换 javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//墨卡托坐标转经纬度
function Mercator2lonLat(mercatorX,mercatorY){
var x=mercatorX/20037508.34*180;
var y=mercatorY/20037508.34*180;
y= 180/Math.PI*(2*Math.atan(Math.exp(y*Math.PI/180))-Math.PI/2);
return [x,y];
}
//经纬度转墨卡托
function lonLat2mercator(lon, lat){
var x = (lon/180) * 20037508.34;
var tmp = 0;
if(lat > 85.05112){ tmp = 85.05112;}
if(lat < -85.05112){ tmp = -85.05112;}
tmp = (Math.PI / 180.0) * tmp;
var y = 20037508.34 * Math.log(Math.tan(Math.PI / 4.0 + tmp / 2.0)) / Math.PI;
return [x,y];
}

有时候,前端获取到的坐标并不是标准的经纬度,可能是墨卡托坐标(因为后台程序用墨卡托可以直接加减运算,方便)。所以在使用的时候,如果经度不在[-180,180]之间,纬度简单判断不在[-90,90]之间,并且数据还很大的可以认为有可能是墨卡托,需要做一下转换。

百度、腾讯、高德的坐标体系

各家使用的坐标都是经过一些偏移的,然后国内因为一些保密原因,国内的地图是不让使用GPS坐标的。不过高德,腾讯使用的是一个坐标系,百度是另外一个。所以同一个经纬度在每家地图上的位置可能会有一些偏差,那怎么办?就好像做搜索,需要看别家搜索的质量。做地图,也需要知道别家的数据。

​ 可以得到GPS坐标、百度经纬度等

  • 百度开放平台提供的坐标转换:http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

    可以得到的坐标要多一些,aliyun地图就是高德地图啦,腾讯,google,高德的地图的坐标系都是一样的

  • 高德的,实在没找到,囧~个人觉得高德的开放平台那个web页实在是有点不好找,交互和UI实在有点小乱