Cesium模拟无人机飞行仪表盘——jQuery Flight Indicators插件

最新推荐文章于 2024-09-21 16:13:29 发布

J-Henry52

最新推荐文章于 2024-09-21 16:13:29 发布

阅读量483

点赞数 4

文章标签：无人机 jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_43124006/article/details/139671904

版权

Flight Indicators Plugin是一款可以制作高质量飞行仪表指示器的jQuery插件。该插件通过html、CSS3、jQuery和SVG图片来制作各种飞行仪表指示器。插件中的方法非常容易定制和实现，并且使用的图片都是矢量图片，放大也不会有失真现象。

该插件当前支持的飞行指示器类型有：

人工地平线， Heading ，垂直速度，空气速度，高度计如下图所示：

jQuery Flight Indicators Plugin - 插件使用demo网址

代码如下图所示：

  The html :
    <span id="airspeed"></span>
    <span id="attitude"></span>
    <span id="altimeter"></span>
    <span id="turn_coordinator"></span>
    <span id="heading"></span>
    <span id="variometer"></span>



the javascript :
// Dynamic examples
var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});
var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});
var variometer = $.flightIndicator('#variometer', 'variometer', {vario:-5, showBox:true});
var airspeed = $.flightIndicator('#airspeed', 'airspeed', {showBox: false});
var altimeter = $.flightIndicator('#altimeter', 'altimeter');
var turn_coordinator = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {turn:0});

// Update at 20Hz
var increment = 0;
setInterval(function() {
    // Airspeed update
    airspeed.setAirSpeed(80+80*Math.sin(increment/10));

    // Attitude update
    attitude.setRoll(30*Math.sin(increment/10));
    attitude.setPitch(50*Math.sin(increment/20));

    // Altimeter update
    altimeter.setAltitude(10*increment);
    altimeter.setPressure(1000+3*Math.sin(increment/50));
    increment++;
    
    // TC update
    turn_coordinator.setTurn(30*Math.sin(increment/10));

    // Heading update
    heading.setHeading(increment);
    
    // Vario update
    variometer.setVario(2*Math.sin(increment/10));
    
}, 50);

结合cesium无人机模型的效果如图所示：