Cesium专栏-雷达反射率

效果图

在气象行业，经常会在地图上展示雷达反射率等一些产品图，雷达图有图片格式，也有geojson格式的，每种格式都有加载渲染的方式，在这里，我们介绍的是图片格式的雷达产品。

• 加载雷达图

加载雷达图可以使用简单的polygon就可以了。

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

var positions = [
    Cesium.Cartesian3.fromDegrees(73.16895, 12.2023),
    Cesium.Cartesian3.fromDegrees(134.86816, 12.2023),
    Cesium.Cartesian3.fromDegrees(134.86816, 54.11485),
    Cesium.Cartesian3.fromDegrees(73.16895, 54.11485)
];

2、添加polygon

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

简单的两步就加载完成了雷达图。

• 雷达动图

仅仅显示一张雷达图，往往是不够的，我们要根据雷达动图来判断天气趋势，所以静态的图只能说明某一时间的天气情况，但是不能进行预测。

1、准备多张雷达图

var urls = [
    './radar/201906211112.PNG',
    './radar/201906211124.PNG',
    './radar/201906211130.PNG',
    './radar/201906211136.PNG',
    './radar/201906211142.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=>