Cesium专栏-卫星云图

效果图

卫星云图也是一种重要的气象观测资料，与雷达产品不同的是，卫星云图的覆盖范围更广。

• 加载卫星云图

同样使用polygon来加载。

1、设置好图片要显示的范围

var positions = [
    Cesium.Cartesian3.fromDegrees(50, 0),
        Cesium.Cartesian3.fromDegrees(145, 0),
        Cesium.Cartesian3.fromDegrees(145, 60),
        Cesium.Cartesian3.fromDegrees(50, 60)
];

2、添加polygon

viewer.entities.add({
    polygon: {
        hierarchy: new Cesium.PolygonHierarchy(positions),
        material: './images/sate.png'
    }
});

简单的两步就加载完成了卫星云图。

• 卫星云图动图

同样，我们要根据卫星云图动图来判断天气趋势。

1、准备多张卫星云图图

var urls = [
    "./sate/SATE_L1_F2G_VISSR_MWB_NOM_FDI-201906171300.HDF.png",
        "./sate/SATE_L1_F2G_VISSR_MWB_NOM_FDI-201906171400.HDF.png",
        "./sate/SATE_L1_F2G_VISSR_MWB_NOM_FDI-201906171500.HDF.png",
        "./sate/SATE_L1_F2G_VISSR_MWB_NOM_FDI-201906171600.HDF.png",
        "./sate/SATE_L1_F2G_VISSR_MWB_NOM_FDI-201906171700.HDF.png"
];

2、使用CallbackProperty动态material赋值

material: new Cesium.ImageMaterialProperty({
    image: new Cesium.CallbackProperty(function () {
        return urls[i];
    })
})

3、定时器轮流改变i值

setInterval(function () {
    i++;
    if (i == urls.length) {
        i = 0;
    }
}, 1000);

如果卫星云图颜色过深，遮盖住了地球表面，可以在material里面设置一个透明度

color: Cesium.Color.WHITE.withAlpha(0.6) // 这里的颜色不会对图片材质造成影像

link==>