[CesiumJS]Cesium入门3 - Cesium目录框架结构

Cesium学习资料 · admin · 于 1年前 发布 · 5214 次阅读

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);

操作步骤

  1. 打开Source/App.js,删除contents
  2. 拷贝Source/AppSkeleton.js到Source/App.js
  3. 确认server.js在Cesium文件夹根目录,并运行server.js (npm server.js)
  4. 在新版本(支持WebGL)的浏览器中输入localhost:8080

如果有任何问题:

完整代码:https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

推荐代码:https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello World.html&label=Showcases&gist=113c3467755fc38d9f9bce16a94475fc

Cesium中文网交流QQ群:807482793

本文由 admin 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。

本帖已被设为精华帖!
共收到 1 条回复
e0134147#18个月前 0 个赞

操作步骤 打开Source/App.js,删除contents 拷贝Source/AppSkeleton.js到Source/App.js 确认server.js在Cesium文件夹根目录,并运行server.js (npm server.js) 在新版本(支持WebGL)的浏览器中输入localhost:8080

在我的下载包里面 没有Source/App.js, Source/AppSkeleton.js 怎么办

添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Your Site Analytics