Cesium 基础-- Entity

Entity实体

在Cesium中，实体Entity用于表示三维场景中的各种对象。Cesium提供多个属性用来表示墙、平面、点、模型、线、管道等

矩形 box

  let entity1 = viewer.entities.add(
    new Cesium.Entity({
      name: "Red box with black outline",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 30000.0), 
      box: {
        dimensions: new Cesium.Cartesian3(20000.0, 15000.0, 15000.0),  // 长宽高
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK,
      },
    })
  );

广告牌

 var flog = true;
  let x = 0;
  let entity2 = viewer.entities.add(
    new Cesium.Entity({
      name: "Red box with black outline",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 42.0, 300000.0),
      billboard: {
        image: imageUrl,
        width: 60,
        height: 60,
        show: new Cesium.CallbackProperty(() => {  //达到闪烁效果
          x = x + 0.05;
          if (x >= 1) {
            flog = !flog;
            x = 0;
          }
          return flog;
        }, false),
      },
    })
  );

走廊

let entity3 = viewer.entities.add(
    new Cesium.Entity({
      name: "Red box with black outline",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 42.0, 300000.0),
      corridor: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          -108.0, 41.0, -108.0, 42.0, -109.0, 43.0,
        ]),
        extrudedHeight: 400,
        width: 30000,
        material: Cesium.Color.BLUE.withAlpha(0.5),
        height: 30000,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        cornerType: Cesium.CornerType.MITERED,
        outline:true,
        outlineColor:Cesium.Color.RED.withAlpha(0.5)
      },
    })
  );

圆柱体

 let entity4 = viewer.entities.add(
    new Cesium.Entity({
      name: "cylinder",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 42.0, 3000.0),
      cylinder: {
        length: 40000,
        topRadius: 10000,
        bottomRadius: 50,
        material: Cesium.Color.RED,
        outline: true,
        outlineColor: Cesium.Color.BLUE,
      },
    })
  );

椭球

 let entity5 = viewer.entities.add(
    new Cesium.Entity({
      name: "ellipsoid",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 41.0, 3000.0),
      ellipsoid: {
        radii: new Cesium.Cartesian3(10000, 10000, 10000),
        innerRadii: new Cesium.Cartesian3(5000, 5000, 6000),
        material: Cesium.Color.RED.withAlpha(0.6),
        outline: true,
        outlineColor: Cesium.Color.BLUE.withAlpha(0.6),
      },
    })
  );

标签

 let entity6 = viewer.entities.add(
    new Cesium.Entity({
      name: "ellipsoid",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 41.0, 3000.0),
      label: {
        text: "礼部尚书",
        scale: 1,
        font: "20px sans-serif",
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor: Cesium.Color.AQUA,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
      },
    })
  );

模型

 let entity7 = viewer.entities.add(
    new Cesium.Entity({
      name: "model",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 43.0, 3000.0),
      model: {
        uri: "/monkey.gltf",
        color: Cesium.Color.RED.withAlpha(0.9),
        scale: 40000,
      },
    })
  );

路径

Cesium.CatmullRomSpline Cesium中的功能，用于生成平滑曲线，通过一组控制点生成平滑曲线的插值方法

CatmullRomSpline:{ time:[] 每个控制点处的时间参数， points:[]每个控制点的位置 }

const p1 = spline.evaluate(time[i] ) 在特定时间点获取曲线上的点。

const points = [
    Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 620.01),
    Cesium.Cartesian3.fromDegrees(-112.87351, 36.27992, 617.9),
    Cesium.Cartesian3.fromDegrees(-112.87081, 36.2816, 617.6),
    Cesium.Cartesian3.fromDegrees(-112.86539, 36.28239, 625.36),
    Cesium.Cartesian3.fromDegrees(-112.86108, 36.28137, 627.82),
    Cesium.Cartesian3.fromDegrees(-112.85551, 36.27967, 625.54),
    Cesium.Cartesian3.fromDegrees(-112.848, 36.27732, 628.9),
    Cesium.Cartesian3.fromDegrees(-112.84086, 36.27739, 638.81),
    Cesium.Cartesian3.fromDegrees(-112.83682, 36.27995, 643.31),
  ];
  let startTime = Cesium.JulianDate.now();
  let endTime = Cesium.JulianDate.addSeconds(
    startTime,
    8,
    new Cesium.JulianDate()
  );

  viewer.clock.startTime = startTime.clone();
  viewer.clock.endTime = endTime.clone();
  viewer.clock.currentTime = startTime.clone();
  viewer.clock.multiplier = 1.0;
  viewer.clock.shouldAnimate = true;
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  viewer.timeline.zoomTo(startTime, endTime);
  let times = [0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0];
  let spline = new Cesium.CatmullRomSpline({
    times: times,
    points: points,
  });

  let group = new Cesium.EntityCollection();
  for (let index = 0; index < points.length; index++) {
    let entityItem = new Cesium.Entity({
      position: points[index],
      point: {
        pixelSize: 10,
        color: Cesium.Color.TRANSPARENT,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
      },
    });
    viewer.entities.add(entityItem);

    group.add(entityItem);
  }
  let entity8 = viewer.entities.add(
    new Cesium.Entity({
      availability: new Cesium.TimeIntervalCollection([
        //在特定时间短内是否显示
        new Cesium.TimeInterval({
          start: startTime,
          stop: endTime,
        }),
      ]),

      position: new Cesium.CallbackPositionProperty(function (time, result) {
        let splitTime = Cesium.JulianDate.secondsDifference(time, startTime);
        let pos = spline.evaluate(splitTime, result);
        return pos;
      }, false),
      path: {
        material: Cesium.Color.YELLOW.withAlpha(0.5),
        width: 10,
        resolution: 0.01,
        leadTime: 1,
        trailTime: 0.2,
      },
      trackingReferenceFrame: Cesium.TrackingReferenceFrame.INERTIAL,
      model: {
        uri: "/monkey.gltf",
        color: Cesium.Color.AQUA.withAlpha(0.7),
        scale: 160,
      },
    })
  );

