铯 - 绘图多边形使用相机Lat-Lon-Alt位置 [英] Cesium - drawing polygon using camera Lat-Lon-Alt positions

问题描述

这个问题与这两个问题有关：

1. 
   
   

   ---

   
   
   

   =======================新资讯===================== ====

   
   
   

   redPolygon的代码工作原理：

     var redPolygon = viewer.entities.add（{
    name：'表面上的红色多边形'，
   多边形：{
   层次结构：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，我收到以下错误：

   
   
   
   
   
   

   我将代码更改为层次结构：Cesium.Cartesian3.fromArray（collection.latlonalt），其中collection.latlonalt是我的Cartesian3数组：

   
   
   
   
   
   

   但没有绘制。没有错误。这是我在控制台中看到的：

   
   
   
   
   
   

   只是为了测试，我尝试添加az位置到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）; 
     

   这也没用。

   解决方案

   Cesium具有帮助功能，如 <$ ccc> / csps / Sscastcast / index.html？src = Polygon使用的c $ c> Cartesian3.fromDegreesArray 。 html& label = Allrel =nofollow>多边形演示，但现在不需要这些帮助函数，因为你已经掌握了实际的笛卡尔3值。

   
   
   

   例如，多边形演示代码如下：

     var redPolygon = viewer.entities.add（{ 
    name：'表面上的红色多边形'，
    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 case只需要一个5个lot / lan值对的列表，并将它们转换为5个 Cartesian3 类的JavaScript数组。这个5笛卡尔坐标系的数组然后作为 hierarchy 的值存储在多边形定义中。如果你在运行时检查这个定义，你会发现原来的lon / lat的值已经被丢弃，由实际的笛卡尔3s，由于帮助函数。

   
   
   

   在代码中，您需要一个用户点击的Cartesian3数组。此操作从空数组开始，您需要至少收集三次点击，将每次点击转换为笛卡尔语3，如您在上面的问题中所示，以及 push 一旦数组累积了3次或更多次点击，您就可以将该数组作为多边形定义的层次结构字段传递。

   
   
   

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

   
   
   

   EDIT ：这里是我想要描述的代码结构的一个例子。我不显示实际的点击处理程序在这里，因为你似乎有Cartesian3值出来的鼠标点击已经。相反，我会显示三个这样的值用于创建多边形。

     var viewer = new Cesium.Viewer（'cesiumContainer'） ; 
    
    //在开始处创建一个空的点击位置数组。 
    var clickPositions = []; 
    
    //收到第一次鼠标点击时，转换为Cartesian3，并将其推入数组。 
    var click1 = new Cesium.Cartesian3（-2155350.2，-4622163.4，3817393.1）; 
    clickPositions.push（click1）; 
    
    //稍后，更多的鼠标点击被接收并推入数组。 
    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）; 
    
    //最后，绘制多边形。 
    var redPolygon = viewer.entities.add（{
    name：'表面上的红色多边形'，
   多边形：{
   层次结构：clickPositions，
    material：Cesium。 Color.RED 
   } 
   }）; 
     

   注意： clickPositions 到层次结构。 Cartesian3值的数组已经是Cesium在这里需要的形式了。

   
   

   This question is related to these two:

   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

   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. 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. 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:

   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:

   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:

   So I changed the code to hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt), where collection.latlonalt is my Cartesian3 array:

   But nothing gets drawn. No errors. This is what I see in the console:

   Just for test, I tried adding a z position to the redPolygon and changing .fromDegreesArray to .fromArray like this:

   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.

   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. This array of 5 Cartesian3s is then stored as the value of hierarchy in the polygon definition. 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.

   So in your code, you'll need an array of Cartesian3s that the user has clicked on thus far. 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. Once the array has accumulated 3 or more clicks, you can then pass that array as the hierarchy field of the polygon definition.

   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. 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. 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. The array of Cartesian3 values is already in the form needed by Cesium here.

   这篇关于铯 - 绘图多边形使用相机Lat-Lon-Alt位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！