100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

cesiumjs 多边形_体积折线_矩形_椭球体设置

CesiumJs yekong 544℃

通过cesium 我们可以创建很多实体，我们可以通过cesium文档来查看cesium创建实体的实例:创建实体

添加多边形

添加多边形

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);

添加折线

添加折线

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

const redLine = viewer.entities.add({
  name: "Red line on terrain",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    material: Cesium.Color.RED,
    clampToGround: true,
  },
});

const greenRhumbLine = viewer.entities.add({
  name: "Green rhumb line",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    arcType: Cesium.ArcType.RHUMB,
    material: Cesium.Color.GREEN,
  },
});

const glowingLine = viewer.entities.add({
  name: "Glowing blue line on the surface",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
    width: 10,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.2,
      taperPower: 0.5,
      color: Cesium.Color.CORNFLOWERBLUE,
    }),
  },
});

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,
    }),
  },
});

viewer.zoomTo(viewer.entities);

添加折线卷

添加折线卷

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);

添加矩形

添加矩形

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);

添加球体和椭圆体

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);

添加墙

添加墙

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);

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesium 多边形_体积折线_矩形_椭球体设置-实践的学习笔记

笔记汇总

Cesium学习笔记汇总

喜欢 (0)