qsdnet我想学编程 2020-04-18
一、cesium 是什么?
Cesium是一款面向三维地球和地图的,世界级的javaScript开源产品。它提供了基于javaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。
Cesium隶属于AGI公司,该公司一直致力于时空数据业务。正如很多开源项目都有一个个性化的名字,Cesium也不例外。Cesium原意是化学元素铯,铯是制造原子钟的关键元素,通过命名强调了Cesium产品专注于基于时空数据的实时可视化应用。
二、下载Cesium的依赖包
官网:https://cesiumjs.org/
三、设置web服务器
Cesium根目录中打开一个命令框,
npm install
npm start 或者 node server.js启动web服务器
四、Hello World讲解
script标签内加入Cesium.js。这定义了Cesium对象,它包含了我们所需要的一切。
<script src="../Build/Cesium/Cesium.js">
为了使用Cesium Viewer小部件,我们需要包含它的CSS。
@import url(../Build/Cesium/Widgets/widgets.css)
在HTML主体中,我们为viewer创建了一个div。
<div id="cesiumContainer"></div>
最后,我们创建一个viewer实例。
var viewer = new Cesium.Viewer(‘cesiumContainer‘)
五、完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始化</title> <script src="../Build/Cesium/Cesium.js"></script> <style> @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> </body> </html> <script type="text/javascript"> var viewer = new Cesium.Viewer(‘cesiumContainer‘); </script>