【Cesium学习笔记】entity实体构建

已于 2024-01-10 20:00:19 修改
阅读量1k 收藏 21
点赞数 18
分类专栏： cesium学习笔记 文章标签： 学习 笔记
于 2024-01-10 19:59:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53880641/article/details/135493003
版权

什么是实体API

1、面向图形开发人员的低级API---->primitive API
2、用于数据驱动可视化的高级API---->Entity API

相关语法说明

1. 总体介绍

#前面加载token
#创建一个地球
const viewer = new Cesium.Viewer("cesiumContainer");
#添加实体
const  name = viewer.entities.add({
#具体的一些操作，定义实体具体形状
})
viewer.zoomTo(name); #将相机固定在实体位置处

2.sandcastle沙堡（cesium官网中具体案例）

（1）盒子box new Cesium.BoxGraphics(options)

box

https://sandcastle.cesium.com/?src=Box.htm

const viewer = new Cesium.Viewer("cesiumContainer");
#其中蓝色盒子
const blueBox = viewer.entities.add({
  name: "Blue box",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  box: {
  #盒子大小  长宽高
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    #颜色
    material: Cesium.Color.BLUE,
  },
});

menbers介绍：

  • dimensions（尺度）要求获取的数据为Cartesian3性质数据，后跟3个数据分别代表盒子的长、宽、高。
  • distanceDisplayCondition 要跟DistanceDisplayCondition属性数据，该属性指定将在距离摄像机的距离处显示此框。
  • fill 布尔值，默认为true，颜色是否填充
  • heightReference高度 HeightReference类型数据，默认值：HeightReference.NONE
    在这里插入图片描述
  • material 颜色 默认值 Color.WHITE
  • outline 轮廓 布尔值，默认值：false
  • outlineColor 轮廓颜色 默认值 Color.BLACK
  • outlineWidth 轮廓宽度 默认值1.0
  • shadows 是否有阴影 默认值ShadowMode.DISABLED（没有阴影）
  • show 是否展示这个实体 布尔值 默认值：true
    总结
    在这里插入图片描述

（2） 圆形和椭圆 Circles and ellipses

描述由中心点和半长轴和半短轴定义的椭圆。椭圆符合地球的曲率，可以放置在表面或高空，可以选择挤压成一个体积。中心点由包含实体确定。

https://sandcastle.cesium.com/?src=Circles%20and%20Ellipses.html

Circles and ellipses

const viewer = new Cesium.Viewer("cesiumContainer");
#举例蓝色圆柱
const blueEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
  name: "Blue translucent, rotated, and extruded ellipse with outline",
  ellipse: {
    semiMinorAxis: 150000.0,
    semiMajorAxis: 300000.0,
    extrudedHeight: 200000.0,
    rotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true,
  },
});
viewer.zoomTo(viewer.entities);

member介绍

  • classificationType 获取或设置ClassificationType属性，该属性指定此椭圆在地面上时是对地形、3D tile还是两者进行分类。默认值ClassificationType.BOTH
    在这里插入图片描述
  • definitionChanged 注意这是只读
  • distanceDisplayCondition 获取或设置DistanceDisplayCondition属性，该属性指定将在距离摄像机的距离处显示此椭圆（https://cesium.com/learn/cesiumjs/ref-doc/DistanceDisplayCondition.html）
    在这里插入图片描述
  • extrudedHeight 获取或设置指定椭圆挤压高度的数字属性。设置此属性将创建从高度开始并在此高度结束的体积。圆柱体高度
  • extrudedHeightReference 获取或设置指定挤压高度引用的属性。默认属性HeightReference.NONE 返回的类型
    在这里插入图片描述
  • fill 布尔值，是否填充颜色，默认值true
  • granularity 获取或设置指定椭圆上点之间角距离的数值属性。
  • height 获取或设置指定椭圆高度的数字属性 默认值：0.0
  • heightReference 获取或设置指定高度引用的属性。默认值HeightReference.NONE
  • material 颜色 Color.WHITE
  • numberOfVerticalLines 获取或设置数值属性，该属性指定要沿轮廓线的周长绘制的垂直线的数目。默认值16
  • outline 外轮廓 默认值 false
  • outlineColor 外轮廓颜色 Color.BLACK
  • outlineWidth 外轮廓线条宽度 1.0
  • rotation 获取或设置指定从北向逆时针旋转椭圆的数值属性 默认值0
  • semiMajorAxis 获取或设置指定半长轴的数值属性。
  • semiMinorAxis 短轴
  • shadows
  • show
  • stRotation 获取或设置指定从北向逆时针旋转椭圆纹理的数值属性。 默认值0
  • zIndex 获取或设置指定椭圆顺序的zIndex属性。只有当椭圆是常量并且高度和extrtrudedheight都没有指定时才有效。 默认值0
    关于stRotation和rotation的区别：
    在这里插入图片描述
    height和heightReference的区别
    在这里插入图片描述
    总结
    在这里插入图片描述

