Cesium专栏-雷达遮罩动态扫描

1,149 阅读1分钟

1.62版本后,EllipsoidGraphics 对象添加了几个参数,补充了很多同学想要的半球体,详情参考 sandcastle.cesium.com/index.html?…

具体参数介绍如下:

基于此,我们做了一个半球体雷达遮罩动态扫描的效果。

1. 添加一个半球体

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(114, 30),
  ellipsoid: {
    radii: new Cesium.Cartesian3(100, 100, 100),
    maximumCone: Cesium.Math.toRadians(90),
    material: Cesium.Color.AQUAMARINE.withAlpha(0.3),
    outline: true,
    outlineColor: Cesium.Color.AQUAMARINE.withAlpha(0.5),
    outlineWidth: 1
  }
});

2. 确定平面扫描区域

  // 根据第一个点 偏移距离 角度 求取第二个点的坐标
function calcPoints(x1, y1, radius, heading){
  var m = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(x1, y1));
  var rx = radius * Math.cos(heading * Math.PI / 180.0);
  var ry = radius * Math.sin(heading * Math.PI / 180.0);
  var translation = Cesium.Cartesian3.fromElements(rx, ry, 0);
  var d = Cesium.Matrix4.multiplyByPoint(m, translation, new Cesium.Cartesian3());
  var c = Cesium.Cartographic.fromCartesian(d);
  var x2 = Cesium.Math.toDegrees(c.longitude);
  var y2 = Cesium.Math.toDegrees(c.latitude);
  return computeCirclularFlight(x1, y1, x2, y2, 0, 90);
}

3. 确定立面扫描区域

// 根据两个点 开始角度、夹角度 求取立面的扇形
function computeCirclularFlight(x1, y1, x2, y2, fx, angle) {
  let positionArr = [];
  positionArr.push(x1);
  positionArr.push(y1);
  positionArr.push(0);
  var radius = Cesium.Cartesian3.distance(Cesium.Cartesian3.fromDegrees(x1, y1), Cesium.Cartesian3.fromDegrees(x2, y2));
  for (let i = fx; i <= fx + angle; i++) {
    let h = radius * Math.sin(i * Math.PI / 180.0);
    let r = Math.cos(i * Math.PI / 180.0);
    let x = (x2 - x1) * r + x1;
    let y = (y2 - y1) * r + y1;
    positionArr.push(x);
    positionArr.push(y);
    positionArr.push(h);
  }
  return positionArr;
}

4. 添加Entity,开启动画

var heading = 0;
var positionArr = calcPoints(114, 30, 100, heading);
viewer.entities.add({
  wall: {
    positions: new Cesium.CallbackProperty(() => { return Cesium.Cartesian3.fromDegreesArrayHeights(positionArr) }, false),
    material: Cesium.Color.AQUAMARINE.withAlpha(0.5)
  }
});
// 执行动画效果
viewer.clock.onTick.addEventListener(() => {
  heading += 0.1;
  positionArr = calcPoints(114, 30, 100, heading);
});

写在后面的话

  1. 需要使用1.62版本的后Cesium库。
  2. 尝试过使用entity的orientation属性来做旋转,但是失败了,所以只能动态的获取扫描面坐标。
  3. link==>