由于Cesium使用canvas渲染，如果使用billboard等加载gif图片只能渲染第一帧，导致动图不动。在Cesium的官方示例中找到一段代码可将HTML元素渲染到地图上，将gif以html元素形式渲染，则gif图可以完整加载，动图也就能动起来，可以使用css调节页面元素的样式，现将核心的代码记载于此，以供参阅。

JS：

// 地图加载等代码略

var viewer = new Cesium.Viewer();

var htmlOverlay = document.getElementById('<gif图片元素（或者任何别的HTML元素）的id>');

        var scratch = new Cesium.Cartesian2();

        viewer.scene.preRender.addEventListener(function() {

            var position = Cesium.Cartesian3.fromDegrees(113.8055628136,22.44247382348, 50.0);

            var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);

            if (Cesium.defined(canvasPosition)) {

                htmlOverlay.style.top = canvasPosition.y + 'px';

                htmlOverlay.style.left = canvasPosition.x + 'px';

            }

        });

HTML：

<!-- 其它页面代码略 -->

...

<body>

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

    <img id="sillygif" style="position: absolute; width: 5%; height:10%; z-index: 2" src="<gif图片的地址>">

...

CesiumJS 添加会动的GIF的更多相关文章

  1. 【C#】wpf添加gif动图支持

    原文:[C#]wpf添加gif动图支持 1.nuget里下载XamlAnimatedGif包,然后安装. 2.添加XamlAnimatedGif包的命名空间:xmlns:gif="https ...

  2. android提供ToolBar实现划动菜单的陷阱

    代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android: ...

  3. Expression Blend 4 学习笔记

    Animation Storyboard(情节提要)在对象和时间线面板中建立和命名,定位到对象(object),通过拖动play head(播放头,时间线中垂直的黄色指示线)定位到特定的时间点,点击“ ...

  4. android 实现自定义卫星菜单

    看了hyman老师的视频,听起来有点迷糊,所以就想把实现卫星菜单的实现总结一下.长话短说,下面总结一下: 一.自定义ViewGroup1).自定义属性文件 属性的定义: <attr name=& ...

  5. IOS自定义仪表盘

      登录|注册     周海锋 的专栏 Objective-C/Cocos2d/Cocos2d-x/Php/JS       目录视图 摘要视图 订阅 2016软考项目经理实战班    学院周年礼-顶 ...

  6. App can入门

    主干 主干可以认为是整个页面的整体框架布局 上图是截取与ZAKER(原生开发).正益无线(HTML5开发).ZAKER微博界面(原生开发)和HTML5中国(HTML5开发).参考上述界面我们看到大部分 ...

  7. iOS：UIView的block函数实现转场动画---单视图

    使用UIView动画函数实现转场动画——单视图 + (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration ...

  8. iOS：核心动画之转场动画CATransition

    转场动画——CATransition CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 U ...

  9. Nginx+keepalived实现负载均衡

    Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构,它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一,Nginx ...

随机推荐

  1. linux内核裁剪及编译可加载模块

    一:linux内核裁剪: 1:编译内核源码: 今天的重点内容是内核驱动的编写,在编写驱动之前首先的了解linux内核源码,linux主要是由五个子系统组成:进程调度,内存管理,文件系统,网络接口以及进 ...

  2. Linux时间子系统之（三）：用户空间接口函数

    专题文档汇总目录 Notes:用户空间时间相关接口函数: 类型 API 精度 说明 时间 time stime time_t 精度为秒级 逐渐要被淘汰.需要定义__ARCH_WANT_SYS_TIME ...

  3. OAuth 2 开发人员指南

    这是支持OAuth2.0的用户指南.对于OAuth1.0,一切都是不同的,所以看它的用户指南. 本用户指南分为两个部分,第一部分是OAuth2.0提供端(OAuth 2.0 Provider),第二部 ...

  4. javascript 中的apply()和call()方法详解

    1.语法 先来看看JS手册中对call的解释: call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) ...

  5. Android 增强版百分比布局库 为了适配而扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  6. go语言nsq源码解读七 lookup_protocol_v1.go

    本篇将解读nsqlookup处理tcp请求的核心代码文件lookup_protocol_v1.go. 1234567891011121314151617181920212223242526272829 ...

  7. fastjson使用中遇到的

    二. fastjson 解析json字符串为四种类型 1. JavaBean Person person = JSON.parseObject(jsonString, Person.class); 2 ...

  8. java中八大基本数据类型详解

    1.基本数据类型的分类 java中的类型分为基本数据类型和引用类型,今天我们讨论的是java中的八大基本数据类型. 基本数据类型可以分为三类:1.数值类型.2.字符类型.3.布尔类型. 数值类型又分为 ...

  9. java的Integer与int的比较

  10. Keras框架简介

    Keras是基于Theano的一个深度学习框架,它的设计参考了Torch,用Python语言编写,是一个高度模块化的神经网络库,支持GPU和CPU.使用文档在这:http://keras.io/,中文 ...