nc栅格数据使用Three.js地球展示

之前一篇文章,我向大家介绍了如何将 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 获取):

点击图片预览 Demo 1

4.栅格数据展示的改进

我们还可以优化底图、增加一些地形视觉效果、动态云层效果等(具体实现方法和代码,可在 Github Repo 获取):

点击图片预览 Demo 2

你还可以自己写一个 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);
}

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注