canvas

三维模型

// 飞机3D模型
const plane = viewer.entities.add({
  name: 'plane',
  position: Cesium.Cartesian3.fromDegrees(101.397428, 39.90923, 100000),
  model: {
    uri: '/models/CesiumAir/Cesium_Air.gltf',
    // 模型最小像素
    minimumPixelSize: 128,
    // 最大的模型像素
    maximumScale: 20000,
    //是否显示动画
    runAnimations: true,
    //是否保持最后一针的动画
    clampAnimations: true,
    // 轮廓
    silhouetteSize: 1,
    // 轮廓颜色
    silhouetteColor: Cesium.Color.WHITE,
    // 相机距离模型多远显示
    // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
  },
})
viewer.trackedEntity = plane

标签、点、广告牌

// 创建一个标签
var tianAnMenId
var tianAnMenPoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 20),
  // 点
  point: {
    pixelSize: 20,
    color: Cesium.Color.RED,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 4,
  },
  // 标签
  label: {
    text: '天安门',
    font: '24px sans-serif',
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 4,
    // FULL填充文字 OUTLINE描边 FILL_AND_OUTLINE填充加描边
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    // 文字偏移量
    pixelOffset: new Cesium.Cartesian2(0, -24),
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  },
  // 广告牌
  billboard: {
    image: '/images/tian_an_men.png',
    width: 40,
    height: 40,
    pixelOffset: new Cesium.Cartesian2(-65, -15),
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  },
})
tianAnMenId = tianAnMenPoint.id

线

const orangeOutlined = viewer.entities.add({
  name: 'Orange line with black outline at height and following the surface',
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000, -125, 39, 250000]),
    width: 5,
    material: new Cesium.PolylineOutlineMaterialProperty({
      color: Cesium.Color.ORANGE,
      outlineWidth: 2,
      outlineColor: Cesium.Color.BLACK,
    }),
  },
})

const purpleArrow = viewer.entities.add({
  name: 'Purple straight arrow at height',
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000, -125, 43, 500000]),
    width: 10,
    arcType: Cesium.ArcType.NONE,
    material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),
  },
})

const dashedLine = viewer.entities.add({
  name: 'Blue dashed line',
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([-75, 45, 500000, -125, 45, 500000]),
    width: 4,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.CYAN,
    }),
  },
})