cesium影像显示范围

Question

cesium有没有办法控制影像的显示范围为一个矢量面的范围之内呢

Answer 1

引自免费微信小程序：皆我百晓生

在Cesium中，可以使用Cesium.Viewer对象的景象（viewRectangle）属性来设置视图的显示范围。这个属性接受一个由四个浮点数组成的数组，分别代表左下角的经度、纬度以及右上角的经度、纬度。但是，如果你想要根据一个矢量面（例如多边形或多边形集合）来确定显示范围，你需要先计算出这个多边形的边界框。

这里是一个基本的步骤，你可以按照这些步骤进行操作：

1. 创建一个多边形对象，包含你的矢量面。
2. 计算多边形的最小和最大经度和纬度。
3. 使用得到的坐标设置viewRectangle属性。

以下是使用JavaScript实现的示例代码：

// 引入Cesium库
import Cesium from 'cesium';

// 假设你有一个多边形对象，比如这样：
const polygon = {
  positions: Cesium.Cartesian3.fromDegreesArray([
    // 这里填写你的多边形顶点的经纬度坐标
    -75.0, 40.0,
    -76.0, 40.0,
    -76.0, 41.0,
    -75.0, 41.0,
    -75.0, 40.0,
  ]),
};

// 创建一个新的Cesium Viewer实例
const viewer = new Cesium.Viewer('cesiumContainer');

// 计算多边形的边界框
function calculateBoundingBox(polygon) {
  const west = Number.MAX_VALUE;
  const east = Number.MIN_VALUE;
  const south = Number.MAX_VALUE;
  const north = Number.MIN_VALUE;

  for (let i = 0; i < polygon.positions.length; i++) {
    const position = polygon.positions[i];
    west = Math.min(west, position.longitude);
    east = Math.max(east, position.longitude);
    south = Math.min(south, position.latitude);
    north = Math.max(north, position.latitude);
  }

  return [west, south, east, north];
}

// 调用函数计算边界框，并设置显示范围
const boundingBox = calculateBoundingBox(polygon);
viewer.viewRectangle = boundingBox;

这段代码首先创建了一个Cesium Viewer实例，然后定义了一个计算边界框的函数。接着，我们对给定的多边形调用此函数，得到一个表示边界框的数组，最后将这个数组赋值给viewer.viewRectangle，从而设置了显示范围。

确保在HTML文件中添加了Cesium的CDN引用，例如：

<script src="https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer" style="width: 100%; height: 600px;"></div>

如果你的多边形数据是更复杂的情况，比如多个多边形，那么可能需要对上述代码进行适当的调整。但总的来说，思路是一样的：计算所有多边形的边界框并取其整体范围。