从零开始记录Cesium：camera、entity

一、 camera：viewer.camera.setView、flyTo、lookAt

  const position = new Cesium.Cartesian3.fromDegrees(110, 21, 10000);
  // setView 直接定位到positio
  viewer.camera.setView({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(0),
      roll: 90,
    },
  });
  // flyTo 会有过渡动画到position
  viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
    duration: 3,
  });
  // lookAt 直接定位到position2但视角只能围绕一个点旋转
  const position2 = new Cesium.Cartesian3.fromDegrees(110, 22);
  const heading = Cesium.Math.toRadians(0);
  const pitch = Cesium.Math.toRadians(-90);
  viewer.camera.lookAt(
    position2,
    new Cesium.HeadingPitchRange(heading, pitch, 10000)
  );

二、 实体：entity

1. entity------point 点

  const point = viewer.entities.add({
    id: "point",
    position: Cesium.Cartesian3.fromDegrees(110, 23, 1000),
    point: {
      pixelSize: 10,
      color: Cesium.Color.BLACK,
    },
  });
  viewer.zoomTo(point);

2. entity------billboard 广告板

  const billboard = viewer.entities.add({
    id: "billboard1",
    position: Cesium.Cartesian3.fromDegrees(110, 24, 10),
    billboard: {
      image: "src/assets/position.png",
      scale: 0.07,
      color: Cesium.Color.PINK,
    },
  });
  viewer.zoomTo(billboard);

3. entity------label 文字

  const label = viewer.entities.add({
    id: "label1",
    position: Cesium.Cartesian3.fromDegrees(110, 25, 10),
    label: {
      text: "插入文字111",
      font: "10px",
      fillColor: Cesium.Color.RED,
      showBackground: true,
      backgroundColor: Cesium.Color.BURLYWOOD,
    },
  });
 viewer.zoomTo(label);

4. entity------polyLine 线

  const polyLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        120, 20, 121, 20, 121, 20.5,
      ]),
      width: 5,
      material: Cesium.Color.PINK,
    },
  });
  viewer.zoomTo(polyLine);

5. entity------polygon 面

  const polyGon = viewer.entities.add({
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        120, 25, 121, 25, 121, 25.5,
      ]),
      height: 100000,
      extrudedHeight: 10000,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      fill: false,
    },
  });
  viewer.zoomTo(polyGon);

6. entity------box 模型

  const box = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(119, 30, 3000),
    box: {
      dimensions: new Cesium.Cartesian3(2000, 1000, 3000),
    },
  });
  viewer.zoomTo(box);

7. entity------ellipse 椭圆

  const ellipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(118, 30),
    ellipse: {
      semiMajorAxis: 500,
      semiMinorAxis: 300,
      material: Cesium.Color.RED,
    },
  });
  viewer.zoomTo(ellipse);

8. entity------rectangle 立方体

  entity------rectangle 立体
  const rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(120, 40, 132, 45),
      extrudedHeight: 100000,
      material: "/src/assets/cesiumLogo.png",
    },
  });
  viewer.zoomTo(rectangle);

9. entity------ 组合

const billboardLine = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120.2, 30, 50),
    billboard: {
      image: "src/assets/position.png",
      scale: 0.07,
    },
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        120.2, 30, 0, 120.2, 30, 50,
      ]),
      material: Cesium.Color.RED,
    },
    label: {
      text: "位置一",
      font: "10px",
      fillColor: Cesium.Color.YELLOWGREEN,
      pixelOffset: new Cesium.Cartesian2(0, -40),
    },
  });
  viewer.zoomTo(billboardLine);

10. CallbackProperty 延迟计算

let newX = 0, newY = 0, num = 0;
  const line = viewer.entities.add({
    polyline: {
      positions: new Cesium.CallbackProperty(() => {
        num += 0.005;
        newX = 120 + num;
        newY = 30 + num;
        if (newX < 141) {
          return Cesium.Cartesian3.fromDegreesArray([120, 30, newX, newY]);
        } else {
          line.polyline.positions = Cesium.Cartesian3.fromDegreesArray([
            120, 30, 141, 51,
          ]);
        }
      }, false),
      material: Cesium.Color.YELLOWGREEN,
      width: 6,
    },
  });