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