Cesium 基础教程：从入门到航线绘制Cesium 基础教程：从入门到航线绘制一、环境搭建 1. 项目初始化 2.

Cesium 基础教程：从入门到航线绘制

先看效果

一、环境搭建

1. 项目初始化

创建 Vue 项目
npm create vite@latest my-cesium-project -- --template vue
安装依赖
cd my-cesium-project
npm install cesium

2. 基础配置

// main.js
import as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
// 设置 Cesium token
Cesium.Ion.defaultAccessToken = 'your_token_here'

二、Cesium 基础使用

1. 初始化地球

// App.vue
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 动画小部件
baseLayerPicker: false, // 底图切换
fullscreenButton: false, // 全屏按钮
geocoder: false, // 地理编码搜索
homeButton: false, // home按钮
infoBox: false, // 信息框
sceneModePicker: false, // 场景模式切换
selectionIndicator: false, // 选择指示器
timeline: false, // 时间轴
navigationHelpButton: false, // 帮助按钮
shouldAnimate: true, // 动画效果
})
// 移除默认的底图图层
viewer.scene.globe.enableLighting = false
viewer.scene.globe.baseColor = Cesium.Color.WHITE

2. 视角控制

// 设置初始视角
function setInitialView() {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
114.3, 30.5, 10000 // 经度、纬度、高度
),
orientation: {
heading: Cesium.Math.toRadians(0), // 方向
pitch: Cesium.Math.toRadians(-45), // 俯仰角
roll: Cesium.Math.toRadians(0) // 翻滚角
}
})
}

三、航线绘制实现

1. 航线数据结构

// data/flightRoutes.js
export const flightRoutes = {
route1: {
name: '航线1',
waypoints: [
[114.3, 30.5, 500], // [经度, 纬度, 高度]
[114.4, 30.6, 600],
[114.5, 30.5, 550]
]
}
}

2. 航线绘制

// 转换航线点为 Cartesian3 坐标
const positions = route.waypoints.map(point =>
Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2])
)
// 创建管道状航线
viewer.entities.add({
polylineVolume: {
positions: positions,
shape: computeCircle(90), // 管道横截面
material: new Cesium.ColorMaterialProperty(
Cesium.Color.fromCssColorString('#00FFFF').withAlpha(0.1)
),
outline: true,
outlineColor: Cesium.Color.fromCssColorString('#00FFFF').withAlpha(0.2),
outlineWidth: 2
}
})

3. 航线标记点

// 添加起点标记
viewer.entities.add({
position: positions[0],
label: {
text: '起点',
font: '16px sans-serif',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -10)
},
point: {
pixelSize: 10,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2
}
})

4. 方向箭头

function addDirectionArrows(route, color) {
const positions = route.positions
const arrowCount = Math.min(positions.length - 1, 10)
for (let i = 0; i < positions.length - 1; i += arrowCount) {
const startPosition = positions[i]
const endPosition = positions[i + 1]
// 计算箭头位置和方向
const midPosition = Cesium.Cartesian3.lerp(
startPosition,
endPosition,
0.5,
new Cesium.Cartesian3()
)
// 添加箭头实体
viewer.entities.add({
position: midPosition,
billboard: {
image: '/arrow.png',
scale: 0.45,
color: Cesium.Color.fromCssColorString(color),
verticalOrigin: Cesium.VerticalOrigin.CENTER,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
}
})
}
}

四、飞行漫游实现

1. 飞行控制类

// utils/flyUtils.js
export class RouteFlyer {
constructor(viewer, route) {
this.viewer = viewer
this.route = route
this.currentIndex = 0
this.animationInterval = null
}
start() {
this.animationInterval = setInterval(() => {
// 更新位置
this.currentIndex += this.options.speed
if (this.currentIndex >= this.route.positions.length - 1) {
this.currentIndex = 0
}
// 更新相机视角
this.updateCamera()
}, 50)
}
stop() {
if (this.animationInterval) {
clearInterval(this.animationInterval)
this.animationInterval = null
}
}
}

2. 视角控制

// 视角切换实现
function toggleViewMode() {
isTopView.value = !isTopView.value
if (activeFlyer) {
activeFlyer.setViewMode(isTopView.value)
}
}

五、性能优化

1. 实体管理

// 清理实体
function cleanup() {
viewer.entities.removeAll()
viewer.scene.primitives.removeAll()
}
// 批量添加实体
function batchAddEntities(entities) {
const collection = new Cesium.EntityCollection()
entities.forEach(entity => collection.add(entity))
viewer.entities.add(collection)
}

2. 视图优化

// 优化渲染性能
viewer.scene.globe.enableLighting = false
viewer.scene.fog.enabled = false
viewer.scene.globe.showGroundAtmosphere = false
viewer.targetFrameRate = 30
viewer.scene.requestRenderMode = true

六、注意事项

坐标转换

经纬度坐标需要转换为 Cartesian3
注意高度值的单位（米）

性能考虑

控制实体数量
使用批量操作
适当降低更新频率

视角控制

合理设置相机参数
提供平滑的过渡效果
考虑不同场景需求

总结

通过以上步骤，我们实现了：

Cesium 环境搭建
基础地球的创建
航线的绘制和标记
飞行漫游功能
性能优化措施

这些功能为构建复杂的三维可视化应用提供了基础。

参考资料

有需要代码的可以私聊我没穿github ，后面有时间再优化完善传上去