GIS 场景下的双球体鹰眼图功能与实现方案

2024-01-20 18:07:33

认识双球体鹰眼图

双球体鹰眼图是一种常见的 GIS 场景功能，它可以同时显示两个球体，一个代表地球，另一个代表所关注的区域。通过在地球上滚动和缩放，可以控制所关注区域的显示范围和细节程度。

实现方案

为了实现双球体鹰眼图，我们将使用 Cesium 中的 Property 和 Camera。Property 可以动态地改变一个对象的属性，而 Camera 则可以控制视点的位置和方向。通过使用 Property 来控制 Camera 的位置和方向，我们可以实现双球体鹰眼图的功能。

实现步骤

创建两个 Cesium 球体，一个代表地球，另一个代表所关注的区域。
使用 Property 来控制所关注区域球体的 position 属性，以便它始终跟随地球球体的位置。
使用 Camera 来控制视点的位置和方向，以便它始终指向所关注区域球体。
添加一些交互功能，例如在地球球体上滚动和缩放，以控制所关注区域球体的显示范围和细节程度。

示例代码

// 创建地球球体
var earth = Cesium.Viewer.prototype.scene.globe;

// 创建所关注区域球体
var region = Cesium.Viewer.prototype.scene.globe;

// 使用 Property 来控制所关注区域球体的 position 属性
region.position = new Cesium.ConstantProperty(new Cesium.Cartesian3(0, 0, 0));

// 使用 Camera 来控制视点的位置和方向
var camera = Cesium.Viewer.prototype.scene.camera;
camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(0, 0, 0),
  orientation: {
    heading: 0,
    pitch: -90,
    roll: 0
  }
});

// 添加交互功能
var handler = new Cesium.ScreenSpaceEventHandler(Cesium.Viewer.prototype.scene.canvas);
handler.setInputAction(function (movement) {
  var earthCartesian = Cesium.Viewer.prototype.scene.globe.pick(movement.position, Cesium.Viewer.prototype.scene);
  if (earthCartesian) {
    region.position = new Cesium.ConstantProperty(earthCartesian);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);