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="width:120px;height:500px;position:absolute;top:10px;left:20px;z-index:1;font-size:15px;">'+ '<div style="width:100px;height:30px;float: left;">'+ '<font size="1" color="white">经 度: <span id="longitude_show"></span></font>'+ '</div>'+ '<div style="width:100px;height:30px;float:left;">'+ '<font size="1" color="white">维 度: <span id="latitude_show"></span></font>'+ '</div>'+ '<div style="width: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"; }
.
