Cesium使用

原创已于 2026-07-29 08:00:23 修改 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Cesium

于 2025-04-13 08:29:20 首次发布

Cesium官网：https://cesiumjs.org
官方API文档：https://cesium.com/learn/ion-sdk/ref-doc
中文API文档：https://cesium.xin/cesium/cn/Documentation1.95
　　　　　　　https://cesium.xin
Cesium中文社区：http://cesiumcn.org
SuperMap示例
 【UE5+Cesium】智慧城市开发教程
 Cesium入门到实战
 WebGIS开发丨零基础入门Vue+Cesium三维可视化开发项目(Entity)

1、Cesium for Unreal

Cesium for Unreal官网： https://cesium.com/platform/cesium-for-unreal/
Cesium for Unreal官方文档：https://cesium.com/learn/unreal/unreal-quickstart/
Cesium for Unreal快速入门
 【UE5新手必看】Cesium for Unreal入门：手把手教你搭建三维场景

2、cesium for unreal linux

官网介绍：https://cesium.com/learn/cesium-unreal/ref-doc/developer-setup-linux.html
github介绍：https://github.com/CesiumGS/cesium-unreal/blob/main/Documentation/developer-setup-linux.md
github下载：https://github.com/CesiumGS/cesium-unreal/releases

Linux系统运行Unreal Engine5.6并安装Cesium for Unreal插件
 在Ubuntu 20.04.1上为UnrealEngine编译安装CesiumForUnreal插件
（1）官网下载 cesium for unreal
（2）在/unreal_engine/Linux_Unreal_Engine_5.6.0/Engine/Plugins这个目录创建一个文件夹Marketplace，然后将压缩包解压到这个文件夹，目录结构如下：

$ cd /path_to_unreal_engine/Linux_Unreal_Engine_5.6.0/Engine/Plugins/Marketplace/CesiumForUnreal
$ ls
Binaries  
CesiumForUnreal.uplugin  
CHANGES.md  
Config  
Content  
Intermediate 
LICENSE  
README.md  
Resources  
Shaders  
Source

3、cesium for web(windows)

3.0 问题

vscode的终端运行报错：
npm : File D:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.

原因：非常经典的 PowerShell 执行策略（Execution Policy）限制问题。出于安全考虑，Windows 默认禁止 PowerShell 运行本地脚本（包括 npm.ps1）。
解决：更改执行策略来允许运行脚本，执行：set-ExecutionPolicy RemoteSigned -Scope CurrentUser

3.1 安装

cesium编程入门（二）环境搭建
（1）安装node.js
https://nodejs.org/en/download/
详细步骤见本博客：“vue的使用”
（2）下载cesium

（3）纯页面使用
在vscode中安装Live server插件，右键->“Open with Live Server”, 好卡呀！
chrome中卡的原因是设置->系统->使用图形加速功能（如果可用）关闭了，但开启后其他页面打开就慢了。
使用Edge不卡。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Comatible" content="IE=edge">
	<meta name="viewport: content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../cesium1.171/Build/Cesium/Cesium.js"></script>
	<link rel="stylesheet" href="../cesium1.171/Build/Cesium/Widgets/widgets.css">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#cesiumContainer{
			width:100vw;
			height:100vw;
			overflow:hidden;
		}
	</style>
</head>
<body>
	<div id="cesiumContainer"></div>
</body>
<script>
	Cesium.Ion.defaultAccessToken='***';
	new Cesium.Viewer('cesiumContainer');
</script>
</html>

（4）vue中使用
创建vue项目：

npm init vite@latest cesium-vue-app --template vue 
cd cesium-vue-app 
npm install 
npm install cesium
npm install vite-plugin-cesium -D
npm install cesium@1.139.1 vite-plugin-cesium
npm install vite-plugin-cesium --save-dev   #这个成功了
npm run dev

App.vue:

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

<script setup lang="ts">
import {onMounted} from 'vue'
import * as Cesium from 'cesium'

console.log('>>> App.vue mounted, Cesium running');

onMounted(async() => {
  Cesium.Ion.defaultAccessToken='yourtoken'
	//new Cesium.Viewer('cesiumContainer')   

  try{
    const terrainProvider = await Cesium.createWorldTerrainAsync();
    let Viewer = new Cesium.Viewer('cesiumContainer', {        
        terrainProvider: terrainProvider,
        selectionIndicator: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        vrButton: false//右下角vr按钮
    });
/*    
    // 使用ArcGis底图-------------------------------------------------------
    // 使用 fromUrl 静态方法
    const esriProvider = await Cesium.ArcGisMapServerImageryProvider.fromUrl(
      'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      {
        enablePickFeatures: false,
      }
    );
    // 【核心步骤】在 Viewer 创建后，手动添加图层,  方法 A: 替换掉所有默认图层，只保留 ESRI (推荐)
    Viewer.imageryLayers.removeAll() 
    Viewer.imageryLayers.addImageryProvider(esriProvider)
    //end of ArcGis----------------------------------------------------------------
*/
    Viewer.cesiumWidget.creditDisplay.container.style.display = "none";

  }catch(erro){
    console.log('>>> create cesium error');
  }  
})
</script>


<style >  

  /* 1. 强制移除 html 和 body 的默认边距和内边距 */
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止最外层出现滚动条 */
  }

  /* 2. 确保 Vue 的根节点 #app 也占满全屏 */
  #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* 3. 你的 Cesium 容器样式 */
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative; /* 确保定位上下文正常 */
  }

  /* 4. 隐藏 Cesium 自带的底部版权栏 (如果 JS 中没生效，这里再补一刀) */
  :deep(.cesium-viewer-bottom),
  :deep(.cesium-credit-textContainer),
  :deep(.cesium-credit-expand-link) {
    display: none ;
  }