（3） 走廊 Corridor

https://sandcastle.cesium.com/?src=Corridor.html&label=Geometries

在这里插入图片描述

#蓝色走廊例子
const blueCorridor = viewer.entities.add({
  name: "Blue extruded corridor with beveled corners and outline",
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -80.0,
      40.0,
      -85.0,
      40.0,
      -85.0,
      35.0,
    ]),
    height: 200000.0,
    extrudedHeight: 100000.0,
    width: 200000.0,
    cornerType: Cesium.CornerType.BEVELED,
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true, // height or extrudedHeight must be set for outlines to display
    outlineColor: Cesium.Color.WHITE,
  },
});

members介绍

  • classificationType 获取或设置ClassificationType属性，该属性指定此走廊在地面上时是对地形、3D tile还是两者进行分类。默认值ClassificationType.BOTH
  • cornerType 获取或设置指定角的样式的CornerType属性。默认值是CornerType.ROUNDED
    在这里插入图片描述
    -definitionChanged
  • distanceDisplayCondition 获取或设置DistanceDisplayCondition属性，该属性指定将在距离摄像机的距离处显示此走廊。
  • extrudedHeight 获取或设置指定走廊挤出高度的数字属性。设置此属性将创建一个从高度开始并在此高度结束的走廊形状的体量。
  • extrudedHeightReference 默认值HeightReference.NONE
  • fill
  • granularity 获取或设置指定每个经纬度点之间采样距离的数值属性。默认值{CesiumMath.RADIANS_PER_DEGREE}
  • height 获取或设置指定椭圆高度的数字属性 默认值：0.0
  • heightReference 获取或设置指定高度引用的属性。默认值HeightReference.NONE
  • material 颜色 Color.WHITE
  • numberOfVerticalLines 获取或设置数值属性，该属性指定要沿轮廓线的周长绘制的垂直线的数目。默认值16
  • outline 外轮廓 默认值 false
  • outlineColor 外轮廓颜色 Color.BLACK
  • outlineWidth 外轮廓线条宽度 1.0
  • positions 获取或设置一个属性，该属性指定定义走廊中心线的Cartesian3位置的数组。
  • shadows
  • show
  • width 获取或设置指定轮廓线宽度的数字属性。
  • zIndex 获取或设置指定椭圆顺序的zIndex属性。只有当椭圆是常量并且高度和extrtrudedheight都没有指定时才有效。 默认值0
    总结
    在这里插入图片描述

（4）圆柱和锥体 Cylinder and cones

https://sandcastle.cesium.com/?src=Cylinders%20and%20Cones.html

