cesium实现区域贴图及加载多个gif动图

       1、cesium加载多个gif动图

        Cesium的Billboard支持单帧纹理贴图,如果能够将gif动图进行解析,获得时间序列对应的每帧图片,然后按照时间序列动态更新Billboard的纹理,即可实现动图纹理效果。为此也找到了相对于好一点的第三方库libgif能够将gif转化为一帧帧图像,正好能够满足我们的需求!!!

let gifImgList = [];data?.forEach((tag) => {let url = huangren;let gifDiv = document.createElement("div");let gifImg = document.createElement("img");// gif库需要img标签配置下面两个属性gifImg.setAttribute("rel:animated_src", url);gifImg.setAttribute("rel:auto_play", "1"); // 设置自动播放属性gifDiv.appendChild(gifImg);let superGif = new SuperGif({gif: gifImg,});gifImgList.push(superGif);});data?.forEach((tag, ind) => {gifImgList[ind].load(function () {onViewer.entities.add({_content: tag,position: new Cesium.Cartesian3.fromDegrees(Number(tag.longitude),Number(tag.latitude),100),billboard: {//图标image: new Cesium.CallbackProperty(() => {// 转成base64,直接加canvas理论上是可以的,这里设置有问题return gifImgList[ind].get_canvas().toDataURL();}, false),scale: 0.25,// width: 36,// height: 36,//sizeInMeters: true,//以米为单位,近大远小//pixelOffset: new Cesium.Cartesian2(0,20), //设置左右、上下移动//rotation:1.58, //设置旋转角度//scaleByDistance: new Cesium.NearFarScalar(20000,1,8000000, 0.1), //设置近大远小//pixelOffsetScaleByDistance: new Cesium.NearFarScalar(20000,10,8000000,100), //设置偏移量// translucencyByDistance:new Cesium.NearFarScalar(20000,1,8000000,0), //设置透明// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   20000,//   8000000// ), //限制区域显示与隐藏//水平方向heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// 垂直方向verticalOrigin: Cesium.VerticalOrigin.BASELINE,},});});});

2、cesium加载geoJSON并贴图

const dataSource = new Cesium.GeoJsonDataSource();dataSource.load("https://geo.datav.aliyun.com/areas_v3/bound/110000.json", {clampToGround: true,}).then(() => {onViewer.dataSources.add(dataSource);const entities = dataSource.entities.values;for (let i = 0; i < entities.length; i++) {const entity = entities[i];// 修改 entity 样式entity.polygon.material = new Cesium.ImageMaterialProperty({image: beijin,});entity.polygon.outline = false;// 添加 entity 的 polylineentity.polyline = {positions: entity.polygon.hierarchy._value.positions,width: 2,material: Cesium.Color.fromCssColorString("#ffff"),clampToGround: true,};// 获取一个 entity 的中心位置const center = Cesium.BoundingSphere.fromPoints(entity.polygon.hierarchy._value.positions).center;// 设置中心位置entity.position = center;// 添加 textentity.label = {text: entity.properties.name,color: Cesium.Color.fromCssColorString("#fff"),font: "normal 32px MicroSoft YaHei",showBackground: true,scale: 0.5,horizontalOrigin: Cesium.HorizontalOrigin.LEFT_CLICK,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,disableDepthTestDistance: 10000.0,};}// if (zoomto) {onViewer.zoomTo(dataSource);// }});return dataSource;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/524731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DevOps“兵器”60样,你都会使哪几样?

戳蓝字“CSDN云计算”关注我们哦&#xff01;编前按&#xff1a;获得开发者社区支持的自动化&#xff0c;开源的工具是大家梦寐以求的。这里列举了 60 多款最棒的开源工具&#xff0c;可以帮助你很好的实行 DevOps。一、开发工具版本控制&协作开发1.版本控制系统 GitGit是一…

云漫圈 | 腾讯面试,我竟然输给了final关键字

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者&#xff1a;乔戈里来源&#xff1a;程序员乔戈里腾讯面试现场——————final 在 Java 中是一个保留的关键字&#xff0c;可以声明变量、方法、类。什么是final变量 / 类 / 方法&#xff1f;任何变量前被 final 修饰就是 fin…

学习微服务网关zuul,看这篇就够了

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者&#xff1a;爱撒谎的男孩 原文&#xff1a;https://chenjiabing666.github.io/2018/12/25/zuul%E6%9C%8D%E5%8A%A1%E7%BD%91%E5%85%B3/本文系读者投稿&#xff0c;已获作者原创授权。如果你有好文章&#xff0c;可以戳这里投稿…

写给程序员的裁员防身指南

戳蓝字“CSDN云计算”关注我们哦&#xff01;大家都知道 18 年底许多大公司都开始了「人员优化」动作&#xff0c;不仅仅美团等大厂有所行动&#xff0c;就连一些平时求贤若渴的小公司也有所动作。本来我以为关于劳动法的事情&#xff0c;许多人应该多多少少都应该了解。但最近…

使用Kubernetes和Docker将Spring Boot与MongoDB作为容器部署

戳蓝字“CSDN云计算”关注我们哦&#xff01;对于本教程&#xff0c;您将拥有一个Docker化Spring-Boot实例程序&#xff0c;该应用程序与MongoDB通信以获取GET/POST API请求&#xff0c;并部署在Kubernetes集群中。前提条件MinikubeKubectlDockerMavenDocker是一个具有"社…

5种数据分析常用的思维方法!

戳蓝字“CSDN云计算”关注我们哦&#xff01;转自&#xff1a;中国统计网来源&#xff1a;网络大数据在数据分析中&#xff0c;数据分析思维是框架式的指引&#xff0c;实际分析问题时还是需要很多“技巧工具”的。就好比中学里你要解一元二次方式&#xff0c;可以用公式法、配…

分布式系统与消息投递

戳蓝字“CSDN云计算”关注我们哦&#xff01;原文&#xff1a;https://draveness.me/message-delivery消息是一个非常有趣的概念&#xff0c;它是由来源发出一个离散的通信单元&#xff0c;被发送给一个或者一群接受者&#xff0c;无论是单体服务还是分布式系统中都有消息的概念…

“迁移策略+新容器运行时”应对有状态应用的冷热迁移挑战

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者&#xff1a;稻农来源&#xff1a;阿里系统软件技术稻农&#xff08;叶磊&#xff09;阿里云智能事业群高级技术专家参与主导容器运行时及网络创新工作&#xff1b;目前的工作侧重于基于进程虚拟化的研究及增强&#xff08;网络…

C语言 main 函数参数 main(int argc, char *argv[]) - C语言零基础入门教程

目录 一.main 函数写法二.main 函数参数简介三.使用 main 函数参数 1.打印 main 函数参数 a.直接运行 exe 文件b.打开 cmd 命令行窗口执行 exe 文件c.打开 cmd 命令行窗口执行 exe 文件并设置 main 函数参数 2.使用 main 函数参数 三.猜你喜欢 零基础 C/C 学习路线推荐 : C/C …

网络通信的两个要素

如何实现网络通信&#xff1f; 通信双方地址&#xff1a; ip 端口号 192.168.16.124:5900 规则&#xff1a;网络通信的协议 TCP/IP参考模型&#xff1a; 小结&#xff1a; 1.网络编程两个主要问题&#xff1a; 定位一台或多台主机 找到主机如何通信 2.网络编程要素 …

讲讲亿级PV的负载均衡架构!

戳蓝字“CSDN云计算”关注我们哦&#xff01;来源&#xff1a;孤独烟引言本来没想写这个题材的&#xff0c;为了某某童鞋能够更好的茁壮成长&#xff0c;临时写一篇负载均衡的。负载均衡&#xff0c;大家可能听过什么3层负载均衡、4层负载均衡、7层负载均衡什么的&#xff1f;那…

云漫圈 | 学Python还是Java, 8张漫画带你全面分析

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者&#xff1a;Leoxin来源&#xff1a;菜鸟学PythonJava和Python两门语言都是目前非常热门的语言&#xff0c;可谓北乔峰南慕容&#xff0c;二者不分上下&#xff0c;棋逢对手。但是对于初学者来说&#xff0c;非常困惑&#xff0…

史上最全SQL优化方案

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者&#xff1a;惨绿少年来源&#xff1a;Hollis在进行MySQL的优化之前&#xff0c;必须要了解的就是MySQL的查询过程&#xff0c;很多查询优化工作实际上就是遵循一些原则&#xff0c;让MySQL的优化器能够按照预想的合理方式运行而…

趣挨踢栏目精华汇总

出品 | CSDN云计算 有问有答&#xff0c;一问一答的形式&#xff0c;帮助大家快速解决更多专业难题。 出品 | CSDN云计算 趣挨踢&#xff0c;用最轻松活泼的形式&#xff0c;让你看尽生活百态。 趣挨踢 | 30 个让程序员崩溃的瞬间&#xff0c;笑死我了&#xff01; 趣挨踢 …

趣挨踢 | 只有挨踢人才能读懂的西游记

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 刘超本文转载自公众号&#xff1a;刘超的通俗云计算一、我佛造经传极乐话说我佛如来为度化天下苍生&#xff0c;有三藏真经&#xff0c;可劝人为善。就如图中所示&#xff0c;真经所藏之处&#xff0c;在于云端。佛祖所管辖之…

react虚拟和真实DOM

<!DOCTYPE html> <html> <head> <meat charset"UTF-8"> <title>1_使用jsx创建虚拟DOM</title> </head> <body> <!-- 准备好一个容器 --> <div id"test"></div> <div id"demo…

什么是5G,我们能从中得到什么?

戳蓝字“CSDN云计算”关注我们哦&#xff01;本文转载自公众号&#xff1a;SDNLAB今年&#xff0c;全球首个5G网络开通&#xff0c;向用户承诺了更快的数据传输速度和更低的延迟。此外&#xff0c;5G还为新的工业应用开辟了道路&#xff0c;成为实现“智能城市”的关键因素。5G…

微服务、Kubernetes和无服务器之后,即将发生的……

戳蓝字“CSDN云计算”关注我们哦&#xff01;本文转载自公众号&#xff1a;K8S技术社区现在是2019年了&#xff0c;Docker容器已经是旧闻&#xff0c;至少&#xff0c;它已经变得如此主流&#xff0c;不再是尖端技术。当然&#xff0c;微服务架构、Kubernetes、无服务器功能、服…

React之函数式组件

<!DOCTYPE html> <html> <head> <meat charset"UTF-8"> <title>1_函数式组件</title> </head> <body> <!-- 准备好一个容器 --> <div id"test"></div> <!-- 核心库 --> <s…

OpenStack精华问答 | OpenStack都有哪些基础服务?

戳蓝字“CSDN云计算”关注我们哦&#xff01;关于OpenStack的探讨几乎从未间断&#xff0c;从2010年10月份一个版本正式发布至今&#xff0c;OpenStack在8年发展历程中&#xff0c;成为了最有争议的那一个。今天&#xff0c;我们就来看看有关于OpenStack的精华问答吧1Q&#xf…