entity实体操作

添加点线面实体

在cesium中，添加实体可以操作viewer.entities.add(entity)进行添加

在下面创建了一个点、线、多边形实体，分别用id区分，之后直接通过add方法将三个实体添加到viewer中，并且通过zoomTo方法将相机移动到该实体的中心位置

function drawPoint() {
  const point = {
    id: 'point',
    position: Cesium.Cartesian3.fromDegrees(112.4175, 25.655, 0),
    point: {
      pixelSize: 5,
      color: Cesium.Color.BLUE,
      outlineWidth: 2,
      outlineColor: Cesium.Color.RED,
    }
  }

  const line = {
    id: 'line',
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        112.4175, 25.655,
        112.4175, 27.655,
        113.4175, 26.655,
      ]),
      width: 20,
      material: Cesium.Color.RED.withAlpha(0.5),
    }
  }

  const polygon = {
    id: 'polygon',
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        114.4175, 31.655,
        125.4175, 31.655,
        125.4175, 36.655,
        116.4175, 36.655,
      ]),
      height: 100,
      // 平面厚度
      extrudedHeight: 10000,
      // material: Cesium.Color.BLUE.withAlpha(0.5),
      // 添加纹理贴图  在当前^1.112.0版本当中repeat不生效，并且绘制的纹理只有图片的一小部分
      material: new Cesium.ImageMaterialProperty({
        image: './src/assets/image/zhihu.png',
        repeat: new Cesium.Cartesian2(10, 10),
      }),
      outline: true,
      outlineColor: Cesium.Color.RED.withAlpha(0.5),
      outlineWidth: 10,
      fill: true,
    }
  }

  viewer.value.entities.add(point)
  viewer.value.entities.add(line)
  viewer.value.entities.add(polygon)

  viewer.value.zoomTo(polygon)
}

实体删除

在cesium中，删除实体可以操作viewer.entities.remove(entity)进行删除

当给实体设置了id属性时，可以使用removeById方法删除，也可以通过remove方法删除，也可以使用removeAll方法删除所有实体

function removePoint() {
  // 通过id删除
  viewer.value.entities.removeById('point')
  // 通过对象删除
  const line = viewer.value.entities.getById('line')
  viewer.value.entities.remove(line)
  // 全部删除
  viewer.value.entities.removeAll()
}

添加billBoard标牌实体

billboard是cesium中一种标牌的实体，可以添加在点、线、面等实体上，可以设置标牌的图片、文字、颜色等属性

function drawBillBoard() {
  const billBoard = {
    position: Cesium.Cartesian3.fromDegrees(112.4175, 25.655, 0),
    billboard: {
      image: '/src/assets/logo.png',
      scale: 0.2,
      // sizeInMeters: true, // 设置为true，点的大小将以米为单位
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平相对中心位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, 30), // 偏移角度
      rotation: Math.PI / 2, // 旋转角度 相对于PI
      // scaleByDistance: new Cesium.NearFarScalar(20000, 1, 8000000, 3), // 近大远小 比例
      // pixelOffsetScaleByDistance: new Cesium.NearFarScalar(20000, 1, 8000000, 3), // 近大远小 偏移量
      // translucencyByDistance: new Cesium.NearFarScalar(20000, 1, 8000000, 0), // 近大远小 透明度
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(2000, 800000), // 只在距离内显示
    },
    label: {
      text: 'Hello World',
      scale: 0.5,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      fillColor: Cesium.Color.BLUE,
      outlineColor: Cesium.Color.RED,
      showBackground: true,
      // backgroundColor: Cesium.Color.YELLOW,
      // backgroundColor: new Cesium.Color(1, 1, 1, 1),
      // backgroundColor: Cesium.Color.fromBytes(0, 0, 0, 255),
      // backgroundColor: Cesium.Color.fromCartesian4(new Cesium.Cartesian4(1, 1, 1, 1)),
      backgroundColor: Cesium.Color.fromCssColorString('#f40'),
      pixelOffset: new Cesium.Cartesian2(0, 0),
      eyeOffset: new Cesium.Cartesian3(0, 0, -10),
    }
  }
  viewer.value.entities.add(billBoard)
}

添加模型实体

这里可以添加模型实体，可以添加gltf、glb、等模型文件

function addGLBModel() {
  const position = Cesium.Cartesian3.fromDegrees(112.4175, 25.655, 0);
  // 调整模型的旋转弧度  通过Cesium.Math.toRadians进行控制（模型的朝向）
  let hpRoll = new Cesium.HeadingPitchRoll(0, Cesium.Math.toRadians(40), Cesium.Math.toRadians(40));
  let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
  const model = viewer.value.entities.add({
    id: '',
    position: position,
    orientation: orientation,
    model: {
      uri: './src/assets/glb/island.glb',
      // color: Cesium.Color.BLUE,
      // 颜色和模型颜色混合模式 HIGHLIGHT 高亮 MIX 混合 REPLACE 替换
      // colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,
      // minimumPixelSize: 128,
      // maximumScale: 20000,
      // 轮廓颜色和大小
      silhouetteColor: Cesium.Color.RED,
      silhouetteSize: 10,
      // 在一个范围内才展示
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 800000),
      // 开启模型的动画
      shouldAnimate: true,
      // 显示阴影 需要在初始化地图时开启场景的阴影效果
      shadows: Cesium.ShadowMode.ENABLED
    }
  })
  viewer.value.zoomTo(model)
}

扩展：阴影展示

在上图可以看到模型的阴影效果，不单单只是在model上加个shadows阴影属性就可以了，还需要在初始化地图时开启场景的阴影效果

viewer.value.shadows = true
viewer.value.scene.globe.enableLighting = true

[ ] 计划 A
[x] 计划 B

entity实体操作 ​

添加点线面实体 ​

实体删除 ​

添加billBoard标牌实体 ​

添加模型实体 ​