cesium【01-初始化】

2024-01-08 17:25:46

一、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>

码农公寓

相关文章