平面

  let entity9 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 610.01),
    plane: {
      plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
      dimensions: new Cesium.Cartesian2(300, 400),
      material: new Cesium.Color.BISQUE.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    },
  });

点

let entity10 = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 640.01),
    point: {
      pixelSize: 40,
      color: Cesium.Color.BISQUE.withAlpha(0.5),
      outlineColor: Cesium.Color.AQUAMARINE,
      outlineWidth: 2,
    },
  });

折线

  const points = [
    Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 620.01),
    Cesium.Cartesian3.fromDegrees(-112.87351, 36.27992, 617.9),
    Cesium.Cartesian3.fromDegrees(-112.87081, 36.2816, 617.6),
    Cesium.Cartesian3.fromDegrees(-112.86539, 36.28239, 625.36),
    Cesium.Cartesian3.fromDegrees(-112.86108, 36.28137, 627.82),
    Cesium.Cartesian3.fromDegrees(-112.85551, 36.27967, 625.54),
    Cesium.Cartesian3.fromDegrees(-112.848, 36.27732, 628.9),
    Cesium.Cartesian3.fromDegrees(-112.84086, 36.27739, 638.81),
    Cesium.Cartesian3.fromDegrees(-112.83682, 36.27995, 643.31),
  ];
 let entity11 = viewer.entities.add({
    positions: Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 640.01),
    polyline: {
      positions: points,
      width: 10,
      material: Cesium.Color.WHITE.withAlpha(0.6),
      zIndex: 99,
      clampToGround: true,
    },
  });

多边形

const points = [
    Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 620.01),
    Cesium.Cartesian3.fromDegrees(-112.87351, 36.27992, 617.9),
    Cesium.Cartesian3.fromDegrees(-112.87081, 36.2816, 617.6),
    Cesium.Cartesian3.fromDegrees(-112.86539, 36.28239, 625.36),
    Cesium.Cartesian3.fromDegrees(-112.86108, 36.28137, 627.82),
    Cesium.Cartesian3.fromDegrees(-112.85551, 36.27967, 625.54),
    Cesium.Cartesian3.fromDegrees(-112.848, 36.27732, 628.9),
    Cesium.Cartesian3.fromDegrees(-112.84086, 36.27739, 638.81),
    Cesium.Cartesian3.fromDegrees(-112.83682, 36.27995, 643.31),
  ];
let entity12 = viewer.entities.add({
    name: "polygon",
    positions: Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 640.01),
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(points),
    },
  });

矩形

  let entity13 = viewer.entities.add({
    name: "rectangle",
    positions: Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 640.01),
    rectangle: {
      coordinates: new Cesium.Rectangle.fromDegrees(-112.0, 35.0, -111.0, 36.0),
      material: Cesium.Color.fromAlpha(Cesium.Color.RED, 1),
    },
  });

墙

 let entity14 = viewer.entities.add({
    name: "wall",
    positions: Cesium.Cartesian3.fromDegrees(-112.87709, 36.27782, 640.01),
    wall: {
      positions: points,
      material: Cesium.Color.fromAlpha(Cesium.Color.RED, 1),
      minimumHeights: points.map((item) => {
        return 30;
      }),
      maximumHeights: points.map((item) => {
        return 1000;
      }),
      material: new Cesium.ImageMaterialProperty({
        image: wall,
        transparent: true,
        repeat:new Cesium.Cartesian2(8.0,1.0)
      }),
      
    },
  });