[英]Cesium - drawing polygon using camera Lat-Lon-Alt positions
This question is related to these two: 这个问题与这两个有关:
The sample code I am following to get lat-lon-alt positions from the camera is located in the gold standard that appears to be baked into the existing camera controller . 我要从摄像机获取lat-lon-alt位置的示例代码位于黄金标准中,该标准似乎已经烘焙到现有的摄像机控制器中 。 With this code I can retrieve lat-lon-alt positions from the distance of the camera to get values that are almost exact to the original lat-lon position selected and a height above the surface of the earth.
使用此代码,我可以从相机的距离检索纬度-纬度位置,以获取几乎与所选原始纬度位置和地球表面上方高度完全相同的值。 Perfect!
完善!
All examples and documentation show polygon creation using degrees or points from degrees. 所有示例和文档都显示了使用度数或度数点创建的多边形。
Now what? 怎么办? Maybe I'm missing something but the intent I thought was to be able to create the polygon using specific x, y, z coordinates so the polygon would "stick" to the top of my house on zoom-in, zoom-out, and camera movement.
也许我缺少了一些东西,但我的意图是能够使用特定的x,y,z坐标创建多边形,以便在放大,缩小和缩小时多边形将“粘贴”到我房屋的顶部相机运动。 Now that I have those values, what is the secret to drawing the polygon with those values?
现在我有了这些值,用这些值绘制多边形的秘密是什么?
FYI, these are the value I currently have: 仅供参考,这些是我目前拥有的价值:
=========================NEW INFORMATION=========================== =========================新信息======================== ====
The code for the redPolygon works: 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);
The code for the bluePolygon does not work: 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);
If I use hierarchy: collection.latlonalt,
I receive the following error: 如果我使用
hierarchy: collection.latlonalt,
则会收到以下错误:
So I changed the code to hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt),
where collection.latlonalt is my Cartesian3 array: 因此,我将代码更改为
hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt),
其中collection.latlonalt是我的Cartesian3数组:
But nothing gets drawn. 但是什么也没画。 No errors.
没有错误。 This is what I see in the console:
这是我在控制台中看到的:
Just for test, I tried adding az position to the redPolygon and changing .fromDegreesArray to .fromArray like this: 只是为了测试,我尝试将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);
That didn't work either. 那也不起作用。
Cesium has helper functions like Cartesian3.fromDegreesArray
that are used by the Polygon Demo , but, these helper functions are not needed now that you've got your hands on actual Cartesian3 values. Cesium具有Polygon Demo使用的诸如
Cartesian3.fromDegreesArray
类的辅助函数,但是,由于您已经掌握了实际的Cartesian3值,因此不需要这些辅助函数。
For example, the polygon demo code looks like this: 例如,多边形演示代码如下所示:
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
}
});
In the above code, fromDegreesArray
in this case just takes a list of 5 lot/lan value pairs, and converts them into a JavaScript array of 5 instances of the Cartesian3
class. 在上面的代码中,在这种情况下,
fromDegreesArray
仅获取5个lot / lan值对的列表,并将它们转换为具有Cartesian3
类的5个实例的JavaScript数组。 This array of 5 Cartesian3s is then stored as the value of hierarchy
in the polygon definition. 然后,将这个5个笛卡尔3的数组作为
hierarchy
的值存储在面定义中。 If you inspect that definition at runtime, you'll find the original lon/lat values have been discarded, replaced by the actual Cartesian3s, thanks to the helper function. 如果在运行时检查该定义,则会发现原始的lon / lat值已被舍弃,这要归功于helper函数,由实际的Cartesian3代替。
So in your code, you'll need an array of Cartesian3s that the user has clicked on thus far. 因此,在您的代码中,您需要一个到目前为止用户已单击的Cartesian3数组。 This starts as the empty array, and you'll need to gather at least three clicks, converting each click into a Cartesian3 as you've shown works in your question above, and
push
that value into the array. 这从一个空数组开始,并且您至少需要收集三次单击,然后将每次单击转换为Cartesian3(如您在上述问题中显示的那样),然后将该值
push
入数组。 Once the array has accumulated 3 or more clicks, you can then pass that array as the hierarchy
field of the polygon definition. 一旦数组累积了3次或更多点击,您就可以将该数组作为多边形定义的
hierarchy
字段传递。
In this manner, you've avoided calling fromDegreesArray
because your click handler is doing the more detailed work of gathering an exact Cartesian position per click. 通过这种方式,您避免了调用
fromDegreesArray
因为您的点击处理程序正在做更详细的工作,以收集每次点击的确切笛卡尔位置。 This gathering has to happen at the time of each click, in case the camera is moved between clicks. 如果相机在两次单击之间移动,则每次单击时都必须进行这种收集。 So, the array "in progress" has to survive between clicks, until all the clicks have been gathered and a polygon can be created.
因此,数组“进行中”必须在两次单击之间保留下来,直到收集到所有点击并可以创建多边形为止。
EDIT : Here's an example of the code structure I'm trying to describe. 编辑 :这是我要描述的代码结构的示例。 I don't show the actual click handlers here, since you seem to have Cartesian3 values coming out of your mouse clicks already.
我这里没有显示实际的单击处理程序,因为您似乎已经从鼠标单击中得到了Cartesian3值。 Instead, I show three such values being used to create a polygon.
相反,我展示了三个用于创建多边形的值。
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
}
});
Notice nothing happens to clickPositions
when it's assigned to hierarchy
. 请注意,将
clickPositions
分配给hierarchy
时没有任何clickPositions
。 The array of Cartesian3 values is already in the form needed by Cesium here. 这里的Cartesian3值数组已经是Cesium所需的形式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.