Tutorial: Wie stelle ich die Farbe eines Ellipsoids in einem CZML-Dokument ein?

Question

Wie spezifiziere ich die Farbe eines Ellipsoids in CZML?当我在JavaScript中向查看器添加实体时，以下代码片段有效：

let redEllipsoid = viewer.entities.add({
  „Name“: „rotes Ellipsoid“,
  „Position“: Cäsium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  „Ellipsoid“: {
    „Radien“: new Caesium.Cartesian3(200000.0, 200000.0, 300000.0),
    „Material“: Caesium.Color.RED.withAlpha(0.5),
    "Umriss": wahr,
    „outlineColor“: Cäsium.Color.BLACK
  }
});

这个代码片段也有效：

let redEllipsoid = viewer.entities.add({
  „Name“: „rotes Ellipsoid“,
  "Position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  „Ellipsoid“: {
    „Radien“: {
      x: 200000,
      Jahr: 200000,
      z: 300000
    },
    „Material“: Caesium.Color.RED.withAlpha(0.5),
    "Umriss": wahr,
    "outlineColor": {
      rot: 0,
      grün: 0,
      blau: 0,
      Alpha: 1
    }
  }
});

但是这个代码片段无效（返回默认的白色椭球）:

let redEllipsoid = viewer.entities.add({
  „Name“: „rotes Ellipsoid“,
  "Position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  „Ellipsoid“: {
    „Radien“: {
      x: 200000,
      Jahr: 200000,
      z: 300000
    },
    "Material": {
      "solidColor": {
        "Farbe": {
          „rgba“: [1, 0, 0, 0,5]
        }
      }
    },
    "Umriss": wahr,
    "outlineColor": {
      rot: 0,
      grün: 0,
      blau: 0,
      Alpha: 1
    }
  }
});

这个代码片段也无效（返回默认的白色椭球）：

let redEllipsoid = viewer.entities.add({
  „Name“: „rotes Ellipsoid“,
  "Position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  „Ellipsoid“: {
    „Radien“: {
      x: 200000,
      Jahr: 200000,
      z: 300000
    },
    "Material": {
      "Farbe": {
        rot: 1,
        grün: 0,
        blau: 0,
        Alpha: 0,5
      }
    },
    "Umriss": wahr,
    "outlineColor": {
      rot: 0,
      grün: 0,
      blau: 0,
      Alpha: 1
    }
  }
});

Dieses Code-Snippet funktioniert auch nicht (gibt das standardmäßige weiße Ellipsoid zurück):

let redEllipsoid = viewer.entities.add({
  „Name“: „rotes Ellipsoid“,
  "Position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  „Ellipsoid“: {
    „Radien“: {
      x: 200000,
      Jahr: 200000,
      z: 300000
    },
    "Material": {
      rot: 1,
      grün: 0,
      blau: 0,
      Alpha: 0,5
    },
    "Umriss": wahr,
    "outlineColor": {
      rot: 0,
      grün: 0,
      blau: 0,
      Alpha: 1
    }
  }
});

Ich bin verwirrt, weil die Eingabe von Cesium.Color.RED.withAlpha(0.5) nach dem Laden von Cäsium ne {red: 1, green: 0 zurückgibt , blau: 0, Alpha: 0,5}. Man würde erwarten, dass das von einem bestimmten statischen Mitglied angegebene Objekt funktionieren würde...

Dies ist der Typ von "Material". Kann ich sie nicht über CZML angeben, da es sich um eine abstrakte Klasse ohne Attribute handelt? Es wäre sehr umständlich, wenn die Einstellung der Farbe des Ellipsoids nur durch Nachbearbeitung erfolgen könnte, da ich einen Großteil der Bearbeitung gerne offline durchführen und dann einfach die CZML in den Browser laden möchte.

BEARBEITEN: Die CZML-Dokumentation ist schwer zu finden und zu navigieren, aber die einfachen Antworten sind alle vorhanden:

Siehe die Seite Ellipsoid, Seite SolidColor Seite und optional die Seite RgbaValue Es ist als GitHub-Wiki formatiert, mit einer Seite für jedes Projekt, und leider werden die meisten Dokumentationsprojekte ausgeblendet, bis Sie auf „128 weitere Seiten anzeigen“ klicken.

Answer 1

问题在于EntityCollection.add(...)接受的Entity.ConstructorOptions与CZML在某些方面是相似的，但又有一些明显的不同。你在问题中的前几个工作代码片段正确地使用了ConstructorOptions，但它们的处理颜色和位置的方式与CZML并不完全相同。

要将代码转换为原始的CZML格式，可以在CZML内容上使用CzmlDataSource.load(...)。例如：Sandcastle实时演示

const czml = [
  {
    id: "document",
    version: "1.0",
  },
  {
    "id": "red ellipsoid",
    "name": "red ellipsoid",
    "position": {
      "cartesian": [
        -2083516.9683773473,
        -4679655.730028949,
        4270821.855106338
      ]
    },
    "ellipsoid": {
      "radii": {
        "cartesian": [
          200000,
          200000,
          300000
        ]
      },
      "material": {
        "solidColor": {
          "color": {
            "rgba": [255, 0, 0, 128]
          }
        }
      },
      "outline": true,
      "outlineColor": {
        red: 0,
        green: 0,
        blue: 0,
        alpha: 1
      }
    }    
  },
];

const viewer = new Cesium.Viewer("cesiumContainer");
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);