threejs通过纹理贴图实现3d地球后,我们需要在3d地球上标注我们需要标注的信息,但是球面只有x y z坐标并没有经纬度坐标,这就需要在将经纬度坐标转为球面坐标后,再在球面上标注信息。
转换代码
/**
* 经纬度坐标转球面坐标
* @param {地球半径} R
* @param {经度(角度值)} longitude
* @param {维度(角度值)} latitude
*/
function lon2xyz(R,longitude,latitude) {
var lon = longitude * Math.PI / 180;//转弧度值
var lat = latitude * Math.PI / 180;//转弧度值
lon = -lon;// three.js坐标系z坐标轴对应经度-90度,而不是90度
// 经纬度坐标转球面坐标计算公式
var x = R * Math.cos(lat) * Math.cos(lon);
var y = R * Math.sin(lat);
var z = R * Math.cos(lat) * Math.sin(lon);
// 返回球面坐标
return {
x:x,
y:y,
z:z,
};
}
export { lon2xyz }
经纬度转球面坐标计算公式怎么得来的?
经纬度转球面坐标计算公式是根据三角函数计算得来,如果你对这一块感兴趣的话可以观看视频教程详细学习。
视频教程
如果你对上面的文字教程有不理解的地方,也可以查看视频教程,加微17331886870可以领取相关课程的优惠卷哟.
视频教程讲解如何在web上实现地球3D可视化,通过视频的学习最终可以实现如下实例效果地球3D可视化实例
学习本课程需要前端基础,如果了解three.js更好
视频课程每节课程都有对应的案例源码,要结合每节课提供的案例源码学习,不要仅仅看视频
地球Web3D可视化WebGL Three.js