cesium

cesium-广告牌billboard

2022-01-21  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读