Cesium学习笔记——让我们开始吧

最新推荐文章于 2024-10-15 11:50:42 发布

原创最新推荐文章于 2024-10-15 11:50:42 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Cesium #JS #HTML

Cesium 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CesiumJS的安装和基本使用方法，包括从官方网站下载软件、将Cesium文件集成到项目中，以及如何通过简单代码创建一个Cesium地球模型。适合初学者快速上手。

由于工作原因，开始接触了CesiumJS，也感受到了其博大切看不懂的一面，为此，特写此笔记，以记录学习（踩坑）过程。

那么，开始。

http://cesium.xin/
这个是Cesium的中文网，相信用着google翻译看着全英文文档也不是什么很舒服的事

https://cesiumjs.org/
这个是Cesium的官网

在这里插入图片描述
这个是下载位置，我使用的是1.55版本

下载完后进入压缩文件中的build文件，把Cesium文件拷贝到项目中即可
在这里插入图片描述
不知为何有些老哥总是说要将Cesium.js删除后在引入，但是我直接用好像也没什么问题，视情况而定吧。

然后新建一个文件夹如图
在这里插入图片描述
在index中输入如下代码可创建一个最简单的Cesium地球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cesium</title>
    <script src="./script/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./script/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            margin: 0 0;
            padding: 0 0;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="cesium" style="height: 100%;"></div>
    <script>
         var viewer = new Cesium.Viewer('cesium');
    </script>
</body>
</html>

注意修改页面布局，默认的样式肯定不好看。

在这里插入图片描述