javascript - Cesium - 使用相机 Lat-Lon-Alt 位置绘制多边形

Question

这个问题与这两个有关:

1. > Cesium how to scale a polygon to match Lat-Lon positions while zoom-in/zoom-out
2. > Cesium - using camera to scale a polygon to match Lat-Lon positions while zoom-in/zoom-out

我遵循的从相机获取经纬度位置的示例代码位于 gold standard that appears to be baked into the existing camera controller 中。 .使用此代码，我可以从相机的距离检索经纬度位置，以获得几乎与所选的原始经纬度位置和地球表面上方高度几乎精确的值。完美!

所有示例和文档都显示了使用度数或来自度数的点来创建多边形。

现在呢？也许我遗漏了一些东西，但我认为的目的是能够使用特定的 x、y、z 坐标创建多边形，以便在放大、缩小和缩小时多边形会“粘”到我家的顶部相机运动。现在我有了这些值，用这些值绘制多边形的秘诀是什么？

仅供引用，这些是我目前拥有的值(value):

---

=========================新信息================= ==========

redPolygon 的代码有效:

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -102.0, 31.0,
                                                        -102.0, 35.0,
                                                        -102.0, 35.0]),
        material : Cesium.Color.RED
    }
});

viewer.flyTo(redPolygon);

bluePolygon 的代码不起作用:

var bluePolygon = viewer.entities.add({
    name : 'Blue polygon on surface',
    polygon : {
        //hierarchy: collection.latlonalt,
        hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt),
        material : Cesium.Color.BLUE
    }
});

viewer.flyTo(bluePolygon);

如果我使用 hierarchy: collection.latlonalt, 我会收到以下错误:

所以我将代码更改为 hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt), 其中 collection.latlonalt 是我的 Cartesian3 数组:

但是没有绘制任何东西。没有错误。这是我在控制台中看到的:

只是为了测试，我尝试将 z 位置添加到 redPolygon 并将 .fromDegreesArray 更改为 .fromArray，如下所示:

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromArray([-115.0, 37.0, 10.0,
                                                 -115.0, 32.0, 10.0,
                                                 -102.0, 31.0, 10.0,
                                                 -102.0, 35.0, 10.0,
                                                 -102.0, 35.0, 10.0]),
        material : Cesium.Color.RED
    }
});

viewer.flyTo(redPolygon);

那也没用。

Answer 1

Cesium 有类似 Cartesian3.fromDegreesArray 的辅助函数Polygon Demo 使用的，但是，既然您已经掌握了实际的 Cartesian3 值，就不需要这些辅助函数了。

例如，多边形演示代码如下所示:

var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -107.0, 33.0,
                                                        -102.0, 31.0,
                                                        -102.0, 35.0]),
        material : Cesium.Color.RED
    }
});

在上面的代码中，fromDegreesArray 在这种情况下只获取 5 个地段/lan 值对的列表，并将它们转换为 Cartesian3 的 5 个实例的 JavaScript 数组> 类。这个由 5 个 Cartesian3 组成的数组随后作为 hierarchy 的值存储在多边形定义中。如果您在运行时检查该定义，您会发现原始的 lon/lat 值已被丢弃，取而代之的是实际的 Cartesian3s，这要归功于辅助函数。

因此，在您的代码中，您将需要一个 Cartesian3 数组，其中包含用户目前点击过的数组。这从空数组开始，您需要至少收集三次点击，将每次点击转换为 Cartesian3，正如您在上面的问题中所展示的那样，并且 push将该值放入数组中。一旦数组累积了 3 次或更多次点击，您就可以将该数组作为多边形定义的 hierarchy 字段传递。

通过这种方式，您避免了调用 fromDegreesArray，因为您的点击处理程序正在执行更详细的工作，即收集每次点击的确切笛卡尔位置。这种聚集必须在每次点击时发生，以防相机在点击之间移动。因此，“进行中”数组必须在点击之间存活，直到收集到所有点击并可以创建多边形。

编辑:这是我试图描述的代码结构示例。我没有在这里显示实际的点击处理程序，因为您似乎已经从鼠标点击中获得了 Cartesian3 值。相反，我展示了三个用于创建多边形的此类值。

var viewer = new Cesium.Viewer('cesiumContainer');

// Create an empty array of click positions at the start.
var clickPositions = [];

// When the first mouse click is received, convert to Cartesian3, and push it into the array.
var click1 = new Cesium.Cartesian3(-2155350.2, -4622163.4, 3817393.1);
clickPositions.push(click1);

// Later, more mouse clicks are received and pushed into the array.
var click2 = new Cesium.Cartesian3(-2288079.8, -4906803.1, 3360431.4);
clickPositions.push(click2);

var click3 = new Cesium.Cartesian3(-1087466.8, -5116129.4, 3637866.9);
clickPositions.push(click3);

// Finally, draw the polygon.
var redPolygon = viewer.entities.add({
    name : 'Red polygon on surface',
    polygon : {
        hierarchy : clickPositions,
        material : Cesium.Color.RED
    }
});

请注意，当 clickPositions 分配给 hierarchy 时，它没有任何变化。这里的 Cartesian3 值数组已经是 Cesium 需要的形式。