</style>

确保package.json中有vite-plugin-cesium，否则执行：npm install vite-plugin-cesium --save-dev

"devDependencies": {
    ...
    "vite-plugin-cesium": "^1.2.23",
    ...
  },

vite.config.ts中引入：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

import cesium from 'vite-plugin-cesium'			//加入-----

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    cesium(),  //加入-----
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  // optimizeDeps: {
  //   exclude: ['cesium']
  // },
  // // 【可选但推荐】明确定义构建时的公共路径，防止资源加载 404
  // base: './' 
})

/src/router/index.ts 加入路由
临时方法：

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:pathMatch(.*)*', // 匹配所有路径
      name: 'app',
      component: () => import('../App.vue') // 直接加载 App.vue
    }
  ],
})

export default router

当作模块加入路由：单独一个vue页面，而后加入路由引入（代码未验证）

// src/views/CesiumMap.vue
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import * as Cesium from 'cesium'

const token = 'your token'

onMounted(() => {
  Cesium.Ion.defaultAccessToken = token
  
  // 初始化地球
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    timeline: false
  })
  
  console.log('Cesium initialized', viewer)
})

onBeforeUnmount(() => {
  // 清理资源
  // 注意：实际项目中需要妥善管理 viewer 实例以便销毁
})
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

//src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import CesiumMap from '../views/CesiumMap.vue' // 引入组件

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: CesiumMap // 关联组件
    }
  ],
})

export default router

<!-- src/App.vue 恢复引入式-->
<template>
  <router-view />
</template>

<style>
/* 全局重置，防止默认边距导致出现滚动条 */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#app {
  width: 100vw;
  height: 100vh;
}
</style>

3.2 坐标转换

3.3 相机使用

Cesium相机的使用

<template>
  <div id="cesiumContainer"></div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import * as Cesium from 'cesium'
 
//设置cesiumtoken
Cesium.Ion.defaultAccessToken =
  '你的token'
 
//设置cesium默认视角--该视角打开时地球中心点位置位于中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  //西边
  89.5,
  //南边
  20.4,
  //东边
  110.4,
  //北边
  61.2
)
const initMapCesium = () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, //是否显示信息框
    geocoder: false, //位置查找工具
    homeButton: false, //是否显示首页位置工具
    sceneModePicker: false, //是否显示视角模式切换工具
    baseLayerPicker: false, //是否显示默认图层选择工具
    navigationHelpButton: false, //是否显示导航帮助工具
    animation: false, //是否显示动画工具
    timeline: false, //是否显示时间轴工具
    fullscreenButton: false //是否显示全屏按钮工具
  })
  viewer.cesiumWidget.creditContainer.style.display = 'none' //隐藏cesium版权信息
 
  //设置地图的初始视角
  const scene=viewer.scene//获取场景对象
  const camera=scene.camera//获取相机对象
 
  camera.minimumZoomDistance = 1000 //最小缩放距离
  camera.maximumZoomDistance = 5000000 //最大缩放距离
 
  //地图中心点位置--江苏省
  const center=Cesium.Cartesian3.fromDegrees(119.8, 32.9, 20000) //设置初始视角的中心点--fromDegrees(经度,纬度,高度)
  // 设置初始视角聚焦江苏省（高度500公里，俯视角度）--第一种方式
  // viewer.camera.setView({
  //   destination: center,//设置视角的目标点
  //   orientation: {//设置视角的方向
  //     heading: Cesium.Math.toRadians(0), // 水平方向角度（0为正北）
  //     pitch: Cesium.Math.toRadians(-40), // 俯视角度（-90为垂直向下）
  //     roll: Cesium.Math.toRadians(0) // 翻滚角度
  //   }
  // })
 
  //第二种方式--用矩形范围精确框定江苏省
   viewer.camera.flyTo({
    destination: center,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-10)
    },
    duration: 5 // 飞行时间（秒）
   })
 
 
  //通过按键移动相机
  document.addEventListener('keydown', (event) => {
    //获取相机与地面的高度
    var height = viewer.camera.positionCartographic.height
    //设置移动速度
    var moveRate=height/100
    if (event.key === 'w') {
      //设置相机向前移动
      viewer.camera.moveForward(moveRate)
    } else if (event.key === 's') {
      //设置相机向后移动
      viewer.camera.moveBackward(moveRate)
    } else if (event.key === 'a') {
      //设置相机向左移动
      viewer.camera.moveLeft(moveRate)
    } else if (event.key === 'd') {
      //设置相机向右移动
      viewer.camera.moveRight(moveRate)
    } else if (event.key === 'q') {
      //设置相机向上移动
      viewer.camera.moveUp(moveRate)
    } else if (event.key === 'e') {
      //设置相机向下移动
      viewer.camera.moveDown(moveRate)
    } else if (event.key === 'z') {
      //设置相机向左旋转
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1))
    } else if (event.key === 'c') {
      //设置相机向右旋转
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1))
    } else if (event.key === 'x') {
      //设置相机向上旋转
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1))
    } else if (event.key === 'v') {
      //设置相机向下旋转
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1))
    } else if (event.key === 'r') {
      //向左逆时针翻滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1))
    }else if (event.key === 'f') {
      //向右顺时针翻滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1))
    }
  })
 
  // 监听相机位置变化，获取当前缩放等级（高度）
  viewer.scene.postRender.addEventListener(() => {
    // const currentHeight = Cesium.Cartographic.fromCartesian(camera.position).height
    // console.log('当前缩放高度：', currentHeight, '米')
  })
 
 
 
}
 
onMounted(() => {
  initMapCesium()
})
</script>
 
<style lang="less" scoped>
#cesiumContainer {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
</style>

标签

#Cesium