我的THREE.js之旅02: 使用THREE.js加载OSM的地图

之前为了做个轨迹三维可视化页面，用了vizicities.js来加载地图，昨前大概看了下vizicities的代码，决定自己用three.js写个demo出来。

三维轨迹效果图：

涉及的知识点：

• Web墨卡托投影
• 经纬度坐标与墨卡托投影坐标的转换
• OSM的地图切片，切片公式

参考链接：

• 墨卡托投影
  
• 地图切片公式备忘
  
• WGS84经纬度坐标与web墨卡托之间的转换
  
• Web（瓦片）地图的工作原理

基本思路是，根据地图切片的原理构建http请求，获取到切片图后作为纹理加载到webgl中；坐标的转换过程是 经纬度－>墨卡托－>切片图上的像素坐标－>webgl中的位置坐标；

效果图如下：（红色球体为我的位置）

代码如下：

源码：https://github.com/lyqandy/THREE_MAP