Cesium神器：让地球“飞”到你的页面，搭建惊艳的三维场景应用！

前端

2023-09-23 16:04:23

拥抱三维可视化的未来：使用 Vite + Vue3 + Cesium 打造震撼人心的世界

简介

在数据爆炸的时代，三维可视化已成为各个领域的强力工具。它将复杂的信息转化为引人入胜的画面，提升理解和吸收效率。而 Cesium，由 AGI 公司开发的开源 JavaScript 库，正是这一领域的璀璨明星。

Cesium：三维可视化新星

Cesium 拥有令人惊叹的特性：

WebGL 技术构建： 在现代浏览器中渲染逼真的三维场景。
数据格式支持丰富： 地形、影像、模型等一网打尽。
API 强大： 轻松定制和扩展功能。

Vite + Vue3：三维可视化的完美搭档

为了简化 Cesium 的使用，我们隆重推出 Vite + Vue3 的组合。

Vite： 轻量级构建工具，启动迅速、热重载快捷。
Vue3： 流行的 JavaScript 框架，语法简洁、响应式系统强大。

创建第一个 Cesium 项目

步骤 1：构建 Vue3 项目

vue create my-cesium-project

步骤 2：安装 Vite 和 Cesium

npm install vite cesium

步骤 3：配置 Vite

在 vite.config.js 文件中：

// vite.config.js
import { defineConfig } from 'vite'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [cesium()]
})

步骤 4：创建 Cesium 场景

在 src/App.vue 文件中：

<template>
  <div id="cesiumContainer" />
</template>

<script>
import * as Cesium from 'cesium'

export default {
  mounted() {
    const viewer = new Cesium.Viewer('cesiumContainer')

    // 添加地形
    const terrainProvider = new Cesium.CesiumTerrainProvider({
      url: 'https://assets.agi.com/stk-terrain/world'
    })
    viewer.terrainProvider = terrainProvider

    // 添加图层
    const imageryLayers = viewer.imageryLayers
    const bingMapsLayer = imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider())
    bingMapsLayer.alpha = 0.5

    // 定位到指定位置
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 10000.0)
    })
  }
}
</script>