网站制作 网站建设 杭州软件外包平台

网站制作 网站建设 杭州,软件外包平台,自己开平台怎么弄啊,企业为什么要做手机网站这一节#xff0c;我们把“飞机”请进 Cesium#xff1a;从起飞到降落#xff0c;全程按真实时间点飞行#xff0c;轨迹自动插值、机头自动对准航线#xff0c;再配上路径尾迹#xff0c;一眼就能看到它越洋跨洲的全过程。 一、思路#xff1a;把“轨迹点”变成“时间位…这一节我们把“飞机”请进 Cesium从起飞到降落全程按真实时间点飞行轨迹自动插值、机头自动对准航线再配上路径尾迹一眼就能看到它越洋跨洲的全过程。一、思路把“轨迹点”变成“时间位置对”飞行轨迹其实就是一串带时间戳的经纬度高度点。Cesium 的SampledPositionProperty专门吃这种“时间-位置”对内部自动线性插值飞机就能平滑飞行无需我们手动算补间。二、准备数据30 秒一步总时长由点数决定/* 1. 新建“时间位置对”容器 */ const positionProperty new Cesium.SampledPositionProperty(); /* 2. 每 30 秒一个点总时长 (点数 - 1) × 30 */ const timeStepInSeconds 30; const durationInSeconds (flight.length - 1) * timeStepInSeconds; /* 3. 起止时间JulianDate */ const time new Cesium.JulianDate.fromDate(new Date(2023-01-01T00:00:00Z)); const end Cesium.JulianDate.addSeconds(time, durationInSeconds, new Cesium.JulianDate()); /* 4. 把起止时间钉到场景时钟 */ viewer.clock.startTime time.clone(); viewer.clock.stopTime end.clone(); viewer.clock.currentTime time.clone(); viewer.timeline.zoomTo(time, end); // 底部时间轴对齐flight是提前准备好的数组每条记录含lon / lat / alt30 秒一步踩点越多航线越丝滑。三、逐点喂数据红点标记 位置插值flight.forEach((item, index) { /* 计算当前点的时间戳 */ const ctime Cesium.JulianDate.addSeconds(time, index * timeStepInSeconds, new Cesium.JulianDate()); /* 转成 Cartesian3 */ const position Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.alt); /* 塞进插值器 */ positionProperty.addSample(ctime, position); /* 顺便画个红点方便调试轨迹 */ viewer.entities.add({ name: position ${index}, position: position, point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, }, }); });红点即航点飞机将在它们之间自动插值飞行。四、创建飞机实体模型 尾迹 自动朝向const fly viewer.entities.add({ name: plane, availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: time, stop: end }) // 只在起止时间内可见 ]), position: positionProperty, // 时间位置对自动插值 orientation: new Cesium.VelocityOrientationProperty(positionProperty), // 机头自动对准速度方向 model: { preload: true, uri: ./models/ju52.glb, // 自己的 glb 模型 minimumPixelSize: 100, // 最远也不小于 100 px silhouetteColor: Cesium.Color.ORANGE, // 橙色描边 silhouetteSize: 2, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000.0), // 50 km 外隐藏 }, path: new Cesium.PathGraphics({ width: 5, // 轨迹线宽 5 px }), }); /* 让相机一直跟拍 */ viewer.trackedEntity fly;一句话总结position绑时间飞机自动飞VelocityOrientationProperty让机头永远冲前PathGraphics自动生成渐变尾迹。五、运行效果点击播放键飞机沿红点连线平滑飞行转弯时机头实时对准切线身后拖着 5 px 宽的淡色轨迹镜头自动跟拍——全过程零数学、零关键帧全靠 Cesium 插值。六、可扩展玩法想再快把timeStepInSeconds改小或clock.multiplier加大想更炫给path.material换成发光飞线想更真实把高度数组换成真实气压高度把速度换算成时间间隔。下节课我们让飞机“边飞边变色”再给它加个“落地烟雾”一条真正的航班演示就杀青了。