cesium 创建实体

1、 entity

1.1 entity类型整理

Entity分类

1.2 entity添加

椭圆

javascript 复制代码

      const ellipse = new Cesium.Entity({
        position: Cesium.Cartesian3.fromDegrees(114.3, 39.9, 100),
        ellipse: {
          semiMinorAxis: 30000, //椭圆的短半轴
          semiMajorAxis: 40000, //椭圆的长半轴
          extrudedHeight: 0, //拉伸高度
          material: Cesium.Color.WHITE.withAlpha(0.5), //椭圆颜色
          // outline: true, //是否显示边框
          outlineColor: Cesium.Color.BLUE, //边框颜色
          rotation: Cesium.Math.toRadians(45), //旋转角度,从正北方向开始顺时针旋转
        },
      });

    viewer.entities.add(ellipse);


//或viewer.entities直接添加无需new.
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(114.3, 39.9, 100),
        ellipse: {
          semiMinorAxis: 30000, //椭圆的短半轴
          semiMajorAxis: 40000, //椭圆的长半轴
          extrudedHeight: 0, //拉伸高度
          material: Cesium.Color.WHITE.withAlpha(0.5), //椭圆颜色
          // outline: true, //是否显示边框
          outlineColor: Cesium.Color.BLUE, //边框颜色
          rotation: Cesium.Math.toRadians(45), //旋转角度,从正北方向开始顺时针旋转
        },
      });

javascript 复制代码

const polyline =  new Cesium.Entity({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([112.3, 39.9, 114.4, 39.9]), //返回笛卡尔坐标数组
      width: 10,
      material: Cesium.Color.RED,
    },
  });

多边形

javascript 复制代码

        let polygonEntity = this.polygonEntityCollection1.add(
          new Cesium.Entity({
            name: value.id,
            polygon: {
              hierarchy: Cesium.Cartesian3.fromDegreesArray([
                value.longitude,
                value.lat,
                value.longitude + lonLatLevel,
                value.lat,
                value.longitude + lonLatLevel,
                value.lat - lonLatLevel,
                value.longitude,
                value.lat - lonLatLevel,
              ]),
              material:
                Cesium.Color.fromCssColorString("rgba(99, 184 ,255)").withAlpha(
                  0.1
                ),
              extrudedHeight: 3000 * 10,
              height: 0,
              outline: true,
              outlineColor:
                Cesium.Color.fromCssColorString("rgba(99, 184 ,255)").withAlpha(
                  0.3
                ),
            },
          })
        );

模型

javascript 复制代码

 var model = new Cesium.Entity({
    name: "模型",
    position: Cesium.Cartesian3.fromDegrees(114.3, 39.9, 1000),//位置
    model: {
      uri: "/src/assets/Cesium_Air.glb",
      minimumPixelSize: 128, //模型最小像素
      maximumScale: 200, //模型最大放大倍数
    },
  });

线加label

javascript 复制代码

      // 线的顶部位置
      var lineTopPosition = Cesium.Cartesian3.fromDegrees(114.3, 39.9, 1000);
      //创建组合实体
      var entity = new Cesium.Entity({
        position: lineTopPosition,
        // 线
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            114.3, 39.9, 0, 114.3, 39.9, 1000,
          ]),
          material: Cesium.Color.AQUA, //线的颜色
        },

        // 标签
        label: {
          text: "Hello World", // 标签显示的文本内容
          font: "14px sans-serif", // 标签文本的字体
          fillColor: Cesium.Color.RED, // 标签文本的填充颜色
          outlineColor: Cesium.Color.WHITE, // 标签文本的轮廓颜色
          outlineWidth: 2, // 标签文本的轮廓宽度
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 标签文本的样式，这里设置为填充和轮廓
          pixelOffset: new Cesium.Cartesian2(0, -10), // 标签相对于其原点的像素偏移量
          eyeOffset: new Cesium.Cartesian3(0, 0, -50), // 标签相对于相机位置的偏移量
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 标签的水平原点，这里设置为中心
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签的垂直原点，这里设置为底部
          scale: 1, // 标签的缩放比例
          showBackground: true, // 是否显示标签的背景
          backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 标签背景的颜色
          backgroundPadding: new Cesium.Cartesian2(10, 10), // 标签背景与文本之间的内边距
        },
      });

      //将立方体添加到场景中
      const Entity = viewer.entities.add(entity);

      //视角飞行至立方体
      viewer.camera.flyTo(
        {
          destination: Cesium.Cartesian3.fromDegrees(114.3, 39.9, 4000), // 目的地的经纬度坐标
          duration: 4,
        } // 动画持续时间，默认为3秒
      );

等等

1.3 entity添加 box创建（无曲率）

ps:与单位有关（Cesium.Cartesian）

椭球

javascript 复制代码

var ellipsoid = new Cesium.Entity({
    name : '椭球体',
    position: Cesium.Cartesian3.fromDegrees(114.3, 39.9),
    ellipsoid : {
        radii : new Cesium.Cartesian3(300000.0, 200000.0, 100000.0),//长半轴，短半轴，高度
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true,//开启轮廓
        outlineColor : Cesium.Color.BLACK,//轮廓颜色
        heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,//底部位置贴地
        fill : true //填充色启用
    }
});

2. primitives

2.1 primitives 介绍（更底层，性能好）

2.1 primitives 添加

label

javascript 复制代码

        this.labelsCollection1 = viewer.scene.primitives.add(
               new Cesium.LabelCollection()
          );

          let label = this.labelsCollection1.add({
          id: value.id,
          position: Cesium.Cartesian3.fromDegrees(
            value.longitude + lonLatLevel / 2,
            value.lat - lonLatLevel / 2
          ),
          font: "18px Helvetica",
          outlineWidth: 2,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.HorizontalOrigin.CENTER,
          text: value.id,
          show: value.show,
          fillColor: Cesium.Color.ORANGE,
        });
        label.type = "gardLabel";

多边形
圆
球
等