cesium入门学习二

之前学习了cesium的一些基本操作，现在学习cesium怎么加载模型，以及一些其他操作。

1.学习汇总目录

第一篇：cesium入门学习一-CSDN博客

2.cesium效果显示以及代码

2.1 加载模型并显示

效果：

js代码：

javascript 复制代码

// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 模型的经度、纬度、高度
var position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0); // 单位：经度、纬度、高度（米）

// 添加 GLTF 模型
var model = viewer.entities.add({
    name: "GLTF Model",
    position: position,
    model: {
        uri: "/model/scene.gltf", // 替换为你的 GLTF 模型文件路径
        scale: 2.0, // 模型缩放比例
        minimumPixelSize: 128, // 模型的最小像素大小（防止缩放过远消失）
        maximumScale: 200, // 模型最大缩放比例（可选）
        color: Cesium.Color.WHITE.withAlpha(0.8) // 模型颜色和透明度
    }
});

// 将视角缩放到模型
viewer.zoomTo(viewer.entities);

cesium支持三维模型的格式是gltf格式，我自己在网上下载了一个gltf格式的飞机文件，这里的uri路径是相对于html的路径。

路径显示图：

模型：

js文件的路径：

代码是在index.js里面写的。

2.2 飞机移动

效果：

另外一个时刻：

代码：

javascript 复制代码

// // 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 模型的初始位置
var initialPosition = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0);

// 添加 GLTF 模型
var model = viewer.entities.add({
    name: "GLTF Model",
    position: initialPosition,
    model: {
        uri: "/model/scene.gltf", // 替换为你的 GLTF 模型路径
        scale: 2.0,
        minimumPixelSize: 128,
        color: Cesium.Color.WHITE.withAlpha(0.8)
    }
});

// 定义轨迹点数组（初始包含模型的初始位置）
var positions = [initialPosition];

// 添加轨迹线
var polyline = viewer.entities.add({
    name: "Flight Path",
    polyline: {
        positions: positions, // 动态更新轨迹点
        width: 3, // 线的宽度
        material: Cesium.Color.RED, // 线的颜色
        clampToGround: false // 轨迹线是否贴地
    }
});

// 动态更新模型位置和轨迹
var startTime = Cesium.JulianDate.now();
viewer.clock.onTick.addEventListener(function () {
    // 计算时间间隔
    var currentTime = Cesium.JulianDate.now();
    var elapsedSeconds = Cesium.JulianDate.secondsDifference(currentTime, startTime);

    // 动态计算模型位置（模拟飞行轨迹）
    var longitude = -107.0 + elapsedSeconds * 0.01; // 模拟经度变化
    var latitude = 40.0 + Math.sin(elapsedSeconds * 0.1) * 0.1; // 模拟纬度变化
    var height = 300.0 + Math.cos(elapsedSeconds * 0.1) * 50; // 模拟高度变化

    var newPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

    // 更新模型位置
    model.position = newPosition;

    // 更新轨迹点数组
    positions.push(newPosition);
    polyline.polyline.positions = positions; // 更新轨迹线
});

// 将视角缩放到模型和轨迹
viewer.zoomTo(viewer.entities);

2.3 飞机移动显示轨迹线

效果：

有线，但是不是我最终要的效果

js代码：

javascript 复制代码

//创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 规划路径的经纬度、高度点
var plannedPositions = [
    Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0),
    Cesium.Cartesian3.fromDegrees(-106.9, 40.1, 350.0),
    Cesium.Cartesian3.fromDegrees(-106.8, 40.2, 400.0),
    Cesium.Cartesian3.fromDegrees(-106.7, 40.3, 450.0),
    Cesium.Cartesian3.fromDegrees(-106.6, 40.4, 500.0)
];

// 绘制规划的轨迹线
var plannedPolyline = viewer.entities.add({
    name: "Planned Path",
    polyline: {
        positions: plannedPositions,
        width: 3, // 线的宽度
        material: Cesium.Color.GREEN, // 规划路径为绿色
        clampToGround: false // 是否贴地
    }
});

// 初始化飞机模型位置（起点）
var model = viewer.entities.add({
    name: "GLTF Model",
    position: plannedPositions[0], // 起始点
    model: {
        uri: "/model/scene.gltf", // 替换为你的 GLTF 模型路径
        scale: 2.0,
        minimumPixelSize: 128,
        color: Cesium.Color.WHITE.withAlpha(0.8)
    }
});

// 已经过的轨迹点
var passedPositions = [plannedPositions[0]];

// 绘制已走的轨迹线
var passedPolyline = viewer.entities.add({
    name: "Passed Path",
    polyline: {
        positions: passedPositions,
        width: 3,
        material: Cesium.Color.RED, // 已走的路径为红色
        clampToGround: false
    }
});

// 动态移动飞机并更新已走的轨迹线
var startTime = Cesium.JulianDate.now();
var totalSteps = plannedPositions.length - 1; // 总段数
var stepDuration = 5; // 每段的飞行时间（秒）

viewer.clock.onTick.addEventListener(function () {
    // 当前时间
    var currentTime = Cesium.JulianDate.now();
    var elapsedSeconds = Cesium.JulianDate.secondsDifference(currentTime, startTime);

    // 计算当前所在段及进度
    var segmentIndex = Math.floor(elapsedSeconds / stepDuration);
    var segmentProgress = (elapsedSeconds % stepDuration) / stepDuration;

    if (segmentIndex < totalSteps) {
        // 当前段的起点和终点
        var startPoint = plannedPositions[segmentIndex];
        var endPoint = plannedPositions[segmentIndex + 1];

        // 计算飞机的当前位置（线性插值）
        var currentPosition = Cesium.Cartesian3.lerp(
            startPoint,
            endPoint,
            segmentProgress,
            new Cesium.Cartesian3()
        );

        // 更新飞机模型位置
        model.position = currentPosition;

        // 更新已走的轨迹
        if (segmentProgress === 0 && !passedPositions.includes(startPoint)) {
            passedPositions.push(startPoint); // 添加段起点到已走轨迹
        }
        passedPositions.push(currentPosition); // 动态添加当前位置
        passedPolyline.polyline.positions = passedPositions; // 更新已走轨迹线
    } else {
        // 飞机到达终点后停止更新
        model.position = plannedPositions[totalSteps];
    }
});

// 将视角缩放到路径范围
viewer.zoomTo(viewer.entities);