在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");
#绿色柱体
const greenCylinder = viewer.entities.add({
  name: "Green cylinder with black outline",
  position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
  cylinder: {
    length: 400000.0,
    topRadius: 200000.0,
    bottomRadius: 200000.0,
    material: Cesium.Color.GREEN.withAlpha(0.5), #颜色加透明度
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});
#红色圆锥
const redCone = viewer.entities.add({
  name: "Red cone",
  position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
  cylinder: {
    length: 400000.0,
    topRadius: 0.0,
    bottomRadius: 200000.0,
    material: Cesium.Color.RED,
  },
});
#将相机固定在实体位置
viewer.zoomTo(viewer.entities);

members介绍

  • bottomRadius 获取或设置指定圆柱体底部半径的数值属性。
  • definitionChanged
  • distanceDisplayCondition
  • fill
  • heightReference
  • length 获取或设置指定圆柱体长度的数字属性
  • material
  • numberOfVerticalLines
  • outline
  • outlineColor
  • outlineWidth
  • shadows
  • show
  • slices 获取或设置属性，该属性指定圆柱体周长周围的边数。默认值128
  • topRadius 获取或设置指定圆柱体顶部半径的数值属性。圆锥就是0，可以通俗的理解成上面的表面积，与bottomRadius向对应，相等就是柱体
    总结
    在这里插入图片描述

（5）多边形 Polygons

https://sandcastle.cesium.com/?src=Polygon.html

在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");
#红色的那块实体
const redPolygon = viewer.entities.add({
  name: "Red polygon on surface",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -115.0,
      37.0,
      -115.0,
      32.0,
      -107.0,
      33.0,
      -102.0,
      31.0,
      -102.0,
      35.0,
    ]),
    material: Cesium.Color.RED,
  },
});
#绿色的那块实体-左边
const greenPolygon = viewer.entities.add({
  name: "Green extruded polygon",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -108.0,
      42.0,
      -100.0,
      42.0,
      -104.0,
      40.0,
    ]),
    extrudedHeight: 500000.0,
    material: Cesium.Color.GREEN,
    closeTop: false,
    closeBottom: false,
  },
});
#带图片的那个实体-右边
const texturedPolygon = viewer.entities.add({
  name:
    "Extruded textured polygon with per-position heights and custom texture coordinates",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
      -118.4,
      40.4,
      50000,
      -118.4,
      37,
      30000,
      -114.2,
      38.0,
      35000,
      -108.0,
      37,
      30000,
      -108.0,
      40.4,
      50000,
    ]),
    textureCoordinates: {
      positions: [
        new Cesium.Cartesian2(0, 1),
        new Cesium.Cartesian2(0, 0),
        new Cesium.Cartesian2(0.5, 0),
        new Cesium.Cartesian2(1, 0),
        new Cesium.Cartesian2(1, 1),
      ],
    },
    perPositionHeight: true,
    extrudedHeight: 0,
    material: "../images/Cesium_Logo_Color.jpg",
  },
});
#带图片的那个实体
const texturedPolygonWithHoles = viewer.entities.add({
  name:
    "Textured polygon with per-position heights, holes and custom texture coordinates",
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        -130,
        40.0,
        50000,
        -130,
        36.0,
        30000,
        -125,
        37,
        35000,
        -120,
        36.0,
        30000,
        -120,
        40.0,
        50000,
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            -128,
            39.2,
            46000,
            -128,
            38.6,
            42000,
            -127,
            38.6,
            42000,
            -127,
            39.2,
            46000,
          ]),
        },
      ],
    },
    textureCoordinates: {
      positions: [
        new Cesium.Cartesian2(0, 1),
        new Cesium.Cartesian2(0, 0),
        new Cesium.Cartesian2(0.5, 0),
        new Cesium.Cartesian2(1, 0),
        new Cesium.Cartesian2(1, 1),
      ],
      holes: [
        {
          positions: [
            new Cesium.Cartesian2(0.2, 0.8),
            new Cesium.Cartesian2(0.2, 0.6),
            new Cesium.Cartesian2(0.4, 0.6),
            new Cesium.Cartesian2(0.4, 0.8),
          ],
        },
      ],
    },
    perPositionHeight: true,
    material: "../images/Cesium_Logo_Color.jpg",
  },
});
#橙色的那个实体
const orangePolygon = viewer.entities.add({
  name: "Orange polygon with per-position heights and outline",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
      -108.0,
      25.0,
      100000,
      -100.0,
      25.0,
      100000,
      -100.0,
      30.0,
      100000,
      -108.0,
      30.0,
      300000,
    ]),
    extrudedHeight: 0,
    perPositionHeight: true,
    material: Cesium.Color.ORANGE.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});
#蓝色的那个实体
const bluePolygon = viewer.entities.add({
  name: "Blue polygon with holes",
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        -99.0,
        30.0,
        -85.0,
        30.0,
        -85.0,
        40.0,
        -99.0,
        40.0,
      ]),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -97.0,
            31.0,
            -97.0,
            39.0,
            -87.0,
            39.0,
            -87.0,
            31.0,
          ]),
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray([
                -95.0,
                33.0,
                -89.0,
                33.0,
                -89.0,
                37.0,
                -95.0,
                37.0,
              ]),
              holes: [
                {
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -93.0,
                    34.0,
                    -91.0,
                    34.0,
                    -91.0,
                    36.0,
                    -93.0,
                    36.0,
                  ]),
                },
              ],
            },
          ],
        },
      ],
    },
    material: Cesium.Color.BLUE.withAlpha(0.5),
    height: 0,
    outline: true, // height is required for outline to display
  },
});
#蓝绿色的那个小三角形实体
const cyanPolygon = viewer.entities.add({
  name: "Cyan vertical polygon with per-position heights and outline",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
      -90.0,
      41.0,
      0.0,
      -85.0,
      41.0,
      500000.0,
      -80.0,
      41.0,
      0.0,
    ]),
    perPositionHeight: true,
    material: Cesium.Color.CYAN.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});
