Cesium 之 Entity 用法

Entity 用法

基本用法

let viewer = new Cesium.Viewer('view')
// 类似billboard 属性的 还有很多 比如box,corridor ,label,model,point 等等
let billboard = viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(50, 50, 1000000),
    billboard: {
        image: '../src/assets/image/wx.png',
        height: 30,
        width: 30
    },
 })

混合用法

 let viewer = new Cesium.Viewer('view')
 // 有的时候 会有2种或以上图元在同一个位置 我们可以放在一个entities 上，没有必要使用2个entities
 let billboard = viewer.entities.add({
     position: new Cesium.Cartesian3.fromDegrees(50, 50, 1000000),
     billboard: {
         image: '../src/assets/image/wx.png',
         height: 30,
         width: 30
     },
     label: {
         text: '测试测试',
         pixelOffset: new Cesium.Cartesian2(60, -60),
     }
 })

性能优化

// 很多图元 需要绘制  这时候使用entities 页面就会很卡 性能不好
for (let index = 0; index < 100000; index++) {
    viewer.entities.add({
        position: new Cesium.Cartesian3.fromDegrees(Math.random() * 100, Math.random() * 100, 10000),
        billboard: {
            image: '../src/assets/image/wx.png',
            height: 30,
            width: 30
        }
    });
}
// 这时候我们可以使用BillboardCollection  这个api 来进行优化
const billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());
for (let index = 0; index < 100000; index++) {
    billboards.add({
        position: new Cesium.Cartesian3.fromDegrees(Math.random() * 100, Math.random() * 100, 10000),
        image: '../src/assets/image/wx.png',
        height: 30,
        width: 30
    });
}
// 类似于BillboardCollection  还有很多Collection  可以在Cesium Api 里 自己查询