CesiumJS 添加會動的GIF

本文轉載自查看原文 2018-09-13 08:41 1815 Cesium

由於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圖片的地址>">
...

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 MFC添加gif動畫關於vue給對象動態添加屬性頁面不會動態更新的問題 python自動制作gif並添加文字 Cesium添加billboard圖片和gif標點 openlayers添加gif動態圖 foobar2000 頻譜給我的win10 任務欄添加一點會動背景為微信二維碼添加gif動態背景 hexo 圖片添加水印（png, jpeg, jpg, gif）從Scratch到Python:會動的小貓 Qt button按鈕添加Label標簽播放GIF圖片