#最上方紫色的大实体
const purplePolygonUsingRhumbLines = viewer.entities.add({
  name: "Purple polygon using rhumb lines with outline",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -120.0,
      45.0,
      -80.0,
      45.0,
      -80.0,
      55.0,
      -120.0,
      55.0,
    ]),
    extrudedHeight: 50000,
    material: Cesium.Color.PURPLE,
    outline: true,
    outlineColor: Cesium.Color.MAGENTA,
    arcType: Cesium.ArcType.RHUMB,
  },
});
#相机位置定位到实体位置处
viewer.zoomTo(viewer.entities);

members介绍

  • arcType 获取或设置ArcType属性，该属性指定多边形边缘使用的线的类型。ArcType.GEODESIC
    在这里插入图片描述

  • classificationType

  • closeBottom 获取或设置一个布尔值，指定是否包括挤出多边形的底部。

  • closeTop 获取或设置一个布尔值，指定是否包括挤出多边形的顶部。

  • definitionChanged

  • distanceDisplayCondition

  • extrudedHeight 获取或设置指定多边形挤压高度的数值属性。
    ->如果PolygonGraphics#perPositionHeight为false，则体积从PolygonGraphics#height开始，并在此高度结束。
    ->如果PolygonGraphics#perPositionHeight为true，则体积从每个PolygonGraphics#层级位置的高度开始，并在此高度结束。

  • extrudedHeightReference

  • fill

  • granularity

  • height

  • heightReference

  • hierarchy 获取或设置指定多边形层次结构的属性。后面一般跟：
    在这里插入图片描述

  • material

  • outline

  • outlineColor

  • outlineWidth

  • perPositionHeight 获取或设置布尔值，指定是否使用每个位置的高度。
    ->如果为true，形状将具有由每个PolygonGraphics#层次结构位置的高度定义的非均匀高度。
    ->如果为false，形状将有一个固定的高度，由PolygonGraphics#height指定。

  • shadows

  • show

  • stRotation 获取或设置指定从北向逆时针旋转多边形纹理的数值属性。仅在textureCoordinates未定义时生效。默认值0

  • textureCoordinates 将纹理坐标指定为笛卡尔点的多边形层次结构的属性。对地面原语没有影响。后面一般跟：
    在这里插入图片描述

  • zIndex

总结
在这里插入图片描述

（6）Polylines

https://sandcastle.cesium.com/?src=Polyline%20Dash.html&label=Geometries

在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");
#红色那条线
const redLine = viewer.entities.add({
  name: "Red dashed line",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      38,
      250000,
      -125,
      38,
      250000,
    ]),
    width: 5,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.RED,
    }),
  },
});
#蓝色那条线-蓝黄相间
const blueLine = viewer.entities.add({
  name: "Wide blue dashed line with a gap color",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      40,
      250000,
      -125,
      40,
      250000,
    ]),
    width: 30,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.BLUE,
      gapColor: Cesium.Color.YELLOW,
    }),
  },
});
#橙色那条线
const orangeLine = viewer.entities.add({
  name: "Orange dashed line with a short dash length",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      42,
      250000,
      -125,
      42,
      250000,
    ]),
    width: 5,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.ORANGE,
      dashLength: 8.0,
    }),
  },
});
#蓝绿色那条线
const cyanLine = viewer.entities.add({
  name: "Cyan dashed line with a dash pattern.",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      44,
      250000,
      -125,
      44,
      250000,
    ]),
    width: 10,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.CYAN,
      dashPattern: parseInt("110000001111", 2),
    }),
  },
});
#黄色那条线
const yellowLine = viewer.entities.add({
  name: "Yellow dashed line with a dash pattern.",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      46,
      250000,
      -125,
      46,
      250000,
    ]),
    width: 10,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.YELLOW,
      dashPattern: parseInt("1010101010101010", 2),
    }),
  },
});

