cesium入门(二)

Billboards

function addBillboard() {
  Sandcastle.declare(addBillboard);

  var billboards = scene.primitives.add(
    new Cesium.BillboardCollection()
  );
  billboards.add({
    image: "../images/Cesium_Logo_overlay.png",
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  });
}

上图就是最简单的billboard，它始终朝向我。然后实现代码也在上面，很简单。

function setBillboardProperties() {
  Sandcastle.declare(setBillboardProperties);

  var billboards = scene.primitives.add(
    new Cesium.BillboardCollection()
  );
  billboards.add({
    image: "../images/Cesium_Logo_overlay.png", // default: undefined
    show: true, // default
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
    eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
    scale: 2.0, // default: 1.0
    color: Cesium.Color.LIME, // default: WHITE
    rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
    alignedAxis: Cesium.Cartesian3.ZERO, // default
    width: 100, // default: undefined
    height: 25, // default: undefined
    sizeInMeters: false, // default
  });
}

设置billboard的属性。
然后其他还有很多例子，如下图：

在如下案例中，箭头所指的两个属性控制当图放大后这两个billboard会不会重合。
如下案例canvas也可作为image。

Labels

如上述代码，无非就是将billboards图片转换成了labels文字。

polyline

如上图所示polyline，很简单。

地形的加载

上述箭头所指的底层是viewer.scene.globe.terrainProvider=worldTerrain;

影像的加载

layers.addImageryProvider数据源提供者

var layers = viewer.scene.imageryLayers;

imageryLayers里面包含数据源，以及各种操作数据源的参数。

primitive图元

如上图所示geometryInstance分成了两部分，第一部分代表几何体本身，第二部分Matix这种代表集合体放置的位置。
appearance分成了三部分。
看上述实例，定义了长宽高，经纬度。

如下图，不一定所有的geometryInstance都有Matrix属性。

下面有两种设置polyline的方法。
第一种之前说过：
使用polylinecollection，一次性渲染，此方法效率高，但不够灵活。

第二种使用polylinegeometry

此种方法效率低，但灵活。

None表示直线，GEODESIC表示表面上的最短距离，rhumb在地球表面有弯曲。

cesium3DTileset

这也是图元的一种