Caesium - zeichnen Polygon mit Kamera-Lat-Lon-Alt-Positionen

Question

Diese Frage zu diesen beiden verwandt ist:

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

Der Beispielcode verfolge ich LAT- zu erhalten Lon-Alt-Positionen von der Kamera befindet sich in der gold standard that appears to be baked into the existing camera controller. Mit diesem Code kann ich lat-lon-alt-Positionen aus der Entfernung der Kamera abrufen, um Werte zu erhalten, die fast exakt der ursprünglichen lat-lon-Position und einer Höhe über der Erdoberfläche entsprechen. Perfekt!

Alle Beispiele und Dokumentationen zeigen die Polygonerzeugung mit Graden oder Punkten aus Grad.

Was nun? Vielleicht fehlt mir etwas, aber die Absicht, die ich dachte, war, dass ich das Polygon mit bestimmten x-, y- und z-Koordinaten erstellen konnte, damit das Polygon beim Vergrößern, Verkleinern und Vergrößern auf der Oberseite meines Hauses "kleben" würde Kamerabewegung. Nun, da ich diese Werte habe, was ist das Geheimnis, um das Polygon mit diesen Werten zu zeichnen?

FYI, das sind der Wert I haben derzeit:

---

======================= == NEUE INFORMATIONEN ===========================

der Code für die redPolygon funktioniert:

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); 

Der Code für die bluePolygon nicht funktioniert:

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); 

Wenn ich hierarchy: collection.latlonalt, verwende ich die folgende Fehlermeldung:

Also änderte ich den Code zu hierarchy: Cesium.Cartesian3.fromArray(collection.latlonalt), wo collection.latlonalt ist mein Cartesian3 Array:

Aber nichts wird gezeichnet. Keine Fehler. Dies ist, was ich in der Konsole sehen:

Just for Test habe ich versucht, az Position in die redPolygon Hinzufügen und Ändern von .fromDegreesArray wie folgt .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); 

Das didn‘ t arbeiten entweder.

Answer 1

Cäsium hat Hilfsfunktionen wie Cartesian3.fromDegreesArray, die von der Polygon Demo verwendet werden, aber diese Hilfsfunktionen werden nicht benötigt, jetzt, wo Sie Ihre Hände auf tatsächliche Cartesian3 Werte haben.

Zum Beispiel sieht das Polygon Demo-Code wie folgt aus:

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 dem obigen Code, fromDegreesArray in diesem Fall nimmt nur eine Liste von 5 lot/lan Wert-Paare, und wandelt sie in ein JavaScript-Array von 5 Instanzen der Cartesian3 Klasse. Diese Anordnung von 5 Cartesian3s wird dann als der Wert hierarchy in der Polygondefinition gespeichert. Wenn Sie diese Definition zur Laufzeit überprüfen, werden die ursprünglichen lon/lat-Werte verworfen und durch die Hilfsfunktion durch die tatsächlichen Cartesian3s ersetzt.

In Ihrem Code benötigen Sie also ein Array von Cartesian3s, auf das der Benutzer bisher geklickt hat. Dies beginnt als leeres Array und Sie müssen mindestens drei Klicks sammeln, indem Sie jeden Klick in ein Cartesian3 umwandeln, wie Sie in Ihrer Frage oben gezeigt haben, und push diesen Wert in das Array. Sobald das Array 3 oder mehr Klicks angesammelt hat, können Sie dieses Array als hierarchy Feld der Polygondefinition übergeben.

Auf diese Weise haben Sie vermieden, fromDegreesArray aufzurufen, da Ihr Click-Handler die detailliertere Arbeit des Sammelns einer genauen kartesischen Position pro Klick erledigt. Dieses Sammeln muss zum Zeitpunkt jedes Klicks erfolgen, falls die Kamera zwischen den Klicks bewegt wird. Das Array "in progress" muss also zwischen den Klicks bestehen bleiben, bis alle Klicks erfasst sind und ein Polygon erstellt werden kann.

EDIT: Hier ist ein Beispiel für die Code-Struktur, die ich versuche zu beschreiben. Ich zeige hier nicht die tatsächlichen Click-Handler, da es scheint, dass Cartesian3-Werte bereits aus Ihren Mausklicks kommen. Stattdessen zeige ich drei solche Werte, die verwendet werden, um ein Polygon zu erstellen.

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 
    } 
}); 

Hinweis nichts passiert clickPositions, wenn es um hierarchy zugewiesen wird. Das Array von Cartesian3-Werten ist bereits in der Form, die Cäsium hier benötigt.