本文主要采用的是中国台风数据集（hina sea and air flux grid data products），可以在中国气象中心下载。自此不在过多赘述，主要是粘贴代码。
另外，数据集获取之后，利用arcgis或者Qgis，将下载好的表格文件（csv）提取经纬度并文本转换gjson文件，这步骤也不过多赘述，但记得要把表格文件中的属性从中文转成英文，不然会识别不出来。
还有找个台风icon图标，可以在阿里库里面找。当然也可以是其他网站，本人知识浅薄只知道阿里库。
下面是代码，即插即用，但几个url和参数要改写。数据集采用的是在2021年的所有台风中的烟花和杜鹃。代码直接参考：利用cesium模拟台风移动路径–以利奇马台风为例_自走棋的博客-CSDN博客_cesium台风，基于该作者在ajax里面运行，我非常尊重地改成能在沙盒也能运行。
var viewer = new Cesium.Viewer(cesiumContainer, {
baseLayerPicker: false,
selectionIndicator: false,
infoBox: false,
animation: false, // 动画
timeline: false, // 时间线
navigationHelpButton: false, // 关闭帮助控件
fullscreenButton: false, // 关闭全屏显示
geocoder : false // 关闭搜索控件
});viewer._cesiumWidget._creditContainer.style.display = “none”; // 去除水印
viewer.scene.globe.enableLighting = false; // 关闭日照
viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形探测(地形之下的不可见)
viewer.scene.globe.showGroundAtmosphere = false; // 关闭大气层
var scene = viewer.scene;
var camera = viewer.scene.camera;
//sandcastle_begin
//读取台风数据
var typthoon_data = [];
Cesium.Resource.fetchJson(“../../getypthoon.geojson”).then(function(jsonData){
for(var i =0 ;i<jsonData.features.length;i++){
var geofeature = jsonData.features[i];
const d = {
code:geofeature.properties.code,
name:geofeature.properties.name,
en_name:geofeature.properties.en_name,
starttime:geofeature.properties.starttime,
endtime:geofeature.properties.endtime,
currenttime:geofeature.properties.currenttime,
fLongitude:geofeature.properties.longitude,
fLatitude:geofeature.properties.latitude,
density:geofeature.properties.density,
class:geofeature.properties.class,
windspeed:geofeature.properties.windspeed,
pressure:geofeature.properties.pressure,
direction:geofeature.properties.direction,
speed:geofeature.properties.speed
};
typthoon_data.push(d);
}
});// 初始位置
var initViewLocation = {
destination : Cesium.Cartesian3.fromDegrees(112.951085, 28.148327, 1000),
duration : 0, // 旋转速度 数值越大越慢
orientation : { // 朝北向下俯视
heading : 5.857107801269642,
pitch : –0.02842342271796139, // 相机间距
roll : 0.0 // 相机滚动
}
};
function typhoonFlytoPath(viewer, positions){
if(positions.length<1){
return;
}
var typhoonName = positions[0].name;
var startTime = positions[0].starttime;
var stopTime = positions[0].starttime;
// 允许飞行动画
viewer.clock.shouldAnimate = true;
// 设定模拟时间的界限
const start = Cesium.JulianDate.fromDate(new Date(Date.parse(startTime)));
const stop = Cesium.JulianDate.addSeconds(start, positions.length, new Cesium.JulianDate());viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //末尾循环
// 飞行速度，值越大速度越快，multiplier为0停止移动
viewer.clock.multiplier = 3;
// viewer.timeline.zoomTo(start, stop);
// 计算飞行时间和位置
const property = computeFlight(start, positions);var rotation = Cesium.Math.toRadians(30);function getRotationValue() {
rotation += –0.03;
return rotation;
}const typhoonEntity = viewer.entities.add({
name : 台风路径,
availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start,
stop : stop
})]),
position : property,
orientation : new Cesium.VelocityOrientationProperty(property), // 根据位置移动自动计算方向
ellipse : {
semiMinorAxis : 35000.0,
semiMajorAxis : 35000.0,
height: 0.0,
fill: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 5,
outline : false,
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
material: new Cesium.ImageMaterialProperty({
image: “../../强台风.png”,
transparent: true
})
},
point : {
pixelSize : 10,
color : Cesium.Color.TRANSPARENT,
outlineColor : Cesium.Color.YELLOW,
outlineWidth : 4
},
label : {
text: typhoonName,
font : 18px sans-serif,
pixelOffset : new Cesium.Cartesian2(0.0, 50)
},
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.9,
color : Cesium.Color.YELLOW
}),
width : 3
}
});// 设置飞行视角
viewer.trackedEntity = undefined;
viewer.flyTo(typhoonEntity,{
duration: 2,
offset : {
heading : Cesium.Math.toRadians(0.0),
pitch : Cesium.Math.toRadians(–90),
range : 1500000
}
});
// 飞行视角追踪
var preUpdateHandler = function(){
if(typhoonEntity){
const center = typhoonEntity.position.getValue(viewer.clock.currentTime);
const hpr = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0.0), Cesium.Math.toRadians(–90), 1500000);
if(center){
viewer.camera.lookAt(center, hpr);
}
}
};
viewer.scene.preUpdate.addEventListener(preUpdateHandler);
// viewer.zoomTo(typhoonEntity, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 15000));
// 设置插值函数为拉格朗日算法/M多项式近似插值/
typhoonEntity.position.setInterpolationOptions({
interpolationDegree : 3,
interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
});
}function computeFlight(start, positions){
console.log(positions);
const property = new Cesium.SampledPositionProperty();
for(let i=0; i<positions.length; i++){
const time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
const position = Cesium.Cartesian3.fromDegrees(parseFloat(positions[i].fLongitude), parseFloat(positions[i].fLatitude), Cesium.Math.nextRandomNumber() * 500 + 1750);
property.addSample(time, position);
}
return property;
}
function showSelectedTyphoon(code){
var result = [];
for(var i = 0;i<typthoon_data.length;i++){
if(code === typthoon_data[i].code){
result.push(typthoon_data[i]);
}
}
typhoonFlytoPath(viewer,result);
}
//台风编号
var code = [
201901,201902,201903,201904,201905,201906,201907,201908,
201909,201910,201911,201912,201913,201914,201915,201916,
201917,201918,201919,201920,201921,201922,201923,201924,
201925,201926,201927,201928,201929
];
Sandcastle.finishedLoading();
Sandcastle.addToolbarMenu(
[
{
text: “201901”,
onselect: function () {
showSelectedTyphoon(code[0]);
}
},
{
text: “201902”,
onselect: function () {
showSelectedTyphoon(code[1]);
}
}
],
“interpolationMenu”
);
免责声明：文章内容来自互联网，本站仅提供信息存储空间服务，真实性请自行鉴别，本站不承担任何责任，如有侵权等情况，请与本站联系删除。
