『CesiumJS』初体验

德育处主任
0 阅读3分钟

点赞 + 关注 + 收藏 = 学会了

💡整理了一个 『CesiumJS』 入门专栏，感兴趣的工友可以戳这里关注 👉 《CesiumJS 入门教程》

CesiumJS 是目前 Web 端很厉害的开源 3D 地球与地图可视化库。

简单来说，Cesium 就是一个“运行在浏览器里的 3D 地球仪”。

它基于WebGL技术，不用安装任何浏览器插件，直接在网页里就能运行，核心能力就是帮我们快速做出立体地球、卫星地图、地理点位标注、地形展示等效果，不管是做简单的地图展示、旅游点位标注，还是智慧城市、航天轨迹模拟这类复杂项目，都能轻松实现。

环境准备

本专栏用 Vue3 项目来讲解 Cesium 的用法。使用 React 或者其他框架的工友也不用担心，Vue3 的语法足够简单，Cesium 也能在其他框架下运行。

我用 Vite 创建一个 Vue3 项目，你可以用其他方式创建。

安装 Cesium

在项目根目录下运行：

npm install cesium

安装配套插件

由于 Cesium 包含大量的静态资源（着色器、贴图、Web Worker），手动配置 Vite 路径非常繁琐。推荐使用 vite-plugin-cesium 插件自动处理所有配置。

npm install vite-plugin-cesium -D

配置 vite.config.js

在 vite.config.js (或 .ts) 中引入并使用该插件。

import { defineConfig } from 'vite'
import vue from '@vue/vite-plugin-vue'
import cesium from 'vite-plugin-cesium' // 引入插件

export default defineConfig({
  plugins: [
    vue(),
    cesium() // 配置插件
  ]
})

这一步之后，Cesium 的静态资源会自动拷贝到构建目录，并正确配置基础路径，无需手动搬运 Assets 文件夹。

在 Vue 3 组件中使用

接下来编写一个简单的组件来显示 3D 地球。

在模板中定义一个带 id 的 div，并设置宽高，然后等 div 组件渲染出来后再用 Cesium 渲染一个地球，一定要遵循这个流程，不然可能会报错。

在 Vue 3 用 onMounted 这个生命周期能实现上面的要求。

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

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer');
});

</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

通过 new Cesium.Viewer() 创建了一个核心视窗，它能管理地球、时间轴、选择器等所有交互。Viewer() 里可以传入多个参数，第一个参数是要将地图绑定的元素。

隐藏版权信息

细心的工友可能已经发现，页面底部有一句版权信息。

想去掉这句信息需要在 Cesium 官网驻车一个 Access Token，免费的，放心～

打开 Cesium 官网，注册一个👉 ion.cesium.com/signin/toke…

注册并登录成功后，回到 Cesium 这里就能看到右侧有个 Token，把它复制到你的代码里。

这样操作后，下方的提示就变成稍微正版一点了。

// 省略部分代码
onMounted(() => {
	Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE'; // 在这里填入你的 Cesium Ion Access Token
  const viewer = new Cesium.Viewer('cesiumContainer');
});

如果想要再简洁点，可以将 LOGO 元素的 display 设置为 none。

// 省略部分代码
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';
  const viewer = new Cesium.Viewer('cesiumContainer');
  viewer._cesiumWidget._creditContainer.style.display = "none";
});

隐藏控件

此时页面右上角和页面底部还有一些控件，如果只想保留一个地球在页面里，可以这么操作。

// 省略部分代码
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,       // 关闭底部动画控件
    timeline: false,        // 关闭底部时间轴控件
    fullscreenButton: false, // 关闭底部全屏按钮
    baseLayerPicker: false, // 关闭右上角图层选择器
    geocoder: false, // 关闭右上角搜索框
    homeButton: false, // 关闭右上角主页按钮
    navigationHelpButton: false, // 关闭右上角问号帮助按钮
    sceneModePicker: false, // 关闭右上角地球场景切换按钮
  });
  viewer._cesiumWidget._creditContainer.style.display = "none";
});

以上就是本文的全部内容啦，想了解更多 CesiumJS 用法记得关注《CesiumJS 入门教程》👏

点赞 + 关注 + 收藏 = 学会了

avatar
文章
阅读
粉丝