美文网首页cesium
cesium-广告牌billboard

cesium-广告牌billboard

作者: 姜治宇 | 来源:发表于2022-01-21 10:56 被阅读0次

    广告牌简单理解就是图片。跟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);
    
    billboard.gif

    相关文章

      网友评论

        本文标题:cesium-广告牌billboard

        本文链接:https://www.haomeiwen.com/subject/iukehrtx.html