zoukankan      html  css  js  c++  java
  • cesium 实时传参更新模型的位置和姿态

    html

    <!DOCTYPE html>
    <html>
        <head>
            <title> sesium Demo </title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <script src = "../Build/Cesium/Cesium.js"></script>
            <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        </head>
    
        <body>
            <input type="text" id="clock">
            <div id="cesiumContainer"></div>
            <div id="showInfo"></div>
            
        </body>
    </html>
    
    <!-- 1、获取viewer对象 -->
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider : Cesium.createTileMapServiceImageryProvider({
                url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') //使用的是默认的离线地图离线地图
            }),
            shouldAnimate : true,
            geocoder:false,
            homeButton:false,
            sceneModePicker:false,
            baseLayerPicker : false,
            //baseLayerPicker:false,
            //animation:false,
            //creditContainer:"credit"
            timeline:true,
            vrButton:false
        });
    </script>
    
    <!-- 2、加载渲染代码 -->
    <script src = "./javaScript/cesiumFlight.js"></script>
    
    <!-- 3、调用更新 -->
    <script>
    
        //测试数据 [时间,经度,纬度,高程]
        var myArray = [
            [0,-119,35.1219512195122,0],
            [10,-118,35.2439024390244,48750],
            [20,-117,35.3658536585366,95000],
            [30,-116,35.4878048780488,138750],
            [40,-115,35.609756097561,180000],
            [50,-114,35.7317073170732,218750],
            [60,-113,35.8536585365854,255000],
            [70,-112,35.9756097560976,288750],
            [80,-111,36.0975609756098,320000],
            [90,-110,36.219512195122,348750],
            [100,-109,36.3414634146341,375000],
            [110,-108,36.4634146341463,398750],
            [120,-107,36.5853658536585,420000],
            [130,-106,36.7073170731707,438750],
            [140,-105,36.8292682926829,455000],
            [150,-104,36.9512195121951,468750],
            [160,-103,37.0731707317073,480000],
            [170,-102,37.1951219512195,488750],
            [180,-101,37.3170731707317,495000],
            [190,-100,37.4390243902439,498750],
            [200,-99,37.5609756097561,500000],
            [210,-98,37.6829268292683,498750],
            [220,-97,37.8048780487805,495000],
            [230,-96,37.9268292682927,488750],
            [240,-95,38.0487804878049,480000],
            [250,-94,38.1707317073171,468750],
            [260,-93,38.2926829268293,455000],
            [270,-92,38.4146341463415,438750],
            [280,-91,38.5365853658537,420000],
            [290,-90,38.6585365853659,398750],
            [300,-89,38.780487804878,375000],
            [310,-88,38.9024390243902,348750],
            [320,-87,39.0243902439024,320000],
            [330,-86,39.1463414634146,288750],
            [340,-85,39.2682926829268,255000],
            [350,-84,39.390243902439,218750],
            [360,-83,39.5121951219512,180000],
            [370,-82,39.6341463414634,138750],
            [380,-81,39.7560975609756,95000],
            [390,-80,39.8780487804878,48750],
            [400,-79,40,0]
            ];
            
        //初始化模型
        doScene('../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',false,0,0,500000,0,0,0);
    
        //用定时器模拟实时更新数据
    
            var i = 0;
            var int = self.setInterval("clock()",20);
            function clock(){
                var d = new Date();
                var t = d.toLocaleTimeString();
                document.getElementById("clock").value = t;
    
                var position = new  Cesium.Cartesian3();
    
                position = Cesium.Cartesian3.fromDegrees(myArray[i][1], myArray[i][2],myArray[i][3]);//(经度,纬度,高程)
    
                var gheading = Cesium.Math.toRadians(i*10);//俯仰角
                var gpitch = Cesium.Math.toRadians(0);//偏行角
                var groll = Cesium.Math.toRadians(0);//滚转角
    
                var hpr = new Cesium.HeadingPitchRoll(gheading,gpitch,groll);
                var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);
    
                //更新位置
                viewer.entities.getById("myEntity").position = position;
                //更新姿态
                viewer.entities.getById("myEntity").orientation  = orientation;
                i++;
    
                if(i==myArray.length){
                    i=0;
                }
            }
        
    
    </script>

    cesiumFlight.js

    /**
     * @function :根据传入参数实时更新模型的的位置和姿态
     * @datetime:2019-2-22 11:07:51
     * @author:一梦
     * @param {*} modelURL  模型url
     * @param {*} isShowInfo 是否显示鼠标当前位置的的经度纬度高程信息
     * @param {*} longitude 经度
     * @param {*} latitude 纬度
     * @param {*} height 高程
     * @param {*} heading 俯仰角
     * @param {*} pitch 偏航角
     * @param {*} roll 滚转角
     */
    function doScene(modelURL,isShowInfo,longitude,latitude,height,heading,pitch,roll){
        if(isShowInfo==true){
            var showInfoHtml =  document.getElementById("showInfo");
            showInfoHtml.innerHTML = '<div id = "latlng_show" style="120px;height:500px;position:absolute;top:10px;left:20px;z-index:1;font-size:15px;">'+
            '<div style="100px;height:30px;float: left;">'+
                '<font size="1" color="white">经 度: <span id="longitude_show"></span></font>'+
            '</div>'+
            '<div style="100px;height:30px;float:left;">'+
                '<font size="1" color="white">维 度: <span id="latitude_show"></span></font>'+
            '</div>'+
            '<div style="120px;height:30px;float:left;">'+
                '<font size="1" color="white">视角高: <span id="altitude_show"></span>km</font>'+
            '</div>'+
            '</div>';
            //经度纬度高程数据显示
            var longitude_show = document.getElementById("longitude_show");
            var latitude_show = document.getElementById("latitude_show");
            var altitude_show = document.getElementById("altitude_show");
            var canvas=viewer.scene.canvas;
            
            var ellipsoid = viewer.scene.globe.ellipsoid;
            var handler = new Cesium.ScreenSpaceEventHandler(canvas);
            
            handler.setInputAction(function(movement){
                var cartesian = viewer.camera.pickEllipsoid(movement.endPosition,ellipsoid);
                if(cartesian){
                    var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                    var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
                    var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
                    var alti_String = (viewer.camera.positionCartographic.height/1000).toFixed(2);
                    longitude_show.innerHTML = log_String;
                    latitude_show.innerHTML = lat_String;
                    altitude_show.innerHTML = alti_String;
                }
            },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    
        }
    
        //指定位置
        var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
    
        //指定姿态
        var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading),Cesium.Math.toRadians(pitch),Cesium.Math.toRadians(roll));
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);
    
        //viewer.entities.removeAll();
        var entity = viewer.entities.add({
            id:"myEntity",
            //自己指定的位置
            position : position,
    
            //使用自己指定的姿态角
            orientation:orientation,
            
            model : {
                uri : modelURL,  //飞机模型
                minimumPixelSize : 64
            },
    
            //Show the path as a pink line sampled in 1 second increments.
            path : {
                resolution : 1,
                material : new Cesium.PolylineGlowMaterialProperty({
                    glowPower : 1.0,
                    color : Cesium.Color.YELLOW
                }),
                width : 1
                
            }
        });
    
        //设置视点
        //viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90),7500000));
    
        //隐藏版权信息
        viewer._cesiumWidget._creditContainer.style.display = "none";
    
    }
  • 相关阅读:
    🔨FFmpeg 转换至 MP4 视频格式
    🔨Ubuntu Linux '门' '复' 显示不标准
    🔨Youtube-dl 开代理搭配 Aria2 多线程加速下载
    📔 如何用英语的思维来思考 How to THINK in English
    🚀 sublime 加速软件下载
    🚀 snap 代理
    🚀 Chocolatey 代理
    🔨 Deepin V20 软件及遇到的问题
    💿 npm 换源 (转载)
    🔨FFmpeg 合并视频
  • 原文地址:https://www.cnblogs.com/airduce/p/10417538.html
Copyright © 2011-2022 走看看