Cesium（四）加载影像图层

一、常用影像图层加载

1、添加高德地图

2、添加天地图

3、添加ArcServer地图

4、添加Geoserver 地图

二、Cesium ImageryProvider

加载不同格式的地图需要选择不同的接口，详见官方文档：

https://cesium.com/docs/cesiumjs-ref-doc/ImageryProvider.html

三、常用的影像地图服务：

1、高德：

2、天地图

3、智图

天地图图层加载：

百度地图的加载有点复杂，这篇博客有详细的解决方法： https://blog.csdn.net/KaiSarH/article/details/106242572

实际开发中我们经常会有动图加载的需求，而Cesium不支持纹理贴动图，怎么样基于Cesium实现动图的加载，值得我们研究一波。cesium加载gif格式的动图有些场景能够满足我们的需求，但是有时候，图像的质量不高，颗粒感很明显，会有杂边，如何解决这个难题，又值得我们进入深层次的研究。

首先，查阅相关资料，容易得知：动图的格式有很多种，主要有gif、png、flv、swf等格式。而gif是我们最常见的动图格式，它的原理是通过对多帧图片按时间序列进行切换，从而达到动画的效果。apng格式动画原理和gif差不多。gif的特点是牺牲质量来降低大小，图像信息比较多的情况下，颗粒感明显，会有杂边。apng是普通png图片的升级版，它的后缀依然是.png，包含动态的情况下大小会比普通静态png大出数倍，但是可以做到无损动态展示。

其次，了解了apng动图优势过后，考虑到Cesium的Billboard支持单帧纹理贴图，如果能够将apng动图进行解析，获得时间序列对应的每帧图片，然后按照时间序列动态更新Billboard的纹理，即可实现动图纹理效果。

然后，我们如何进行apng动图的解析？经过不懈的探寻，发现 apng-js 第三方库能够将apng转化为一帧帧图像，正好能够满足我们的需求！！！

注：apng-js第三方库需要经过优化，才能通过script标签直接引用，优化后的链接已奉上！

完整demo可参见 practicalCesiumDemos 中loadApng。

最近几日由于工作中需要把全景图加载到三维场景中，之前网上搜索过，做过的都是结合其他框架来实现，如PhotoSphereViewer。但是当我们需要在Cesium做的项目中，来做数据显示增强的时候（如：点云和全景图叠合）就显得力不从心了，毕竟PhotoSphereViewer是基于threejs来实现的，需要一起来显示的时候就需要控制Cesium的相机和threejs的相机。因此为了更加有效的实现Cesium中场景与全景图完美叠合，就需要Cesium加载全景图。可能我说的叠合有点抽象，那么我用一张图来解释一下。

和点云数据叠合有个好处就是点云数据拉近看的时候，点云比较稀疏看不清形状，这个时候结合全景图，就能更加清晰的呈现出模型本身。

那么如何实现cesium中加载全景图呢？其实很简单，总结为如下几步：

1、使用EllipsoidGeometry绘制一个球

2、给这个球贴上纹理，由于我们贴的时候一般都贴到球的表面，但是我们看的时候视角是从球里面往外面看的，所以需要对纹理做一个反转

3、固定相机位置为球的中心点，这样就可以绕着这个点往四周看了

我这里把使用的贴纹理的shader贴出来供大家参考：

最后附一张叠合的效果图：

---