首先，查阅相关资料，容易得知：动图的格式有很多种，主要有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。
ThingJS 系统内置了很多事件，比点击鼠标、键盘输入、层级变化等。用户可以监听这些事件，在事件回调中进行相应的业务逻辑处理网页链接
拾取
通过属性和接口获取鼠标拾取（Pick）的物体
当鼠标在一个物体上悬停时，我们经常希望做一些 *** 作，比如变色等。
我们使用 Picker 类来获取鼠标拾取（Pick）的物体，通过 app.picker 得到 Picker 类来实现这个功能，见下例：
//判断拾取的物体是否改变if(app.picker.isChanged()) {
//通过app.picker.objects 得到当前拾取的物体
console.log(app.picker.objects)
//通过app.picker.previousObjects 得到之前拾取的物体
console.log(app.picker.previousObjects)}
通过事件获取鼠标拾取的物体
可以通过 MouseEnter 和 MouseLeave 来实现 。
// 鼠标拾取物体显示边框app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) {
ev.object.style.outlineColor = '#FF0000'})// 鼠标离开物体边框取消app.on(THING.EventType.MouseLeave,'.Thing', function(ev) {
ev.object.style.outlineColor = null})
查看示例
示例效果如下图所示：
请点击输入图片描述
当 Pick 发生变化时会触发 PickChange 事件,也可以通过事件的回调参数获取当前和之前的拾取物体。
app.on(THING.EventType.PickChange,function (ev) {
ev.objects.style.color = '#ff0000'
ev.previousObjects.style.color = null})
区域 Pick 物体
有时我们通过鼠标框选一个区域，在区域内的物体我们认为是被 `Pick` 的，如下例：
//由于框选比较消耗性能，因此预先设置框的“候选集”，只在候选集中框选var things = app.query('.Thing')app.picker.areaCandidates = things//启动框选 传入 鼠标按下时开始框选的屏幕坐标app.picker.startAreaPicking({
x: x,
y: y})//结束框选app.picker.endAreaPicking()
查看示例
pickedResultFunc
可通过 pickedResultFunc 设置拾取对象回调函数，详见代码块，如下图：
请点击输入图片描述
选择
选择物体
鼠标悬停到物体上，但不代表我选择它了，比如是我们点击后才表明我们选择了它。选择物体，我们通过 Selection模块实现，可通过 app.selection 的接口实现该功能，见下例：
//将物体加入到选择集中app.selection.select(obj)// 判断对象是否在选择集中app.selection.has(obj)//将物体从选择集中删除app.selection.deselect(obj)//清空选择集app.selection.clear()
通过属性和方法，侦测选择集变化
Selection 通过提供 isChanged 方法获取选择集变化，通过 objects 和 previousObjects 获取当前选择集和变化之前的选择集，见下例：
if(app.selection.isChanged()) {
//获取当前哪些物体被选择
console.log(app.selection.objects)
//当isChanged时，之前都有哪些物体被选择
console.log(app.selection.previousObjects)}
通过事件侦测选择集变化
可以通过 Select 和 Deselect 事件精确控制物体针对选择的响应，如下例：
app.on(THING.EventType.Select, '.Thing', function (ev) {
// 选择集中的物体颜色进行改变
ev.object.style.color = "#ff0000"})app.on(THING.EventType.Deselect, '.Thing', function (ev) {
// 物体从选择集中删除时，清除颜色
ev.object.style.color = null})
我们也可以通过 SelectionChange 事件。
app.on(THING.EventType.SelectionChange, function (ev) {
console.log(ev.previousObjects+" "+ev.objects)})
本人所学GIS专业，毕业后一直从事Cesium相关的GIS开发工作，在业余时间将Ceium中常用的一些功能进行封装，形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目，紧贴业务特性，实用性强，能够在最大程度上帮助个人、团队、公司、企业提高工作效率，节省开发成本。
Cesium实战项目目前共111个实例（后面会继续增加），项目基于Cesium1.7.2+VUE 实现，现有实例如下：
基础底图
1.ArcGIS在线底图
2.谷歌在线底图
3.高德在线底图
4.天地图在线底图
5.本地单张图片
点状对象
6.Cesium点聚合1
7.Cesium点聚合2
8.Billboard加载Gif图片
9.Cesium 闪烁点
10.Primitives加载大量图标点
11.div文本点
12.动态效果点
13.图标点+文字(primitive方式)
单体化
14.倾斜模型分栋单体化 （基于geoserver）
15.倾斜模型分层单体化（基于geoserver）含教程
16.倾斜模型分户单体化（基于geoserver）含教程
编辑绘制
17.点线面绘制
18.点线面编辑
19.点线面绘制扩展
20.点线面编辑扩展
自定义信息框
21.多字段自适应信息框
22.气泡窗口样式1
23.气泡窗口样式2
标注标绘
24.自定义html标注图层
25.军事标绘
26.军事标绘编辑
27.gltf 标绘绘制
28.gltf 标绘编辑
29.行政区标注
30.体对象绘制编辑
轨迹漫游
31.轨迹回放
32.跟随视角漫游
33.第一人称漫游
34.上帝视角漫游
分析
35.Cesium 2维点转3维点
36.Cesium 空间线段等分
37.地表透明（地下模式）
38.通视分析
39.可视域分析
40.缓冲区分析
41.地表开挖（材质贴图）
42.地形开挖（材质贴图）
43.模型裁剪（Planes）
44.矿区岩层效果
45.双屏对比
46.二三维联动（基于openlayers)
场景
47.场景出图（导出图片）
48.自定义天空盒
49.位置信息状态栏控件
50.雨雪雾天气效果
51.限定视角范围
52.绘制反选遮罩
53.自定义空间背景
54.宏观数字地球
55.鹰眼地图（基于openlayers）
56.导航控件
57.云层
58.Tooltip鼠标移入信息
59.书签管理
60.旋转的地球
61.绕点旋转
62.场景泛光
工具
63.场景测量工具
64.鼠标位置拾取工具
特效
65.动态线、流动线
66.流向动态线
67.动态水面效果
68.动态扩散圆
69.动态立体墙
70.粒子系统
71.圆形波纹效果
72.矢量白膜自定义shader（不改源码）
73.光晕线
74.动态立体墙（升级）
75.圆形、规则多边形动态围墙
76.围墙扩散动画
77.光柱椎体
78.数字工厂
79.六边形扩散扫描
80.圆形扩散扫描
81.模型热力图
82.动态传输线
83.扫描线
行业应用
84.雷达扫描效果
85.雷达追踪圆锥体
86.雷达追踪四棱锥体
87.雷达遮罩扫描
88.相控阵雷达范围
89.雷达放射波
90.卫星视椎体（四棱锥体）
91.视频贴图参数调整
92.视频融合
93.目标跟踪
94.动态目标检测
95.视频窗口（普通视频）
96.视频窗口（rtmp视频）
97.视频墙（含编辑）
98.动态水域
99.水闸放水效果
Echarts可视化支持
100.Echarts 迁徙图1
101.Echarts 迁徙图2
102.Echarts 散点图
103.Echarts 流入线
104.Echarts 流出线
MapV可视化支持
105.MapV 迁徙图
106.MapV 大迁徙图
107.MapV 热力图
108.MapV 强边界图
其他
109.3dtiles高度调整
110.文字贴图
111.热力图（基于heatmap.js插件）
在线预览地址 在线预览地址 用户名cesium 密码cesium@sz
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）