VUE+Cesium 初始化地球，加载三维模型（.glb），绘制轨迹线，homebutton 按键重写（默认定位位置的设置）

在VUE+Cesium项目中，我们可以通过以下步骤实现初始化地球，加载三维模型（.glb），绘制轨迹线，以及重写homebutton的默认定位位置。
1. 初始化地球
首先，我们需要安装Cesium依赖，然后在项目中引入Cesium。在Cesium的示例中，地球被初始化为一个可缩放的2D视图。我们可以使用Cesium.buildModuleUrl.setBaseUrl来设置Cesium的资源路径。

import { buildModuleUrl } from 'cesium/Build/Cesium/Core';
import { setBaseUrl } from 'cesium/Build/Cesium/Core/buildModuleUrl';
setBaseUrl('./cesium/');

2. 加载三维模型（.glb）
我们可以使用Cesium的Model来加载.glb文件。首先，我们需要在cesium/Build/Cesium/Widgets/widgets.css中添加以下样式：

.cesium-viewer-modelPrimitive-asSurface {
fill: #FF0000;
}

然后，在Vue组件中，我们可以创建一个Model来加载.glb文件：
javascript import { Model } from 'cesium/Widgets/Models/Model'; export default { data() { return { viewer: null, modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.627100, 40.024985)), model: null, }; }, mounted() { this.initViewer(); this.loadModel(); }, methods: { initViewer() { this.viewer = new Cesium.Viewer('cesiumContainer'); this.viewer.scene3D.modelMatrix = this.modelMatrix; }, loadModel() { const modelMatrix = this.modelMatrix; const model = new Cesium.Model({ uri: './models/myModel.glb', // 模型的路径，可以根据实际需求更改路径。 modelMatrix: modelMatrix, // 设置模型矩阵，可以让模型以不同的姿态呈现。 scale: 10000, // 设置模型大小。 }); this.viewer.scene3D.primitives.add(model); // 将模型添加到场景中。 this.$refs.viewer3D.$on('click', this.onModelClick); // 监听模型点击事件。 }, }, };3. 绘制轨迹线在Cesium中，可以使用Cesium.Cartesian3来定义三维坐标点，使用Cesium.Polyline来绘制轨迹线。我们可以通过Cesium.sampleTerrain来获取地图上不同位置的经纬度坐标，然后将这些坐标点连接成线，从而绘制出轨迹线。javascriptjavascript
import { sampleTerrainMostDetailed } from ‘cesium/Source/Widgets/widgets.js’; // Cesium提供的采样地形函数。可以用来获取不同位置的经纬度坐标。
const points = sampleTerrainMostDetailed(positions); // 采样地形函数需要传入一个经纬度坐标数组作为参数。这里可以根据实际需求设置坐标数组。const line = viewer.entities.add({ // 创建一条轨迹线polyline: { // 设置轨迹线的样式points: points, // 设置轨迹线的坐标点material: Cesium.Color.RED, // 设置轨迹线的颜色width: 5, // 设置轨迹线的宽度join: Cesium.LineJoinType.MITER, // 设置轨迹线的连接样式} }); **4. 重写homebutton的默认定位位置**默认情况下，homebutton会将视角重置到地球的默认视图。我们可以通过修改地球的模型矩阵来实现重写homebutton的默认定位位置。具体做法是在`setView`函数中设置新的模型矩阵：javascript```javascript this.viewer.camera.setView({ // 设置新的视角方向目标position : Cesium.Cartesian3.fromDegrees(-75, 40), // 设定相机初始位置