台风路径模拟-台风路径模拟图

本文主要采用的是中国台风数据集(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” );

免责声明:文章内容来自互联网,本站仅提供信息存储空间服务,真实性请自行鉴别,本站不承担任何责任,如有侵权等情况,请与本站联系删除。
转载请注明出处:台风路径模拟-台风路径模拟图 https://www.bxbdf.com/a/152652.shtml

上一篇 2023-08-19 11:08:46
下一篇 2023-08-19 11:43:49

猜你喜欢

联系我们

在线咨询: QQ交谈

邮件:362039258#qq.com(把#换成@)

工作时间:周一至周五,10:30-16:30,节假日休息。