viewer.zoomTo(viewer.entities);

Members

  • arcType
  • clampToGround 获取或设置布尔属性，该属性指定折线是否应夹紧到地面 false
  • classificationType
  • definitionChanged
  • depthFailMaterial 获取或设置属性，该属性指定在折线未通过深度测试时用于绘制折线的材料。undefined
  • distanceDisplayCondition
  • granularity
  • material
  • positions 要求 array of Cartesian3
  • shadows
  • show
  • width
  • zIndex
    在这里插入图片描述

（7）Polyline volumes 多段线卷

https://sandcastle.cesium.com/?src=Polyline%20Volume.html&label=Geometries

在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");

function computeCircle(radius) {
  const positions = [];
  for (let i = 0; i < 360; i++) {
    const radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians)
      )
    );
  }
  return positions;
}

function computeStar(arms, rOuter, rInner) {
  const angle = Math.PI / arms;
  const length = 2 * arms;
  const positions = new Array(length);
  for (let i = 0; i < length; i++) {
    const r = i % 2 === 0 ? rOuter : rInner;
    positions[i] = new Cesium.Cartesian2(
      Math.cos(i * angle) * r,
      Math.sin(i * angle) * r
    );
  }
  return positions;
}
#红色
const redTube = viewer.entities.add({
  name: "Red tube with rounded corners",
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -85.0,
      32.0,
      -85.0,
      36.0,
      -89.0,
      36.0,
    ]),
    shape: computeCircle(60000.0),
    material: Cesium.Color.RED,
  },
});
#绿色盒子管道
const greenBox = viewer.entities.add({
  name: "Green box with beveled corners and outline",
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -90.0,
      32.0,
      0.0,
      -90.0,
      36.0,
      100000.0,
      -94.0,
      36.0,
      0.0,
    ]),
    shape: [
      new Cesium.Cartesian2(-50000, -50000),
      new Cesium.Cartesian2(50000, -50000),
      new Cesium.Cartesian2(50000, 50000),
      new Cesium.Cartesian2(-50000, 50000),
    ],
    cornerType: Cesium.CornerType.BEVELED,
    material: Cesium.Color.GREEN.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});
#蓝色
const blueStar = viewer.entities.add({
  name: "Blue star with mitered corners and outline",
  polylineVolume: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -95.0,
      32.0,
      0.0,
      -95.0,
      36.0,
      100000.0,
      -99.0,
      36.0,
      200000.0,
    ]),
    shape: computeStar(7, 70000, 50000),
    cornerType: Cesium.CornerType.MITERED,
    material: Cesium.Color.BLUE,
  },
});

viewer.zoomTo(viewer.entities);

  • cornerType

  • definitionChanged

  • distanceDisplayCondition

  • fill

  • granularity

  • material

  • outline

  • outlineColor

  • outlineWidth

  • positions

  • shadows

  • shape 获取或设置属性，该属性指定定义要挤压的形状的笛卡尔位置数组。Cartesian2
    在这里插入图片描述

  • show
    在这里插入图片描述

（8）Rectangles

https://sandcastle.cesium.com/?src=Rectangle.html

在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");
#红色实体
const redRectangle = viewer.entities.add({
  name: "Red translucent rectangle",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      -110.0,
      20.0,
      -80.0,
      25.0
    ),
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});
#绿色实体
const greenRectangle = viewer.entities.add({
  name:
    "Green translucent, rotated, and extruded rectangle at height with outline",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      -110.0,
      30.0,
      -100.0,
      40.0
    ),
    material: Cesium.Color.GREEN.withAlpha(0.5),
    rotation: Cesium.Math.toRadians(45),
    extrudedHeight: 300000.0,
    height: 100000.0,
    outline: true, // height must be set for outline to display
    outlineColor: Cesium.Color.BLACK,
  },
});
#旋转的实体
let rotation = Cesium.Math.toRadians(30);

