初识Cesium

菜鸟码猿
651 阅读4分钟

Cesium 介绍📙

1666759171338.png

官方解释：CesiumJS 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各种支持。

Cesium的特点：

  • Cesium是一个跨平台、跨浏览器展示的三维地球和地图的JavaScript库，通过WebGl进行图形渲染，无需安装任何插件（前提是浏览器必须支持WebGl）。
  • 强大的地理数据可视化能力。Cesium自定义的3DTiles数据格式支持海量数据高效渲染，支持时间序列动态数据的三维可视化，具备太阳、大气、云雾等地理环境要素的动态模拟及其他自定义的三维模型、地形等要素的加载绘制。
  • 支持三维地图（3D）、二维地图（2D）、哥伦布视图（2.5D）三类地图模式的地理数据展示。

学习资料：

初始化项目🚀

基于Vite前端构建工具建立一个Cesium的demo，采用Vue3的setup语法糖进行编码。在正式开发之前，建议读者注册账户Cesium账号并申请一个令牌（Token），便于获取应用的全球卫星图像和真实世界的3D内容。

注册账号申请Token🔑

1666967614677.png

构建项目📂

推荐三种构建方式，具体可以去浏览Vite官方文档：vitejs.cn/vite3-cn ,这里使用的是yarn

# npm
npm create vite@latest 项目名 -- --template vue

# yarn
yarn create vite 项目名 --template vue

# pnpm
pnpm create vite 项目名 --template vue

然后根据提示，进入到文件目录下，下载依赖包，然后运行项目

cd viteCesium
yarn
yarn dev

配置项目🔧

通过yarn或其他下载第三方包的方式，下载我们需要的依赖包和和插件

yarn add cesium
yarn add vite-plugin-cesium vite

接下来就开始配置我们的项目，具体可以看官方文档说明：github.com/nshen/vite-…

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
export default defineConfig({
  plugins: [vue(), cesium()],
})

读者可直接在根目录的App.vue文件下编码，当然笔者更倾向于创建路由的方式进行编码，毕竟要学习的东西很多，可以很好记载自己的修炼历程。路由Vue Router的用法具体请学习官方文档：router.vuejs.org/zh/introduc…

具体操作：

  • 下载Vue Router包：yarn add vue-router@4

  • 在components文件夹下，新建cesium.vue文件并编码

  • 在src文件夹下，新建一个router文件夹，里面新建一个index.js文件，创建路由规则及路由对象并导出

  • 在main.js导入路由对象并挂载

文件目录如下：

viteCesium
├─ .gitignore
├─ README.md
├─ index.html
├─ node_modules
├─ package.json
├─ public
│    └─ vite.svg
├─ src
│    ├─ App.vue
│    ├─ assets
│    │    └─ vue.svg
│    ├─ components
│    │    └─ cesium.vue
│    ├─ main.js
│    ├─ router
│    │    └─ index.js
│    └─ style.css
├─ vite.config.js
└─ yarn.lock

实例代码如下：

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
// 创建路由规则
const routes = [
  {
    path: '/',
    name: 'cesium',
    component: () => import('../components/cesium.vue'),
  },
]

// 创建路由
const router = createRouter({
  // 路由模式主要有两种，一种是hash模式，一种是history模式，这里笔者使用的是hash模式
  history: createWebHashHistory(),
  routes,
})

// 导出路由
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import router from './router/index'
const app = createApp(App)
// 挂载路由
app.use(router)
app.mount('#app')

components/cesium.vue

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

onMounted(() => {
 	 // 设置 token
  const Token = 'your token'
  Cesium.Ion.defaultAccessToken = Token
  const viewer = new Cesium.Viewer('cesiumContainer')
})
</script>

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

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

App.vue

<script setup></script>

<template>
  <router-view></router-view>
</template>

<style scoped></style>

Cesium默认控件🔨

上述代码运行效果图如下：

1666972940063.png

  1. Geocoder：定位搜索工具，默认使用微软的Bing地图
  2. HomeButton：将视野带回到默认视角（默认视角为美国区域）
  3. SceneModePicker：场景控制器，负责2维、3维、2.5维（哥伦比亚地图）场景切换
  4. BaseLayerPicker：基础图层选择器，可选择基础地图服务和地形服务
  5. NavigatorHelpButton：导航帮助按钮，显示有关地图控制的帮助信息
  6. Animation：控制场景中动画的播放与暂停，并支持调节动画播放的速率
  7. Timeline：指示当前时间，类似于视频播放进度条，可以通过鼠标任意切换动画的进度
  8. CreditDisplay：展示Cesium的版权和地图数据版权
  9. FullscreenButton：全屏按钮，控制当前页面是否全屏显示

消除页面默认控件，并列举了一些配置项，将默认视角设置为中国区域

components/cesium.vue

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Rectangle from 'cesium/Source/Core/Rectangle'

onMounted(() => {
   // 设置 token
  const Token = 'your token'
  Cesium.Ion.defaultAccessToken = Token
  // 将默认视角设置为中国区域
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(
    89.5,
    20.4,
    110.4,
    61.2
  )
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, //是否创建动画小器件，左下角仪表
    baseLayerPicker: false, //是否显示图层选择器
    fullscreenButton: false, //是否显示全屏按钮
    vrButton: false, // 用于切换 VR 模式的单个按钮小部件。
    geocoder: false, // //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, //是否显示时间轴
    navigationHelpButton: false, //是否显示右上角的帮助按钮
    navigationInstructionsInitiallyVisible: true,
    scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    shouldAnimate: false, // 初始化是否开始动画
    clockViewModel: undefined, // 一个视图模型，它为用户界面提供 Clock
    selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
    selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
    skyAtmosphere: new Cesium.SkyAtmosphere(), // 围绕提供的椭球体边缘绘制的大气
    fullscreenElement: document.body, //全屏时渲染的HTML元素,
    useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为true
    targetFrameRate: undefined, //使用默认render loop时的帧率
    showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息
    automaticallyTrackDataSourceClocks: false, //自动追踪最近添加的数据源的时钟设置
    contextOptions: {}, //传递给Scene对象的上下文参数（scene.options）
    sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
    mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系
    globe: undefined, // 在场景中渲染的地球仪，包括其地形 ( Globe#terrainProvider ) 和图像图层 ( Globe#imageryLayers )
    orderIndependentTranslucency: true,
    dataSources: new Cesium.DataSourceCollection(), //需要进行可视化的数据源的集合
    projectionPicker: undefined, //ProjectionPicker 是用于在透视和正交投影之间切换的单按钮小部件。
    terrainProvider: Cesium.createWorldTerrain({
      // 启用水体效果
      requestWaterMask: true,
      // 基于太阳位置开启地形照明
      requestVertexNormals: true,
    }),
  })
  // 开启/关闭光照
  viewer.scene.globe.enableLighting = false
  // 开启深度检测
  viewer.scene.globe.depthTestAgainstTerrain = true
  // 去除版权信息
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  // 限制缩放距离
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000
})
</script>

效果图如下：你看，这个球可真是又大又圆了😁😁

1666974299803.png

tips：至此，一个Cesium的demo就完成啦。

avatar
文章
阅读
粉丝