BillboardVisualizer

BillboardVisualizer是CesiumJS的一个组件，用于将大量的图标标记点渲染到3D地图中。

安装

在HTML文件中引入CesiumJS和BillboardVisualizer.js文件

<script src="Cesium/Cesium.js"></script>
<script src="path/to/BillboardVisualizer.js"></script>

使用方法

首先，创建一个Cesium Viewer。然后，创建一个BillboardVisualizer对象，将它添加到viewer的Scene中。

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

var billboardVisualizer = new Cesium.BillboardVisualizer(viewer.scene);
viewer.scene.primitives.add(billboardVisualizer);

接下来，为每一个需要添加到地图上的图标创建一个Billboard对象，并使用add方法将它们添加到BillboardVisualizer中。

var billboard = new Cesium.Billboard({
    image: 'path/to/image.png',
    position: Cesium.Cartesian3.fromDegrees(116.3975, 39.9085),
    scale: 1.0
});
billboardVisualizer.add(billboard);

API

BillboardVisualizer

constructor(scene[, options])

创建一个BillboardVisualizer对象

• scene：Cesium.Scene对象，可选参数
• options：一个对象，包含以下属性：
  • maximumBillboards：Number类型，该Visualizer可以渲染的最大图标数，默认为1000
  • billboardCollection：Cesium.BillboardCollection对象，用于渲染图标的Collection对象
  • cullEnabled：Boolean类型，是否启用剔除，默认为true

add(billboard)

添加一个Billboard对象到Visualizer中

• billboard：Cesium.Billboard对象

remove(billboard)

从Visualizer中删除一个Billboard对象

• billboard：Cesium.Billboard对象

Billboard

constructor(options)

创建一个Billboard对象

• options：一个对象，包含以下属性：
  • image：String类型，图标的URL或者DataURL
  • position：Cesium.Cartesian3对象，图标的位置
  • color：Cesium.Color对象，图标的颜色，默认为白色
  • rotation：Number类型，图标的方向，单位为弧度，默认为0
  • scale：Number类型，图标的缩放比例，默认为1.0
  • show：Boolean类型，是否显示该图标，默认为true
  • verticalOrigin：Number类型，垂直方向上的对齐方式，可选值为Cesium.VerticalOrigin中定义的常量，默认为Cesium.VerticalOrigin.BOTTOM
  • horizontalOrigin：Number类型，水平方向上的对齐方式，可选值为Cesium.HorizontalOrigin中定义的常量，默认为Cesium.HorizontalOrigin.CENTER

示例

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: new Cesium.createWorldTerrain()
});

var billboardVisualizer = new Cesium.BillboardVisualizer(viewer.scene);
viewer.scene.primitives.add(billboardVisualizer);

var billboards = [];

for (var i = 0; i < 1000; i++) {
    var lon = Math.random() * 360.0 - 180.0;
    var lat = (Math.random() * 180.0 - 90.0) * 0.8;

    billboards[i] = new Cesium.Billboard({
        image: 'path/to/image.png',
        position: Cesium.Cartesian3.fromDegrees(lon, lat),
        scale: 0.5 + Math.random() * 1.5
    });

    billboardVisualizer.add(billboards[i]);
}

参考文献

• Cesium官方文档
• Cesium源代码