由于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. Java中判断是否为空的方法

    1.判断字符串或者对象是否为空 首先来看一下工具StringUtils的判断方法: 一种是org.apache.commons.lang3包下的: 另一种是org.springframework.ut ...

  2. 【转】sentry 实时事件日志聚合平台

    1.install postgreSQL(v9.6)2.pip install sentry(v8.13.0)3.sentry init #初始化配置文件 4.配置好postgreSQL 需要连接re ...

  3. 谈论seo思维性对优化中起到决定性的作用

    在<SEO的艺术>又出版之后,SEO艺术更加受到了广大SEOer的关注和热捧,在这本书里面,也有很多的不为人知的技巧分享.SEO的艺术强调的是SEO融入网络营销,融入社会化媒体大潮,然而这 ...

  4. 微信小程序开发之formId使用（模板消息）

    基于微信小程序的模板消息:基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.模板推送位置:服务通知模板下发条件:用户本人在微信体系内与页面有交互 ...

  5. 可能是迄今为止最好的GitHub代码浏览插件--赞

    https://chrome.google.com/webstore/category/extensions?hl=zh-CN 搜索"insight.io" chrome://ex ...

  6. 《Hadoop金融大数据分析》读书笔记

    <Hadoop金融大数据分析> Hadoop for Finance Essentials 使用Hadoop,是因为数据量大数据量如此之多,以至于无法用传统的数据处理工具和应用来处理的数据 ...

  7. Sublime Text 3 Build 3065 License key 注册码 秘钥

    -– BEGIN LICENSE -– Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC99798F ...

  8. 8. 使用ueditor添加文章

    ueditor是一个很好用的html编辑器,不仅提供了格式化编辑文本的功能,还提供了自动上传图片的功能,现在就使用该编辑器来实现博客文章的编辑功能.1. 使用ueditor过程中会请求一个后台js文件 ...

  9. Eureka-服务注册与发现组件

    一.Eureka是Netflix开发的服务组件 本身是一个基于REST的服务,Spring Cloud将它集成在其子项目spring-cloud-netflix中,以实现Spring cloud的服务 ...

  10. Python不同目录间模块调用

    #!/usr/bin/python # -*- coding: utf-8 -*- # 导入其它目录下的文件, 需要去帮获取当前程序的绝对路径并加入到环境变量的相对路径中 import os impo ...