之前一篇文章,我向大家介绍了如何将 netCDF 数据转换并打包为 Google Earth 支持的 KMZ 文件格式的方法。没有看过、并感兴趣的小伙伴们可以去阅读下。
那么我们能不能不用 Google Earth 的服务,自己搭建一个 3D 地球栅格数据展示的服务?当然是可以的,我们今天就来利用 Three.js 进行栅格数据的展示。
1.什么是 Three.js
Three.js 是一个跨浏览器的脚本,使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形。Three.js 使用 WebGL 技术。
在 Three.js 的官网,你可以看到很多很多例子。例如 Github 首页的信息地球,NASA 的卫星和行星展示等,都是使用 Three.js 来实现的。
2.例示数据
本例中采用的 netCDF 例示数据与 nc2kml 相同。
本例采用的 nc 数据为(仅选取2018年逐月的数据演示):
1979年1月至2018年12月的中国逐月太阳辐射数据集 lrad_CMFD_V0106_B-01_01mo_010deg_197901-201812.nc
本例采用的 nc4 数据为(仅选取1980年1月1日21时的数据演示):
1980年1月1日的全球太阳辐射数据集 MERRA2_100.tavg1_2d_rad_Nx.19800101.nc4
这两个文件均可在 Release 页面下载。如何将 netCDF 数据导出成我们需要的图片,可以参考 nc2kml,里面有非常详细的说明。
3.栅格数据展示
根据上篇文章 《nc数据转为谷歌地球的kml文件》来看,我们从 netCDF Plot 出的栅格数据展示都是图片格式,而这些图片格式也具有一些特点:
- 图片上、下边界是南极和北极
- 图片左、右边界是国际日期变更线
所以,我们只要再找到地球的展开图作为地图,再把咱们的辐射数据叠加上去即可,都投射到原型球体的表面即可!
这样,我们第一版的栅格数据展示图就做好了(具体实现方法和代码,可在 Github Repo 获取):
4.栅格数据展示的改进
我们还可以优化底图、增加一些地形视觉效果、动态云层效果等(具体实现方法和代码,可在 Github Repo 获取):
你还可以自己写一个 JavaScript 脚本,来自动切换不同张栅格数据图,达到动态演示的效果:
这是一个例示代码,用于展示 “2016年1月 – 2017年12月” 的逐月太阳辐射栅格数据:
function startMovie() {
document.getElementById("month-select").style.display = 'none';
var month = 1;
var year = 2016;
setInterval(function () {
console.log(month);
document.getElementById("msg-left").innerHTML = year + ' 年';
document.getElementById("msg-right").innerHTML = month + ' 月';
datas.material.map = THREE.ImageUtils.loadTexture("earth/" + year + "-" + month + ".png");
datas.material.needsUpdate = true;
if (month >= 12) {
month = 1; year += 1;
if (year > 2017) { year = 2016 }
}
else {
month += 1;
}
}, 400);
}