Vue3+Cesium绘制多种几何体大全！（附源码）

业界资讯 2024-11-06 22:43:22 阅读次数: 0

大家好，我是日拱一卒的攻城师不浪，致力于技术与艺术的融合。这是2024年输出的第38/100篇文章。

前言

在Cesium中，Entity是一个非常强大且便利的API，它内部实现了大部分几何体绘制的能力，我们可以通过它非常快捷的构建出常用的几何体，当然这是在几何体体量不是很大的情况下。

梯形

const entity = viewer.entities.add({
    
    
  polygon: {
    
    
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -109.080842, 45.002073, -104.058488, 45.002073,
      -104.053011, 41.003906, -105.728954, 41.003906,
    ]),
    height: 5000,
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  }
})

这里我只需要4个经纬度顶点，就可以轻松绘制出梯形。

盒子模型

const box = viewer.entities.add({
    
    
  position: Cesium.Cartesian3.fromDegrees(-109.080842, 45.002073),
  box: new Cesium.BoxGraphics({
    
    
    heightReference: 1,
    dimensions: new Cesium.Cartesian3(5000, 5000, 5000),
    material: Cesium.Color.RED.withAlpha(0.5),
    //在指定距离内展示
    show: true,
  })
});

这里我们使用BoxGraphics创建立方体，利用dimensions属性指定盒子的长度、宽度和高度。

长方体

const rectangle = viewer.entities.add({
    
    
  rectangle: {
    
    
    coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
    extrudedHeight: 300000.0,
    height: 100000.0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  }
})

这里我们利用Rectangle构建长方体，几个关键参数解析：

coordinates：使用 Cesium.Rectangle.fromDegrees(west, south, east, north) 方法，通过指定四个经纬度边界值来定义矩形的区域：
- 西边界：-110.0 （西经 110 度）
- 南边界：20.0 （北纬 20 度）
- 东边界：-80.0 （西经 80 度）
- 北边界：25.0 （北纬 25 度）
extrudedHeight：长方体拉伸的高度；
height：这个高度表示立方体的海拔高度为100000；

扫描二维码关注公众号，回复： 17526108 查看本文章

椭球体

const ellipse = viewer.entities.add({
    
    
    position: Cesium.Cartesian3.fromDegrees(-105.91517, 45.002073),
    ellipse: new Cesium.EllipseGraphics({
    
    
      heightReference: 'NONE',
      extrudedHeight: 5000,
      semiMinorAxis: 3000,
      semiMajorAxis: 5000,
      material: Cesium.Color.RED.withAlpha(0.5),
    })
  })

这里用EllipseGraphics大类绘制椭球体，解释一下几个关键参数：

extrudedHeight：表示椭圆形 拉伸高度（extrusion height），用于在椭圆形上方生成一个立体的柱状结构。
值为 5000，表示该椭圆形将向上拉伸 5000 米，使其从一个扁平的椭圆变为一个高度为 5000 米的立体柱体。
semiMinorAxis: 表示椭圆的短半轴长度。该值为 3000 米，表示从椭圆中心到短半轴的半径为 3000 米。
semiMajorAxis: 表示椭圆的长半轴长度。该值为 5000 米，表示从椭圆中心到长半轴的半径为 5000 米。

注意：当 semiMinorAxis 和 semiMajorAxis 相等时，该几何体就会变成一个圆柱体。

球体

const spheres = viewer.entities.add({
    
    
  name: "Spheres",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  ellipsoid: {
    
    
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    innerRadii: new Cesium.Cartesian3(150000.0, 150000.0, 200000.0),
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true
  },
})

主要利用ellipsoid属性定义球体，关键参数解析：

radii：外球半径，x：200000m，y：200000m，z：300000m，表示一个椭球体；
innerRadii：内球半径；

走廊

const corridor = viewer.entities.add({
    
    
    corridor: new Cesium.CorridorGraphics({
    
    
      extrudedHeight: 10000,
      height: 1000,
      width: 5000,
      material: Cesium.Color.RED.withAlpha(0.5),
      positions: Cesium.Cartesian3.fromDegreesArray([
        -109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596,
        -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429,
      ])
    })
  })

这里主要利用corridor属性，关键属性解析：

extrudedHeight: 走廊拉伸的高度；
height：走廊的海拔高度；
width：走廊的横向宽度；
positions：绘制走廊的路径；

墙

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.RED.withAlpha(0.5),
      outline: true,
    },
  });