共计 1071 个字符,预计需要花费 3 分钟才能阅读完成。
app 目录
下载官网上的文件,我们能看到以下 CesiumJS 库结构:
- Source/: Cesium 应用程序代码及数据
- ThirdParty/:外部依赖库,不同于 Cesium 的第三方库
- LICENSE.md:Cesium 的 License 介绍
- index.html:Web 首页,需要按照 Cesium 要求定义页面,同时添加 Cesium 依赖库
- server.js:基于 node.js 的 web 服务应用
备注
cesiumJS 与第三方 JavaScript 库和框架做了适配:
React: Integrating Cesium with React
ThreeJS: Integrating Cesium with ThreeJS
页面结构
引入 CesiumJS
<script src="ThirdParty/Cesium/Cesium.js"></script>
开发者也可以根据自己的需求,通过 ThirdParty/Cesium/source/ 来挑选自己的依赖库,裁剪 js 的大小,
HTML 结构
需要一个 div 作为 Cesium Viewer widget 的容器
<div id="cesiumContainer"></div>
需要引入 app.js 来激活 Cesium Viewer,app.js 最好在 HTML 末尾引入。
<script src="Source/App.js"></script>
添加 CSS 样式
需要引入 Cesium viewer 中的各种 widget 的样式
新建一个 index.css,并引入到 index.html 中
<link rel="stylesheet" href="index.css" media="screen">
在 index.css 中加入以下默认的 Cesium CSS。
@import url(ThirdParty/Cesium/Widgets/widgets.css);
操作步骤
- 打开 Source/App.js,删除 contents
- 拷贝 Source/AppSkeleton.js 到 Source/App.js
- 确认 server.js 在 Cesium 文件夹根目录,并运行 server.js (npm server.js)
- 在新版本(支持 WebGL)的浏览器中输入 localhost:8080
如果有任何问题:
完整代码:https://cesiumjs.org/Cesium/B…
推荐代码:https://cesiumjs.org/Cesium/B…
Cesium 中文网交流 QQ 群:807482793
本文由 admin 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。
可自由转载、引用,但需署名作者且注明文章出处。
正文完