function getRotationValue() {
  rotation += 0.005;
  return rotation;
}
viewer.entities.add({
  name: "Rotating rectangle with rotating texture coordinate",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
    material: "../images/Cesium_Logo_Color.jpg",
    rotation: new Cesium.CallbackProperty(getRotationValue, false),
    stRotation: new Cesium.CallbackProperty(getRotationValue, false),
    classificationType: Cesium.ClassificationType.TERRAIN,
  },
});

viewer.zoomTo(viewer.entities);

在这里插入图片描述

  • Cesium.Rectangle.MAX_VALUE 最大矩形
  • Cesium.Rectangle.packedLength
  • height 只读
  • north
  • south
  • west
  • width
    这个实体方法很多

（9）Spheres and ellipsoids

https://sandcastle.cesium.com/?src=Spheres%20and%20Ellipsoids.html&label=Geometries在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");

const blueEllipsoid = viewer.entities.add({
  name: "Blue ellipsoid",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    material: Cesium.Color.BLUE,
  },
});

const redSphere = viewer.entities.add({
  name: "Red sphere with black outline",
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
  ellipsoid: {
    radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

const outlineOnly = viewer.entities.add({
  name: "Yellow ellipsoid outline",
  position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    fill: false,
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
    slicePartitions: 24,
    stackPartitions: 36,
  },
});

viewer.zoomTo(viewer.entities);

（10）Walls

https://sandcastle.cesium.com/?src=Wall.html

在这里插入图片描述

const viewer = new Cesium.Viewer("cesiumContainer");

const redWall = viewer.entities.add({
  name: "Red wall at height",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -115.0,
      44.0,
      200000.0,
      -90.0,
      44.0,
      200000.0,
    ]),
    minimumHeights: [100000.0, 100000.0],
    material: Cesium.Color.RED,
  },
});

const greenWall = viewer.entities.add({
  name: "Green wall from surface with outline",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -107.0,
      43.0,
      100000.0,
      -97.0,
      43.0,
      100000.0,
      -97.0,
      40.0,
      100000.0,
      -107.0,
      40.0,
      100000.0,
      -107.0,
      43.0,
      100000.0,
    ]),
    material: Cesium.Color.GREEN,
    outline: true,
  },
});

const blueWall = viewer.entities.add({
  name: "Blue wall with sawtooth heights and outline",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -115.0,
      50.0,
      -112.5,
      50.0,
      -110.0,
      50.0,
      -107.5,
      50.0,
      -105.0,
      50.0,
      -102.5,
      50.0,
      -100.0,
      50.0,
      -97.5,
      50.0,
      -95.0,
      50.0,
      -92.5,
      50.0,
      -90.0,
      50.0,
    ]),
    maximumHeights: [
      100000,
      200000,
      100000,
      200000,
      100000,
      200000,
      100000,
      200000,
      100000,
      200000,
      100000,
    ],
    minimumHeights: [
      0,
      100000,
      0,
      100000,
      0,
      100000,
      0,
      100000,
      0,
      100000,
      0,
    ],
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});
viewer.zoomTo(viewer.entities);
  • maximumHeights 获取或设置属性，该属性指定要用于墙顶的高度数组，而不是每个位置的高度。如果定义了，数组的长度必须与Wall#positions相同。
  • minimumHeights 获取或设置属性，该属性指定要用于墙壁底部而不是球体表面的高度数组。如果定义了，数组的长度必须与Wall#positions相同。
    在这里插入图片描述

补充说明 definitionChanged

在Cesium中，definitionChanged是实体（Entity）对象的事件，用于监听实体的属性是否发生变化。当实体的属性发生变化时，definitionChanged事件将被触发，允许开发者在这时执行相应的操作。

例如，假设你有一个Cesium的实体对象 entity，你可以监听 definitionChanged 事件来检测实体的属性是否发生变化，然后在发生变化时执行相应的操作。下面是一个简单的例子：

// 创建一个Cesium实体
var entity = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    label: {
        text: 'Hello, Cesium!'
    }
});

// 监听definitionChanged事件
entity.definitionChanged.addEventListener(function() {
    // 在属性发生变化时执行的操作
    console.log('Entity properties have changed!');
});

// 修改实体的属性，触发definitionChanged事件
entity.position = Cesium.Cartesian3.fromDegrees(-80.0, 35.0);

在上面的例子中，当修改实体的 position 属性时，definitionChanged 事件将被触发，打印出 ‘Entity properties have changed!’。这样，你就可以在属性发生变化时执行自定义的逻辑。注意，具体的属性变化可以根据需要监听，例如 position、label 等。

