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

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

三维轨迹效果图:

我的THREE.js之旅02: 使用THREE.js加载OSM的地图_第1张图片


我的THREE.js之旅02: 使用THREE.js加载OSM的地图_第2张图片

涉及的知识点:

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


参考链接:
  • 墨卡托投影
  • 地图切片公式备忘
  • WGS84经纬度坐标与web墨卡托之间的转换
  • Web(瓦片)地图的工作原理

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

效果图如下:(红色球体为我的位置)

我的THREE.js之旅02: 使用THREE.js加载OSM的地图_第3张图片

我的THREE.js之旅02: 使用THREE.js加载OSM的地图_第4张图片

代码如下:



    
        
        
        
    
    
        



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

你可能感兴趣的:(three)