CESIUMJS 添加会动的GIF

admin8条评论 239 次浏览

由于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图片的地址>">
...

8 thoughts on “ CESIUMJS 添加会动的GIF ”

  1. Dye

    Hi,

    We’re wondering if you’ve ever considered taking the content from liubf.com and converting it into videos to promote on Youtube using Content Samurai? You simply add the text and it converts it into scenes that make up a full video. No special skills are needed, and there’s access to over 1 million images/clips that can be used.

    You can read more about the software here: https://turntextintovideo.com – there’s also a link to a totally free guide called the ‘Youtube SEO Cheat Sheet’, full of fantastic advice on how to help your site rank higher in Youtube and in Google.

    Kind Regards,
    Chadwick

  2. Denyljrg

    Добрый день господа
    Наша предприятие мы занимаем первое место по качеству и цене производства аква продукции в Харькове. Вас может заинтерсовать:
    обзор продукции – сделаете Ваше помещение уютнее и привлекательнее, создаст теплую релаксирующую обстановку.

  3. DarrelBicet

    best cam to cam sites porn cam sites lesbian cam sites.

  4. Kimzer

    buy ampicillin

  5. JosephRox

    Salutation
    Web Scraping of websites: catalogs, phone numbers, companies
    Automatic transfer of your supplier’s product catalog to your online store.
    (I work with sites of any complexity, with copy protection and captcha)

    Uploading data to a Mysql database or Excel.
    I have six years of experience.
    Transfer catalogs of online stores, catalogs phone numbers of company.
    Automatic publication of content on the web sites.

    I set up projects for automatic collection and publication of content in the ZennoPoster program.
    I am a Web Scraping Consultant & Data Engineer. Custom Bot Development & Automation

    Viber/WhatsApp/Telegram:
    +79818525114
    Skype anato27
    londi3131@gmail.com

  6. Александр

    Приветствую!
    Отправим Ваше коммерческое предложение владельцам/администраторам более 800 000 сайтов!

    Несколько плюсов работы с нами:

    – Приятные цены – нам выгодно, чтобы заказчик получал прибыль, значительно превышающую цену рассылки и заказывал опять

    – Все максимально прозрачно:
    Предоставим скриншоты из программы, с подробными отчетами о результатах рассылки, подтверждающие выполнение обязательств с нашей стороны.

    – В отличии от большинства наших конкурентов, оплата ТОЛЬКО за УСПЕШНО доставленные сообщения.

    Свяжитесь с нами в течении суток и в качестве бонуса, получите бесплатное составление оффера для Вашей рассылки!
    Наш E-mail: formmarketing2020@gmail.com

    P.S. Извините за беспокойство, если мы с Вами уже сотрудничаем.

  7. online viagra

    viagra 10mg or 20mg total topics
    viagra 4 women
    viagra online canada pharmacy
    – viagra, viagra and levitra
    fake viagra

发表评论

? razz sad evil ! smile oops grin eek shock ??? cool lol mad twisted roll wink idea arrow neutral cry mrgreen