SuperMap iClient3D for WebGL添加gif动态图

在一些项目中，可能要在webgl球上添加gif格式的动图，方法主要有两种，第一种将HTML元素直接渲染到地球上，第二种，billboard添加一个定时器来实现将静态图变为动图，但是只能实现简单的动图。

渲染HTML元素

由于webgl使用的是canvas渲染，如果用Entity添加billboard来加载gif图片只能渲染第一帧，导致动图不动。所以通过HTML渲染到地球上实现添加gif图效果，方法比较简单，直接贴出代码和效果图。

使用图片

<img id="sillygif" style="position: absolute; width: 23%; height:15%; z-index: 2" src="data:images/timg.gif">

// js代码var htmlOverlay = document.getElementById('sillygif');var scratch = new Cesium.Cartesian2();viewer.scene.preRender.addEventListener(function() {var position = Cesium.Cartesian3.fromDegrees(90.8055628136,39.544247382348, 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';}});

这种方法添加gif图，webgl只能控制图片位置，图片大小等参数需要在html中设置，也无法选中。

billboard添加定时器

添加一个billboard放入一张静态图，然后给这个billboard增加一个clock属性，这个属性里写个定时器，用来控制静态图进行运动实现动图效果，但是正如上文所说，只能实现简单动图效果（旋转，平移等）。

使用图片

// An highlighted blockvar imageEntity=viewer.entities.add({id:"image",position : Cesium.Cartesian3.fromDegrees(113, 24,300000),billboard :{image : "images/rotate.png",scale : 0.7,rotation : 0}
});imageEntity.addProperty("imageClock");
// 用计时器控制图标的转动var second=0;imageEntity.imageClock=setInterval(function () {if(imageEntity!=null){second-=0.1;imageEntity.billboard.rotation=second;if(second<0){second=10;}}
}, 20);

这种方法的优点是可以通过billboard 特性来和图标进行更多的交互，实现更多的效果。

原文章地址：https://blog.csdn.net/weixin_42066016/article/details/101756465

SuperMap iClient3D for WebGL添加gif动态图相关推荐

SuperMap iClient3D for WebGL教程（Entity）-ModelGraphics
作者:为梦齐舞本文同步更新于简书文章[https://www.jianshu.com/p/bdf397685e8b] ModelGraphics类是隶属于实体对象的一个类型,主要用于创建模型图形,加 ...
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效粒子特效简介使用粒子特效完整代码作者: NIck Cheng 粒子特效简介粒子特效通常使用与要表现某些动态 ...
SuperMap iClient3D for WebGL教程 Primitive
SuperMap iClient3D for WebGL教程 Primitive WuYK 在Webgl中,实体对象主要由两大类组成,一类是Entity对象,还有一类就是Primitive对象.那么有 ...
SuperMap iClient3D for WebGL产品包更新--201706
SuperMap iClient3D for WebGL将于每月更新一次产品包,目前已更新至2017年06月版本. 下载SuperMap iClient3D for WebGL最新产品包请点击:下载链 ...
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务申请天地图开发者 token 读懂能力文 ...
SuperMap iClient3D for WebGL之查询模型属性
目录一.通过数据服务查询 1.普通图层查询 1.1 通过WebGL属性查询接口查询 1.2.通过iserver数据服务查询接口进行查询(SuperMap iServer REST API 2.多图层 ...
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效扩展喷泉特效喷泉特效实现完整代码作者: NIck Cheng 扩展喷泉特效之前的博客已经讲过了如何去生成一 ...
SuperMap iClient3D for WebGL教程（影像篇）-Mapbox
作者:为梦齐舞本文同步更新于简书文章https://www.jianshu.com/p/e19129908252 Mapbox 是一个可以创建各种自定义地图的网站,如 foursquare.Pint ...
SuperMap iClient3D for WebGL教程 Camera
SuperMap iClient3D for WebGL教程 Camera WuYK 在WebGL场景里,有一类很重要的对象,那就是我们的相机Camera对象.这里的Camera相当于人的眼睛,从坐标 ...

SuperMap iClient3D for WebGL添加gif动态图

渲染HTML元素

使用图片

billboard添加定时器

使用图片

SuperMap iClient3D for WebGL添加gif动态图相关推荐

最新文章

热门文章