Cesium使用

Cesium官网https://cesiumjs.org官方API文档https://cesium.com/learn/ion-sdk/ref-doc中文API文档https://cesium.xin/cesium/cn/Documentation1.95https://cesium.xinCesium中文社区http://cesiumcn.orgSuperMap示例【UE5Cesium】智慧城市开发教程Cesium入门到实战WebGIS开发丨零基础入门VueCesium三维可视化开发项目(Entity)1、Cesium for UnrealCesium 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.htmlgithub介绍https://github.com/CesiumGS/cesium-unreal/blob/main/Documentation/developer-setup-linux.mdgithub下载https://github.com/CesiumGS/cesium-unreal/releasesLinux系统运行Unreal Engine5.6并安装Cesium for Unreal插件在Ubuntu 20.04.1上为UnrealEngine编译安装CesiumForUnreal插件1官网下载 cesium for unreal2在/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 $lsBinaries CesiumForUnreal.uplugin CHANGES.md Config Content Intermediate LICENSE README.md Resources Shaders Source3、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/?LinkID135170.原因非常经典的 PowerShell 执行策略Execution Policy 限制问题。出于安全考虑Windows 默认禁止 PowerShell 运行本地脚本包括 npm.ps1。解决更改执行策略来允许运行脚本执行set-ExecutionPolicy RemoteSigned -Scope CurrentUser3.1 安装cesium编程入门二环境搭建1安装node.jshttps://nodejs.org/en/download/详细步骤见本博客“vue的使用”2下载cesium3纯页面使用在vscode中安装Live server插件右键-“Open with Live Server”, 好卡呀chrome中卡的原因是设置-系统-使用图形加速功能如果可用关闭了但开启后其他页面打开就慢了。使用Edge不卡。htmllangenheadmetacharsetUTF-8metahttp-equivX-UA-ComatiblecontentIEedgemeta nameviewport: contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptsrc../cesium1.171/Build/Cesium/Cesium.js/scriptlinkrelstylesheethref../cesium1.171/Build/Cesium/Widgets/widgets.cssstyle*{margin:0;padding:0;}#cesiumContainer{width:100vw;height:100vw;overflow:hidden;}/style/headbodydividcesiumContainer/div/bodyscriptCesium.Ion.defaultAccessToken***;newCesium.Viewer(cesiumContainer);/script/html4vue中使用创建vue项目npminit vitelatest cesium-vue-app--templatevuecdcesium-vue-appnpminstallnpminstallcesiumnpminstallvite-plugin-cesium-Dnpminstallcesium1.139.1 vite-plugin-cesiumnpminstallvite-plugin-cesium --save-dev#这个成功了npmrun devApp.vue:templatedividcesiumContainer/div/templatescriptsetuplangtsimport{onMounted}fromvueimport*asCesiumfromcesiumconsole.log( App.vue mounted, Cesium running);onMounted(async(){Cesium.Ion.defaultAccessTokenyourtoken//new Cesium.Viewer(cesiumContainer)try{constterrainProviderawaitCesium.createWorldTerrainAsync();letViewernewCesium.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.displaynone;}catch(erro){console.log( create cesium error);}})/scriptstyle/* 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-devdevDependencies:{...vite-plugin-cesium:^1.2.23,...},vite.config.ts中引入import{fileURLToPath,URL}from node:urlimport{defineConfig}fromviteimportvuefrom vitejs/plugin-vueimportvueJsxfrom vitejs/plugin-vue-jsximportvueDevToolsfrom vite-plugin-vue-devtoolsimportcesiumfrom vite-plugin-cesium//加入-----// https://vite.dev/config/exportdefaultdefineConfig({plugins:[vue(),vueJsx(),vueDevTools(),cesium(),//加入-----],resolve:{alias:{:fileURLToPath(newURL(./src,import.meta.url))},},// optimizeDeps: {// exclude: [cesium]// },// // 【可选但推荐】明确定义构建时的公共路径防止资源加载 404// base: ./})/src/router/index.ts 加入路由临时方法import{createRouter,createWebHistory}fromvue-routerconstroutercreateRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:/:pathMatch(.*)*,// 匹配所有路径name:app,component:()import(../App.vue)// 直接加载 App.vue}],})exportdefaultrouter当作模块加入路由单独一个vue页面而后加入路由引入代码未验证// src/views/CesiumMap.vuetemplatediv idcesiumContainer/div/templatescript setup langtsimport{onMounted,onBeforeUnmount}fromvueimport*asCesiumfromcesiumconsttokeneyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5MTFiM2FiNS01ZjBlLTQ4YmEtYmQ5Yi02NTA5OTVjMjg2Y2MiLCJpZCI6NDA4Njg1LCJpYXQiOjE3NzQzOTc5ODB9.FLdWQxKtjKEF5cBtybXgzfISz1EvczkpPlT9yz29GHkonMounted((){Cesium.Ion.defaultAccessTokentoken// 初始化地球constviewernewCesium.Viewer(cesiumContainer,{animation:false,timeline:false})console.log(Cesiuminitialized,viewer)})onBeforeUnmount((){// 清理资源// 注意实际项目中需要妥善管理 viewer 实例以便销毁})/scriptstyle scoped#cesiumContainer{width:100vw;height:100vh;position:absolute;top:0;left:0;}/style//src/router/index.tsimport{createRouter,createWebHistory}from vue-routerimportCesiumMapfrom ../views/CesiumMap.vue// 引入组件constroutercreateRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:/,name:home,component:CesiumMap// 关联组件}],})exportdefaultrouter!--src/App.vue 恢复引入式--templaterouter-view//templatestyle/* 全局重置防止默认边距导致出现滚动条 */body{margin:0;padding:0;overflow:hidden;}#app{width:100vw;height:100vh;}/style3.2 坐标转换3.3 相机使用Cesium相机的使用templatedividcesiumContainer/div/templatescriptsetupimport{ref,onMounted}fromvueimport*asCesiumfromcesium//设置cesiumtokenCesium.Ion.defaultAccessToken你的token//设置cesium默认视角--该视角打开时地球中心点位置位于中国Cesium.Camera.DEFAULT_VIEW_RECTANGLECesium.Rectangle.fromDegrees(//西边89.5,//南边20.4,//东边110.4,//北边61.2)constinitMapCesium(){constviewernewCesium.Viewer(cesiumContainer,{infoBox:false,//是否显示信息框geocoder:false,//位置查找工具homeButton:false,//是否显示首页位置工具sceneModePicker:false,//是否显示视角模式切换工具baseLayerPicker:false,//是否显示默认图层选择工具navigationHelpButton:false,//是否显示导航帮助工具animation:false,//是否显示动画工具timeline:false,//是否显示时间轴工具fullscreenButton:false//是否显示全屏按钮工具})viewer.cesiumWidget.creditContainer.style.displaynone//隐藏cesium版权信息//设置地图的初始视角constsceneviewer.scene//获取场景对象constcamerascene.camera//获取相机对象camera.minimumZoomDistance1000//最小缩放距离camera.maximumZoomDistance5000000//最大缩放距离//地图中心点位置--江苏省constcenterCesium.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){//获取相机与地面的高度varheightviewer.camera.positionCartographic.height//设置移动速度varmoveRateheight/100if(event.keyw){//设置相机向前移动viewer.camera.moveForward(moveRate)}elseif(event.keys){//设置相机向后移动viewer.camera.moveBackward(moveRate)}elseif(event.keya){//设置相机向左移动viewer.camera.moveLeft(moveRate)}elseif(event.keyd){//设置相机向右移动viewer.camera.moveRight(moveRate)}elseif(event.keyq){//设置相机向上移动viewer.camera.moveUp(moveRate)}elseif(event.keye){//设置相机向下移动viewer.camera.moveDown(moveRate)}elseif(event.keyz){//设置相机向左旋转viewer.camera.lookLeft(Cesium.Math.toRadians(0.1))}elseif(event.keyc){//设置相机向右旋转viewer.camera.lookRight(Cesium.Math.toRadians(0.1))}elseif(event.keyx){//设置相机向上旋转viewer.camera.lookUp(Cesium.Math.toRadians(0.1))}elseif(event.keyv){//设置相机向下旋转viewer.camera.lookDown(Cesium.Math.toRadians(0.1))}elseif(event.keyr){//向左逆时针翻滚viewer.camera.twistLeft(Cesium.Math.toRadians(0.1))}elseif(event.keyf){//向右顺时针翻滚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()})/scriptstylelanglessscoped#cesiumContainer{overflow:hidden;width:100vw;height:100vh;}/style