three.js渲染智慧城市一（坐标转化篇）

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天

大家好，最近在项目中使用three.js开发的智慧城市终于进入了尾声。这一次从头开始使用three.js，一步一步的搭建完成整个项目，这算是一次总结也是一次记录，顺便把开发中遇到各种的坑和方法总结下分享出来。

墨卡托投影

在渲染智慧城市或者地球的开发过程中，我们其实使用的是墨卡托投影。墨卡托投影：是正轴等角圆柱投影。由荷兰地图学家墨卡托(G.Mercator)于1569年创立。假想一个与地轴方向一致的圆柱切或割于地球，按等角条件，将经纬网投影到圆柱面上，将圆柱面展为平面后，即得本投影。墨卡托投影在切圆柱投影与割圆柱投影中，最早也是最常用的是切圆柱投影。
其实在三维中的地球就是一个被切开的球，如下图：

而墨卡托坐标就是这个切开的球的x、y的位置。

地理坐标系

相信大家都使用过高德或者百度地图，在生活中我们使用的都是地理坐标系，也就是我们常说的经纬度，而且在开源的数据中无论是建筑位置、河流形状、道路走向都是采用的经纬度的形式进行记录的。

转换

既然生活中都是地理坐标系而在开发中需要墨卡托投影坐标系，那么这两个坐标之间就需要进行转换。

    getMercator(positonArry) {  
      const mercator = {};  
      const earthRad = 6378137.0;
      mercator.x = positonArry[0] * Math.PI / 180 * earthRad;
      const local_arry = positonArry[1] * Math.PI / 180;
      mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(local_arry)) / (1.0 - Math.sin(local_arry)));
      return mercator;
    }

输入经纬度[120.152019, 30.259057]，输出 {x: 13375261.572863732, y: 3536892.8578376328}，而后面这个对象就是在three中我们使用的坐标。

其他

知道了地理坐标和渲染坐标之间的转化，下一次我们将使用three.js三维的建筑物数据渲染在页面上进行简单展示。