![cdb315a892883f3996c376c16f6285c6.png](https://i-blog.csdnimg.cn/blog_migrate/54b4e6bcc024cc02d81bc7168b50832f.jpeg)
所谓天下文章一大抄,看你会抄不会抄。网上对于墨卡托投影的解释比较多,但是我发现很多都是是漏洞百出,无脑抄。例如:
X轴:由于赤道半径为6378137米,则赤道周长为2*PI*r = 20037508.3427892,因此X轴的取值范围:[-20037508.3427892,20037508.3427892]。
2 * Math.PI * 6378137 = 40075016.0019724
X轴取值范围确实是[-20037508.3427892,20037508.3427892],但是请不要闭着眼睛说这是周长(实际是半周长)
地理经度的取值范围是[-180,180],纬度不可能到达90°,通过纬度取值范围为[20037508.3427892,20037508.3427892] ,反计算可得到纬度值为85.05112877980659。因此纬度取值范围是[-85.05112877980659,85.05112877980659]
![d00e458070ad5ccf29a57fbb1e3368bc.png](https://i-blog.csdnimg.cn/blog_migrate/e221705ff41a9b36baa705426a4913ac.jpeg)
这跳的也跳快了,为啥纬度取值范围也要半周长,反计算过程又在哪?
![663e18d49343f8fa14172a2c0a3cf948.png](https://i-blog.csdnimg.cn/blog_migrate/7c2c2cc840cfbd55fb6c13559baf4e7e.jpeg)
墨卡托投影的模型:地球近似为正球体,球体中心有个发亮的光点,光点将球面上的每个点都投影到正切赤道的圆柱内表面上,将圆柱体内表面展开就是一张世界地图。
形象的理解:有个特殊的乒乓球(地球),这个乒乓球球体内中心点会发光,乒乓球卡在塑料水管内部,把塑料水管水管按有乒乓球阴影部分锯开碾平后水管内表面就是世界地图。
![aab27d450b39b9dd07f3a7fae9c17993.png](https://i-blog.csdnimg.cn/blog_migrate/068e83a0a85820337732fc976b9c2954.jpeg)
在WebGIS中,经常有已知WGS84(EPSG:4326)经纬度[lng, lat],在Canvas2D上要显示该点就要换算成墨卡托投影(EPSG:3857),其实只要知道地球变成平面地图时的转换比率,那就能通过经纬度求出墨卡托的值。Openlayers以及Mapbox/sphericalmercator以及Mapbox/sphericalmercator都有转换函数,但是这个计算公式怎么来的呢?
假设有个Q点离P点无限近,地球半径为
![equation?tex=R](https://i-blog.csdnimg.cn/blog_migrate/cb0492f47c9c078bcaf8daff379b37af.png)
![d2845d575a3fbddb8fd067152df5c01f.png](https://i-blog.csdnimg.cn/blog_migrate/e7c0e7b02c902a1bdd2c105f61bc6805.jpeg)
P的经纬度为
![equation?tex=%5B%5Clambda%2C+%5Cvarphi%5D](https://i-blog.csdnimg.cn/blog_migrate/7c7681c09482a2c5b5956bdb4a1c2f4b.png)
![equation?tex=%5Clambda](https://i-blog.csdnimg.cn/blog_migrate/dc06394ad16162f3245fa966cb855095.png)
![equation?tex=%5Cvarphi](https://i-blog.csdnimg.cn/blog_migrate/3f5084917783e8ee20f8ab27f9808bb0.png)
![equation?tex=%5B%5Clambda+%2B+%5Cdelta%5Clambda%2C+%5Cvarphi+%2B+%5Cdelta%5Cvarphi%5D](https://i-blog.csdnimg.cn/blog_migrate/b807e7cd754f7c40edae2a6f2b669a9d.png)
平行赤道的
![equation?tex=%5Cvarphi](https://i-blog.csdnimg.cn/blog_migrate/3f5084917783e8ee20f8ab27f9808bb0.png)
![equation?tex=r+%3D+R+%5Ctimes+cos%5Cvarphi](https://i-blog.csdnimg.cn/blog_migrate/724ac93fd01f569d8d3ded505c790475.png)
![equation?tex=PM+%3D+r+%5Ctimes++%5Cdelta%5Clambda+%3D+R+++cos%5Cvarphi+%5Cdelta%5Clambda+](https://i-blog.csdnimg.cn/blog_migrate/c458a30ced01f881ac597209dc9d3ff8.png)
![0a842b657180e40a9157917efcac44d6.png](https://i-blog.csdnimg.cn/blog_migrate/54518d38883eafd896b2dbd916655740.jpeg)
![equation?tex=tan%5Cangle%5Calpha+%5Capprox+%5Cfrac%7BPM%7D%7BQM%7D+%3D+%5Cfrac%7BRcos%5Cvarphi%5Cdelta%5Clambda%7D%7BR%5Cdelta%5Cvarphi%7D](https://i-blog.csdnimg.cn/blog_migrate/26901e376b094be13dc032b83b2f2be0.png)
![equation?tex=tan%5Cangle%5Cbeta+%3D+%5Cfrac%7BP%27M%27+%7D%7BQ%27M%27+%7D+%3D+%5Cfrac%7B%5Cdelta+x%7D%7B%5Cdelta+y%7D](https://i-blog.csdnimg.cn/blog_migrate/9b0ab63b902223fab9ae21970b2f2749.png)
纬度方向比率:
![equation?tex=%5Cfrac%7BP%27M%27+%7D%7BPM%7D+%3D+%5Cfrac%7B%5Cdelta+x%7D%7BR+cos%5Cvarphi+%5Cdelta%5Clambda%7D](https://i-blog.csdnimg.cn/blog_migrate/56e83e5d9a696d3a98336100b30e7c60.png)
经度方向比率:
![equation?tex=%5Cfrac%7BP%27K%27%7D%7BPK%7D+%3D+%5Cfrac%7B%5Cdelta+y%7D%7BR%5Cdelta%5Cvarphi%7D](https://i-blog.csdnimg.cn/blog_migrate/ecb2a884e21174690b6f70bc28ec1de0.png)
由于经度转变未发生形变,那么可以将它看做常量,得出
![equation?tex=+%5Cdelta+x+%3D+R+%5Ctimes+%5Cdelta+%5Clambda](https://i-blog.csdnimg.cn/blog_migrate/b5edcdd27891eab39cd5dbfa22d74f9c.png)
再利用极限求导概念,
![equation?tex=y%27%28%5Cvarphi%29+%3D+%5Cfrac%7B%5Cdelta+y%7D%7B%5Cdelta%5Cvarphi%7D](https://i-blog.csdnimg.cn/blog_migrate/7e302190f3e2b2e7a5d850c07dd8fcf9.png)
维度方向转换比率:
![equation?tex=%5Cfrac%7BP%27M%27+%7D%7BPM%7D+%3D+%5Cfrac%7B%5Cdelta+x%7D%7BR+cos%5Cvarphi+%5Cdelta%5Clambda%7D+%3D+%5Cfrac%7BR+%5Cdelta%5Clambda%7D%7BR+cos%5Cvarphi+%5Cdelta%5Clambda%7D+%3D+%5Cfrac%7B1%7D%7Bcos%5Cvarphi+%7D+%3D+sec%5Cvarphi](https://i-blog.csdnimg.cn/blog_migrate/56e83e5d9a696d3a98336100b30e7c60.png+%3D+%5Cfrac%7BR+%5Cdelta%5Clambda%7D%7BR+cos%5Cvarphi+%5Cdelta%5Clambda%7D+%3D+%5Cfrac%7B1%7D%7Bcos%5Cvarphi+%7D+%3D+sec%5Cvarphi)
经度方向转换比率:
![equation?tex=%5Cfrac%7BP%27K%27%7D%7BPK%7D+%3D+%5Cfrac%7B%5Cdelta+y%7D%7BR%5Cdelta%5Cvarphi%7D+%3D+%5Cfrac%7B%5Cfrac%7By%27%28%5Cvarphi%29%7D%7B%5Cdelta%5Cvarphi%7D%7D%7BR%5Cdelta%5Cvarphi%7D+%3D+%5Cfrac%7By%27%28%5Cvarphi%29%7D%7BR%7D](https://i-blog.csdnimg.cn/blog_migrate/ecb2a884e21174690b6f70bc28ec1de0.png+%3D+%5Cfrac%7B%5Cfrac%7By%27%28%5Cvarphi%29%7D%7B%5Cdelta%5Cvarphi%7D%7D%7BR%5Cdelta%5Cvarphi%7D+%3D+%5Cfrac%7By%27%28%5Cvarphi%29%7D%7BR%7D)
![equation?tex=+tan%5Cangle%5Calpha+%3D%5Cfrac%7B+Rcos%5Cvarphi+%5Cdelta%5Clambda%7D%7BR%5Cdelta%5Cvarphi%7D+%3D+%5Cfrac%7B+%5Cdelta+x+cos%5Cvarphi%7D%7BR%5Cdelta%5Cvarphi%7D%3D%5Cfrac%7Btan%5Cangle%5Cbeta%5Ctimes%5Cdelta+y%5Ctimes+cos%5Cvarphi%7D%7BR%5Cdelta%5Cvarphi%7D%3Dtan%5Cangle%5Cbeta%5Ctimes+y%27%28%5Cvarphi%29%5Ctimes+%5Cfrac%7Bcos%5Cvarphi%7D%7BR%7D](https://i-blog.csdnimg.cn/blog_migrate/d803f7df1d1dc93c8c4cee4b566c53b0.png)
由于墨卡托投影为了保证投影后达到等角航线(航向角和经度所成的夹角保持不变),那么可以认定
![equation?tex=%5Cangle%5Calpha%3D%5Cangle%5Cbeta](https://i-blog.csdnimg.cn/blog_migrate/1f943e3a4c4044bfc6200997885cd3b1.png)
![ff9203ff3c4b92891d9f4ca33fe9fd17.png](https://i-blog.csdnimg.cn/blog_migrate/67f38a5ddb9ec6d621ac6aa388251409.jpeg)
等等,各位看到这里肯定会问,墨卡托设计的为什么需要等角航线?为什么是要和经度夹角而不是维度夹角?其实我写的时候也想了下,我们不妨大胆猜测下:
墨卡托设计出来的投影是为了航海用的,当时航海导航全靠指南针,指南针指向南北两极,与经线平行,那么要根据地图找到航行路线上的陆地的话,一定要根据地图上的所指的角度进行航线行驶(想象下航海电影中主角拿出地图,地图上压着个指南针,然后用尺子画出两点的直线,再量下这条直线和经线的夹角,最后指挥舵手往哪里哪里打几度方向。电影果然没欺骗我们)。
回归正题,由于
![equation?tex=%5Cangle%5Calpha+%3D+%5Cangle%5Cbeta](https://i-blog.csdnimg.cn/blog_migrate/1f6119c5ce22ac4974ca2052463a01a1.png)
![equation?tex=tan%E2%88%A0%5Calpha+%3D++tan%E2%88%A0%5Cbeta+%5Ctimes+y%27%28%5Cvarphi%29+%5Ctimes+%5Cfrac%7Bcos%CF%86%7D%7BR%7D+](https://i-blog.csdnimg.cn/blog_migrate/a84a0d67ca6d7b874f1b10f0c12bd9a2.png)
![equation?tex=+y%27%28%5Cvarphi%29+%3D+%5Cfrac%7BR%7D%7Bcos%5Cvarphi%7D%3D+R+%5Ctimes+sec%CF%86](https://i-blog.csdnimg.cn/blog_migrate/219bd871e28771c00976945774a6dfaf.png)
那么根据
![44c17e7039674eba13c569dd387c58d4.png](https://i-blog.csdnimg.cn/blog_migrate/8185032048e11379122194b096709d76.png)
得
![equation?tex=y%27%28%5Cvarphi%29](https://i-blog.csdnimg.cn/blog_migrate/8019de8ff9be0654be222ace383c7353.png)
![equation?tex=y%28%5Cvarphi%29+%3D+R+%5Ctimes+ln+%7Ctan%28%5Cfrac%7B%5Cvarphi%7D%7B2%7D+%2B+%5Cfrac%7B%5Cpi%7D%7B4%7D%29%7C](https://i-blog.csdnimg.cn/blog_migrate/0e183155358363303de8828c981f9321.png)
![equation?tex=y](https://i-blog.csdnimg.cn/blog_migrate/56151f71c4866c0e204ce3d096379823.png)
![equation?tex=y%5E%7B-1%7D](https://i-blog.csdnimg.cn/blog_migrate/56151f71c4866c0e204ce3d096379823.png%5E%7B-1%7D)
![equation?tex=gd%28x%29](https://i-blog.csdnimg.cn/blog_migrate/f021ace031cbdff9121d2515d356ab02.png)
![equation?tex=y%28x%29+%3D+gd%5E%7B-1%7D%28x%29](https://i-blog.csdnimg.cn/blog_migrate/56151f71c4866c0e204ce3d096379823.png%28x%29+%3D+gd%5E%7B-1%7D%28x%29)
![equation?tex=%5Cvarphi](https://i-blog.csdnimg.cn/blog_migrate/3f5084917783e8ee20f8ab27f9808bb0.png)
![equation?tex=x](https://i-blog.csdnimg.cn/blog_migrate/79271a73b75b1b2971964504afad8a27.png)
![0dde37dd2b3ba4242044bd099fb708e7.png](https://i-blog.csdnimg.cn/blog_migrate/9446f251269648b2ad99e0960c45188d.jpeg)
![b8eb37f9551eaac87011db9be0269b4d.png](https://i-blog.csdnimg.cn/blog_migrate/b95743d6a31f1047cdc4636b46521773.png)
在Web中,需要对地图进行缩放,为了更好的计算缩放比例,设定横宽比1。之前由于地图的x的取值范围为
![equation?tex=%5B-%5Cpi+R%2C+%5Cpi+R%5D](https://i-blog.csdnimg.cn/blog_migrate/6b64a675169374831e679b776719e6dc.png)
![equation?tex=%5B-%5Cpi+R%2C+%5Cpi+R%5D](https://i-blog.csdnimg.cn/blog_migrate/6b64a675169374831e679b776719e6dc.png)
![5a875f107dd3ae8066804bb6832ce91b.png](https://i-blog.csdnimg.cn/blog_migrate/c7521fa05f4b63d17cb545d72e7fef5e.png)
而EPSG:4326转EPSG:3857就很好计算了
// 弧度版
const x = R * lng
const y = R * Math.log(Math.tan((Math.PI*0.25) + (0.5 * lat)))
// 角度版
const radians = Math.PI / 180
const x = R * lng * radians
const y = R * Math.log(Math.tan((Math.PI*0.25) + (0.5 * lat * radians)))
参考资料:
https://en.wikipedia.org/wiki/Mercator_projectionen.wikipedia.org