Cesium学习（第一课）

程序员文章站 2024-03-25 17:24:28

...

Cesium简介

Cesium.js是国外一个基于JavaScript编写的使用WebGL的开源的地图引擎，它可以快速的帮你在浏览器内构建三维地球场景视图，无需任何浏览器插件，只需要你的浏览器支持WebGL，便可以开始你的Cesium开发之旅了。
Cesium支持3D，2D，2.5D形式的地图展示，支持使用WMS，TMS，openstreetmaps，Bind以及ESRI的标准绘制影像图层，支持海量二三维数据的加载，主要通过使用KML,GeoJSON和TopoJSON绘制二维矢量数据，通过使用COLLADA和gltf绘制3D模型，使用3DTiles规范实现大范围的三维模型场景的构建，同时支持通过CZML创建数据驱动的时间动态场景，可以实现地理空间数据的可视化。

Cesium下载安装

首先到Cesium官网下获取最新的Cesium版本，Cesium的更新速度非常快，平均一个月就会更新一个版本，这里需要注意的是，官方推荐使用node.js进行开发部署，但如果你是一个新手小白，想快速的上手Ceisium实现自己的功能，不懂什么node环境，无需进行安装node.js的环境安装，最好下载官网编译好的版本，这样无需进行源码编译，直接将编译好的Bulid文件夹下的Cesium文件夹拷走即可，这里打包好了编译过后的Cesium.js文件和样式文件，初学者只需要进行在html页面中直接引用这两个样式文件即可使用Cesium中封装好的类和方法了。如果你是一个经验老道的开发者，肯定需要对Cesium的源码进行编译，此时推荐您去看一下B站上Cesium实验室大佬vtfx的教学视频，主要从github获取Cesium源码包，安装node环境，进行源码编译，根据您自身的需求修改定义Cesium中的源码，创建属于你自己Cesium的版本，进而重新打包上线。下面提供Cesium两个下载地址：1.编译打包好的Cesium
2、Cesium在github上的源码地址

快速创建自己的地球

在下载好自己的Cesium后，这里我对第一种利用编译好的Cesium版本快速创建地球的方法进行讲解，首先你下载好的Cesium应该有这样的目录: Cesium学习（第一课）
接着，你直接拷走Build文件夹下的Cesium文件夹放到自己的项目下面就行，此时最简单的安装方式，就是普通的JS文件加载，只需在html页面引用Cesium.js代码和样式文件，就可以轻松创建属于自己的一个球啦。编译器IDE我推荐使用VScode，你可以直接百度搜索下载，搜索下载后安装插件Live server，这个插件的好处是直接可以帮你建好一个server端，对html静态的资源在浏览器进行快速发布预览，废话不多说，直接开始创建地球，首先新建一个HelloCesium.html文档，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloCesium</title>
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    <!-- 引入Cesium样式文件 -->
    <script src="Cesium/Cesium.js"></script>
    <!-- 引入Cesium.js文件 -->
    <style>
        /* 设置html,body和div(cesiumContainer)的样式 */
        html,body,#cesiumContainer{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        
    </style>
</head>
<body>
    <!-- 创建地图容器cesiumContainer 用于存放viewer -->
    <div id="cesiumContainer"></div> 
    
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        //创建Cesium viewer，viewer其实就是Cesium中的地球对象
    </script>
    
</body>
</html>

通过VScode插件live server运行后，浏览器的效果如下： Cesium学习（第一课）
ps：这是我第一次写博客，对文章中的有些问题不清楚或者有提议的的可以联系我的qq，1171052017，本人是一个从摄影测量乱入webgis圈的野生渣渣码农，硕士在读，自己研究Cesium有一段时间了，也写了一点小的demo，后续会更新到自己的博客中，欢迎一些小伙伴一起加入学习探讨。

Cesium学习（第一课）

Cesium简介

Cesium下载安装

快速创建自己的地球