合肥网站建设服务公司,银川制作网站,html5门户网站模版,网站建设实训个人可以直接settimeout隔一段时间直接设置位置属性#xff0c;但是得到的结果模型不是连续的移动#xff0c;如果想要连续的移动#xff0c;就需要设置一个时间轴#xff0c;然后给模型传入不同时间时的位置信息#xff0c;然后就可以了。
开启时间轴 let start Cesium.Jul…可以直接settimeout隔一段时间直接设置位置属性但是得到的结果模型不是连续的移动如果想要连续的移动就需要设置一个时间轴然后给模型传入不同时间时的位置信息然后就可以了。
开启时间轴 let start Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间start Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate())//东八区let stop Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()) viewer.clock.startTime start.clone()// 设置时钟当前时间viewer.clock.currentTime start.clone()// 设置时钟结束时间viewer.clock.stopTime stop.clone();// 数字越大时间过的越快viewer.clock.multiplier 10// 循环执行viewer.clock.clockRange Cesium.ClockRange.LOOP_STOP; 想让模型跟随移动方向切换方向 orientation : new Cesium.VelocityOrientationProperty(position)
但是刚开始机头的朝向并不是速度的方向所以一直会偏差查询之后发现有点复杂初学者还是暂时放弃
飞机整体代码这样,这里有个小坑原生cesium你要绑定时间轴还需要设置availability但是supermap这个没有你加上就没有图像了 var planenew Cesium.Entity({position:property,model: {uri:src/assets/gltf/plane/scene.gltf,minimumPixelSize: 128, //模型最小像素maximumScale: 200, //模型最大放大倍数},orientation: new Cesium.VelocityOrientationProperty(property)})viewer.entities.add(plane)function computeFlight(source:any) {let property new Cesium.SampledPositionProperty();for (let i 0; i source.length; i) {//时间间隔let time Cesium.JulianDate.addSeconds(start, source[i][2], new Cesium.JulianDate);//坐标和高度let position Cesium.Cartesian3.fromDegrees(source[i][0], source[i][1], 600);property.addSample(time, position);}return property;
} 在后面加一条轨迹线
const entityPath new Cesium.Entity({position: property,path: {show: true,leadTime: 0,trailTime: 30,width: 6,resolution: 1,material:Cesium.Color.YELLOW,},});
初学做的不好后面学多了会做好看的 总的代码
templatediv classPartOneBoxdiv idcesiumContainer/div/div
/templatescript setup langts
import { ref, reactive,onMounted} from vueconst plane1Position[[104.173,30.822,0],[104.178,30.837,100],[104.19,30.837, 200],[104.185,30.82,300],[104.173,30.822,400],]let start Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间start Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间let stop Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒onMounted(async()
{let viewer new Cesium.Viewer(cesiumContainer)// 设置时钟开始时间viewer.clock.startTime start.clone();// 设置时钟当前时间viewer.clock.currentTime start.clone();// 设置时钟结束时间viewer.clock.stopTime stop.clone();// 时间速率数字越大时间过的越快设置1好像是和实际时间一样viewer.clock.multiplier 20// 循环执行到达终止时间重新从起点时间开始viewer.clock.clockRange Cesium.ClockRange.LOOP_STOP;var labelImagery new Cesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle[IMG_C],//天地图全球中文注记服务token: 你的 //由天地图官网申请的密钥});viewer.imageryLayers.addImageryProvider(labelImagery);viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(104.18,30.83,3500)})var geo new Cesium.Entity({position:Cesium.Cartesian3.fromDegrees(104.18,30.83,1650),wall:{positions:Cesium.Cartesian3.fromDegreesArrayHeights([104.173,30.822,400,104.178,30.837,400,104.19,30.837, 400,104.185,30.82,400,104.173,30.822,400,]),material:Cesium.Color.RED.withAlpha(.4),outline: true,},polyline:{positions:Cesium.Cartesian3.fromDegreesArrayHeights([104.18,30.83,0,104.18,30.83,1600]),material:Cesium.Color.BLUE,width:5},label: {text: 好的大学没有围墙, font: 14px sans-serif, showBackground: true,backgroundColor:new Cesium.Color(50,50,50,.6)},})let property computeFlight(plane1Position) var planenew Cesium.Entity({position:property,model: {uri:src/assets/gltf/plane/scene.gltf,minimumPixelSize: 128, //模型最小像素maximumScale: 200, //模型最大放大倍数},orientation: new Cesium.VelocityOrientationProperty(property)})const entityPath new Cesium.Entity({position: property,path: {show: true,leadTime: 0,trailTime: 30,width: 6,resolution: 1,material:Cesium.Color.YELLOW,},});viewer.entities.add(geo)viewer.entities.add(plane)viewer.entities.add(entityPath)})
function computeFlight(source:any) {let property new Cesium.SampledPositionProperty();for (let i 0; i source.length; i) {//时间间隔let time Cesium.JulianDate.addSeconds(start, source[i][2], new Cesium.JulianDate);//坐标和高度let position Cesium.Cartesian3.fromDegrees(source[i][0], source[i][1], 600);property.addSample(time, position);}return property;
}/scriptstyle scoped langscss
.PartOneBox
{width:1200px;height:1000px;margin:50px auto;position:relative;.cesiumContainer{width:100%;height:100%;}
}/style