补充说明 granularity

在Cesium的实体（Entity）中，granularity属性通常用于指定球体、圆柱体等几何形状的细节级别，以控制其外观的精细程度。这个属性在创建球体或圆柱体等实体时很有用。

具体来说，granularity属性定义了球体或圆柱体的表面上的细分级别，用于影响其外观的平滑程度。较低的granularity值将导致较少的细分，而较高的值将导致更多的细分，使得表面看起来更加平滑。

// 创建一个球体实体
var entity = new Cesium.Entity({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    ellipsoid: {
        radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
        material: Cesium.Color.RED,
        granularity: Math.PI / 180.0 // 设置granularity值
    }
});

// 将实体添加到场景中
viewer.entities.add(entity);

在上面的例子中，ellipsoid表示一个椭球体（球体），并设置了radii为半径，material为红色，以及granularity属性为 Math.PI / 180.0。这里的granularity值以弧度为单位，表示每个角度上的细分级别。通过调整granularity的值，你可以观察到椭球体表面的平滑程度发生变化。

scandcastle如何在vscode中运行

以盒子为例：
在配置好的环境中，创建一个html文件;
可能出现的问题：1.检查代码中有关路径的问题
2.如果浏览器报401则很有可能是token有问题，连接加载地球有问题

<!DOCTYPE html>
<html lang="en">


<head>
    <!-- 示例使用 CDN 引入 CesiumJS，确保版本是最新的 -->
    <script src="https://unpkg.com/cesium@1.83.0/Build/Cesium/Cesium.js"></script>

    <!-- 使用正确版本的 CesiumJS 样式表 -->
    <link href="https://unpkg.com/cesium@1.83.0/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <!-- 加载你的自定义样式表 -->
    <link href="style.css" type="text/html" rel="stylesheet">
</head>



<body>
    <style>
        @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>



    <!-- <div id="cesiumContainer"></div> -->
    <script>

        Cesium.Ion.defaultAccessToken =
            "你的token";


        const viewer = new Cesium.Viewer("cesiumContainer");

        const blueBox = viewer.entities.add({
            name: "Blue box",
            position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: Cesium.Color.BLUE,
            },
        });

        const redBox = viewer.entities.add({
            name: "Red box with black outline",
            position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.BLACK,
            },
        });

        const outlineOnly = viewer.entities.add({
            name: "Yellow box outline",
            position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                fill: false,
                outline: true,
                outlineColor: Cesium.Color.YELLOW,
            },
        });

        viewer.zoomTo(viewer.entities);




    </script>
</body>

