【Cesium学习（一）】初识Cesium ---让我们进入WebGL的世界

前言

从去年开始毫无目的性的去接触到 Cesium 三维可视化，从这开始入坑之后一直到现在，其实已经写了好多 Cesium 相关的项目，在这个过程中也是遇到了很多坑，学习的过程也是遇到要用什么就学什么，毫无专业性的去学习，其实从学习开始就想分享其中的收获，但是觉得自己只是学的皮毛，而且不太专业，所以没有开始分享，到现在觉得现在可视化企业使用 Cesium 的人越来越多，而且很多人估计也和我一样，半路出家。

其实我现在也还是一个小白！怎奈现在网上的相关资料，博客，文章，学习视频都太少了！我只是爬坑比你们多一点而已！希望后面和大家一起查漏补缺，后面的文章如有错误，直接指出！

Cesium简介

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。

Cesium特点

1、一个API – 三种视图

Cesium支持三维地球（3D），二维地图（2D）以及2.5D哥伦布视图（2.5D）。

2、动态地理空间数据的可视化

1. 通过CZML创建数据驱动的时间动态场景。
2. 高分辨率的世界地形可视化。
3. 使用WMS，TMS，openstreetmaps，Bind以及ESRI的标准绘制影像图层。
4. 使用KML，GeoJSON和TopoJSON绘制矢量数据。
5. 使用COLLADA和glTF绘制3D模型。
6. 使用插件扩展核心Cesium。

3、内置的高性能和高精度

1. 优化的WebGL，充分利用硬件渲染图形，使用低级别的几何和渲染程序。
2. 绘制大范围的折线，多边形，广告牌，标签，挤压以及走廊。
3. 控制摄像头和创造飞行路径。
4. 使用动画控件控制动画时间。

Cesium示例

1、确保游览器支持Cesium

验证Cesium在Web游览器中是否能够工作，最简单是就是进入官网，点击这里进入 滑到下面的demo，看你是否可以出现一下demo

Cesium是建立在几个新的HTML5技术上的，其中最重要的就是WebGL，虽然这些新的标准正在迅速成为广泛采用，但一些浏览器和系统需要升级从而支持他们。

2、下载Cesium

如果你还没有这样做，点击这个按钮来获取最新的Cesium：下载Cesium
下载完成之后将zip文件解压到你选择的新目录，解压之后文件目录类似于下图！
我们下载这个包里包括 Cesium API 源代码 Source 文件夹，以及编译后的 Build 文件夹，还有Demo、API文档、沙盒等等，这些都不用管
我们只需要 Build 文件夹下面的 Cesium 这个文件夹，它是编译后 Cesium 包的正式版本，开发的话只需要这个就完

3、初始化运行Cesium

创建一个HTML文件，里面初始化结构

1. 引入cesium.js。该文件定义了Cesium对象，它包含了我们需要的一切。

<script src="../Build/Cesium/Cesium.js"></script>

2. 为了能使用Cesium各个可视化控件，我们需要引入widgets.css。

 <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>

3. 在HTML的body中我们创建一个DIV，用来作为三维地球的容器。

<div id="cesiumContainer"></div>

4. 最后，在js中初始化CesiumViewer实例。

var viewer = new Cesium.CesiumViewer('cesiumContainer');

5. 运行html 就会出现地球了

最后

初始Cesium 一定要知道的几个网站，后面会经常查看用到

• Cesium 官方教程 Cesium出的官方教程，英文的，可以翻译着看看
• Cesium API英文官方文档 Cesium的API太多了，不过有遇到不知道API可以查一查，不过也是英文的
• Cesium API中文文档 Cesium中文网翻译的API文档，不太全，不过初步肯定是够用的
• Cesium Sandcastle 沙盒示例 Cesium官方的一些示例程序，没事可以多逛逛
• Cesium 中文网 Cesium中文网，里面有系列教程，部分是免费的，可以学习很多知识