Cesium 三维地球入门教程

Cesium 是一个强大的开源 JavaScript 库,用于创建基于 Web 的三维地球和地图应用。本教程将带你快速上手 Cesium 开发。

安装 Cesium

使用 npm 安装 Cesium:

npm install cesium

创建第一个地球

import * as Cesium from 'cesium';

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000)
});

添加三维模型

Cesium 支持加载 glTF 格式的三维模型:

const position = Cesium.Cartesian3.fromDegrees(116.4, 39.9, 500);
const heading = Cesium.Math.toRadians(135);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

const entity = viewer.entities.add({
  name: 'Building',
  position: position,
  orientation: orientation,
  model: {
    uri: './models/building.glb',
    minimumPixelSize: 128,
    maximumScale: 20000
  }
});

总结

通过本教程,你已经学会了 Cesium 的基础用法。接下来可以探索更多高级功能,如影像图层叠加、地形分析、飞行动画等。


相关文章

前端渲染大型表格方法总结

前端渲染大型表格方法总结

Vue 3 组合式 API 完全指南

深入理解 Vue 3 Composition API 的核心概念和最佳实践