cesium-广告牌billboard

最新推荐文章于 2025-04-28 09:59:56 发布

挣钱花388

最新推荐文章于 2025-04-28 09:59:56 发布

阅读量996

点赞数

分类专栏： cesium小笔记文章标签：前端 javascript html

原文链接：https://www.jianshu.com/p/2cabd29f98d2

版权

cesium小笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Cesium中使用BillboardCollection添加图片和Canvas元素，并对比了通过HTML方式添加元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

广告牌简单理解就是图片。跟html不一样的是，广告牌有随球转动的效果。

转载了一位网友的文章，自己做个笔记

    let viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    //billboard方式
    let collection = new Cesium.BillboardCollection();
    //添加图片
    collection.add({
        imageId: 'img',
        image: './demo.png',
        position: Cesium.Cartesian3.fromDegrees(-75, -30)
    });
    //添加canvas
    var canvas = document.createElement('canvas');
    canvas.width = 16;
    canvas.height = 16;
    var context2D = canvas.getContext('2d');
    context2D.beginPath();
    context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
    context2D.closePath();
    context2D.fillStyle = 'rgb(0, 255, 255)';
    context2D.fill();
    collection.add({
        imageId: 'canvas',
        image: canvas,
        position: Cesium.Cartesian3.fromDegrees(-120, 30)
    });
    scene.primitives.add(collection);
    
    //html方式
    let img = document.createElement('img');
    img.src = './demo.png';
    img.style.position = 'absolute';
    img.style.width = '200px';
    img.style.height = '100px';
    img.style.top = '10px';
    img.style.left = '10px';
    let cont = document.getElementById('cesiumContainer');
    cont.appendChild(img);