Cesium源码阅读环境搭建
1. 引言
Cesium是一款三维地球和地图可视化开源JavaScript库,使用WebGL来进行硬件加速图形,使用时不需要任何插件支持,基于Apache2.0许可的开源程序,可以免费用于商业和非商业用途
Cesium官网:Cesium: The Platform for 3D Geospatial
Cesium GitHub站点:CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps (github.com)
API文档:Index - Cesium Documentation
通过阅读源码,理清代码逻辑,有助于扩展与开发
本文描述Cesium的源码阅读环境搭建
2. 环境搭建
2.1 构建项目
使用Git克隆GitHub上的Cesium源码(直接下载源码也可):
git clone https://github.com/CesiumGS/cesium.git
进入到cesium目录中使用npm安装包:
cd cesium
npm install
等待npm安装完毕,可以查看package.json
文件,尤其是文件中scripts下的命令:
"scripts": {
// ...
"start": "node server.js",
"start-public": "node server.js --public",
"build": "gulp build",
"build-release": "gulp buildRelease"
// ...
}
可以看到start
命令就是启动一个服务,build
命令就是构建代码
不妨先启动服务试试:
npm run start
等待构建完成,启动服务,打开http://localhost:8080/,即可看到:
执行构建命令:
npm run build
等待构建完成,可以看到cesium目录下多了一个Build
目录,Build目录下的CesiumUnminified
就是构建的未压缩的Cesium代码
2.2 项目结构
这个项目中,Cesium主要源代码存在于packages
文件夹下
packages
下的engine
文件夹下是核心代码,包括渲染函数、数据API等
packages
下的widgets
文件夹下是窗体代码,包括Viewer和各种组件等
2.3 修改代码
修改packages
文件夹下的代码,就可以构建自定义的Cesium版本
此处,笔者示例在Viewer构造函数中添加两句console.log()
函数
在packages
->widgets
->Source
->Viewer
下的Viewer.js
文件中,找到Viewer的构造函数(大约在407行):
function Viewer(container, options) {
// ...
}
添加自定义的代码:
function Viewer(container, options) {
console.log("Viewer constructor start");
// ...
console.log("Viewer constructor success!");
}
重新运行服务:
npm run start
点击网页首页中的Cesium Viewer或者Hello World,打开控制台,就可以看到自定义代码的执行:
修改源代码示例完毕
3. 参考资料
[1]GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps
[2]CesiumJS 2022^ 源码解读0 - 文章目录与源码工程结构 - 四季留歌 - 博客园 (cnblogs.com)