vue使用cesium≥1.95的引入及使用

本文记录了从Cesium1.108迁回1.95版本时遇到的插件不支持问题,介绍了如何在1.95版本下正确配置cesium,包括资源复制和HTML文件的修改,以便地球图层能正常加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用1.108两天后 发现部分cesium插件暂不支持cesium的打包方式(1.95之后更换了构建方式) 打算先把版本回退至1.95了 这篇主要记载一下起初引入cesium≥1.95 之前在看了某篇博客后可以正常加载地球了 现在找不到了 就先浅记录一下吧

首先确认安装的cesium为1.108或≥1.95版本

将 /node_modules/cesium/Build/Cesium 拷贝至 /public 下

在 /public/index.html 中的 <head> 标签中 添加

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

 在 <body> 标签中 添加

<script type="text/javascript" src="./Cesium/Cesium.js"></script>

就可以正常使用啦 打印一下日志就可以看到Cesium的各个参数了

 

 

### Cesium 三维地球与地图可视化开发指南 #### 环境准备 为了顺利开展Cesium项目,需先准备好开发环境。这通常涉及安装Node.js以及设置一个支持模块化JavaScript的应用框架,如React或Vue[^4]。 #### 安装Cesium 可以通过npm轻松安装Cesium库至项目中: ```bash npm install cesium --save ``` 对于希望快速上手的开发者而言,`CesiumJS-tutorial`项目提供了详尽的教学资源和实例代码,帮助理解并掌握Cesium的核心概念和技术细节[^1]。 #### 配置与初始化 创建一个新的HTML文件来加载Cesium,并确保引入必要的CSS样式表以优化显示效果。下面是一个简单的配置例子: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Cesium Example</title> <!-- 引入Cesium CSS --> <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/CesiumUnminified/Widgets/widgets.css" rel="stylesheet"> <style> @import url('https://cesium.com/downloads/cesiumjs/releases/1.95/Build/CesiumUnminified/Widgets/widgets.css'); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <!-- 加载Cesium JavaScript --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/CesiumUnminified/Cesium.js"></script> <script type="text/javascript"> // 初始化Cesium Viewer对象 var viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider : Cesium.createWorldTerrain() }); </script> </body> </html> ``` 这段代码展示了如何构建基本的地图视图,并启用了全球地形数据的支持[^3]。 #### 数据处理与展示 利用`geo-data/cesium-terrain-builder`这样的工具可以更高效地生成自定义地形模型,满足特定应用场景下的需求。同时,在实际应用过程中可能还需要集成其他类型的地理空间数据源,比如矢量图形、影像服务等,这些都可以借助于Cesium丰富的API接口实现无缝对接。 #### React集成案例 当考虑将Cesium融入现代前端架构时,《第03章—Cesium.js与React.js的碰撞》提供了一个很好的学习路径,不仅涵盖了基础理论知识,还包含了大量实用技巧用于解决常见问题,非常适合那些想要深入研究两者结合方式的朋友。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值