</html>
可乐加冰ing
关注
  • 18
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium 基本知识、控件、坐标、相机、实体、实体删除、数据加载
zhushanlin的博客
05-24 28
##5.1 组合实体。
Cesium 中 实体类entity多种实例对象-实现点击事件
06-04
在Cesium这个强大的3D地球可视化库中，实体类（Entity）是其核心概念之一，用于表示场景中的各种对象，如点、线、多边形、模型等。本主题将深入探讨如何在Cesium中利用Entity类创建不同的实例对象，并实现点击事件...
3.Cesium中实体Entity创建(超详细)
热门推荐
极限突破者的博客
07-17 1万+
本文中，我将介绍 Cesium 中创建实体的方法，并对其进行分类，帮助读者快速理解 Cesium 中实体的类别，创建代码以及具体效果；
Cesium入门之十一：认识Cesium中的Entity
九仞山的专栏
06-30 4360
认识Cesium中的Entity
cesium设置层级z-index
11-26 5360
【代码】cesium设置层级z-index。
5.Cesium中的Entity(实体)和各种图形
玖玖年的程序猿
12-22 3136
Entity的常用属性和方法
6. Cesium中的Entity
qq_42038997的博客
10-25 318
Entity类是Cesium中描述和呈现地球上实体对象的核心类。它具有丰富的属性和方法，用于控制和定制地理实体的外观和行为。Entity对象可以表示各种地理实体，如点、线、面等，并具有位置、方向、模型、标牌、折线、多边形等属性，通过设置这些属性可以实现各种类型的地理可视化。此外，Entity类还提供了其他一些常用的方法和属性，如描述信息、可见性和自定义属性等。通过使用Entity类，可以在Cesium中创建并定制地球上的实体对象，以实现复杂的地理可视化和交互效果。
cesium entity使用
weixin_43245952的博客
08-21 5201
1、查看第一个例子： viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), point : { pixelSize : 10, color : Cesium.Color.YELLOW } }); 可以看到entity通过viewer中的entities加载到场景中，entities是entity的集合
cesium entity导出kml文件
12-01
可以将point lable entity导出文件
39.（cesium篇）cesium去掉entity的默认双击追踪（trackedEntity）.zip
06-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“39.（cesium篇）cesium去掉entity的默认双击追踪（trackedEntity）”。如下载有问题，可联系博主。 解压密码：cesium
cesium-extend_Extend_cesium拓展entity_cesium_
10-02
在Cesium中，你可以通过设置`Entity`的`model`属性的`showWireframe`选项来切换到白模模式。例如： ```javascript var entity = viewer.entities.add({ name: '3D模型', position: Cesium.Cartesian3....
38.（cesium篇）cesium设置entity的方向（gltf模型）.zip
06-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“38.（cesium篇）cesium设置entity的方向（gltf模型）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 绘制不同的形状（Entity）
u014328243的博客
05-17 4569
Cesium里面绘图最常用的就是 entity，而Cesium也提供了不同类型的entity,这里就介绍一下在Cesium中如何绘制这些entity。 1 billboard，广告牌 /** * 添加entity-billboard * 广告牌，也就是一张图片、图标数据。 * **/ addEntityBillboard() { let entityBillBoard = new Cesium.Entity({ id: 'EntityBillboard0', name: 'EntityBillbo
Cesium——（Entity）实体与 实体中材质（material）
最新发布
Code_He的博客
03-14 1064
Cesium——（Entity）实体与 实体中材质（material）
cesium添加实体
m0_45305745的博客
03-20 664
2.高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象，其底层使用Primitive API；1.面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识。总的来说，Primitive偏底层，图形绘制和数据加载效率较高，但开发难度更大，而Entity基于Primitive做了进一步封装，调用便捷。
cesium学习（entities实体）
yunbabac的博客
06-15 1611
CesiumJS具有丰富的空间数据API，可分为两类：面向图形开发人员的低级Primitive API，以及用于数据驱动可视化的高级Entity API。entitiesAPI公开了一组一致设计的高级对象，这些对象将相关的可视化和信息聚合到一个统一的数据结构中，我们称之为实体。它让我们专注于数据的呈现，而不是担心可视化的潜在机制。它还以一种与静态数据自然结合的方式，为轻松构建复杂的时间动态可视化提供了结构。虽然实体API实际上在幕后使用原始API，但这是我们（几乎）永远不用关心的实现细节。
Cesium基础-表面面积量算二
lying_19的博客
03-14 1396
Cesium基于PolygonGeometry.granularity实现表面量算。
Cesium以中心生成多边墙体
qq_35984445的博客
06-25 1032
展示图
cesium polygon添加边界线不起作用
chenHARDEN的博客
01-02 4532
cesium polygon添加边界线不起作用 关于cesium添加polygon，有时需要添加边界线。但是设置outline不起作用。下面说明不起作用的原因及解决办法。 outline不起作用的原因 viewer.entities.add({ name: '等值线', polygon: { hierarchy: { positions: Cesium.Cartesian3.fromDegreesArray(polyArr), }, material: Cesiu
cesium选中entity实体
05-27
要选中Cesium中的实体（Entity），可以使用以下步骤： 1. 获取场景(Scene)对象：`var scene = viewer.scene;` 2. 监听场景的鼠标移动事件：`scene.canvas.addEventListener('mousemove', function(e){...});` 3. 在事件处理程序中获取鼠标位置：`var position = new Cesium.Cartesian2(e.clientX, e.clientY);` 4. 使用场景的`pick`方法获取鼠标位置下的实体：`var pickedObject = scene.pick(position);` 5. 检查`pickedObject`是否是实体类型：`if(Cesium.defined(pickedObject) && pickedObject.id instanceof Cesium.Entity){...}` 6. 如果是实体类型，则可以对其进行操作，例如选中效果：`pickedObject.id.polygon.material = Cesium.Color.RED;` 注意：以上代码只是一个示例，具体实现方式可能因场景和实体的不同而异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值