Tutoriel : Comment définir la couleur d'un ellipsoïde dans un document CZML ?

Question

Comment spécifier la couleur d'un ellipsoïde en CZML ?当我在JavaScript中向查看器添加实体时，以下代码片段有效：

let redEllipsoid = viewer.entities.add({
  "nom": "ellipsoïde rouge",
  "position" : Cesium.Cartesian3.fromDegrees (-114,0, 40,0, 300 000,0),
  "ellipsoïde": {
    "rayons" : nouveau Cesium.Cartesian3 (200000.0, 200000.0, 300000.0),
    "matériau" : Césium.Color.RED.withAlpha (0,5),
    "contour" : vrai,
    "outlineColor": Césium.Color.BLACK
  }
});
这个代码片段也有效：
let redEllipsoid = viewer.entities.add({
  "nom": "ellipsoïde rouge",
  "Position" : {
    x : -2083516.9683773473,
    y : -4679655.730028949,
    z : 4270821.855106338
  },
  "ellipsoïde": {
    "rayons": {
      x : 200 000,
      y : 200 000,
      z : 300 000
    },
    "matériau" : Césium.Color.RED.withAlpha (0,5),
    "contour" : vrai,
    "Couleur du contour": {
      rouge : 0,
      vert : 0,
      bleu : 0,
      alpha : 1
    }
  }
});

let redEllipsoid = viewer.entities.add({
  "nom": "ellipsoïde rouge",
  "Position" : {
    x : -2083516.9683773473,
    y : -4679655.730028949,
    z : 4270821.855106338
  },
  "ellipsoïde": {
    "rayons": {
      x : 200 000,
      y : 200 000,
      z : 300 000
    },
    "matériel": {
      "solidColor": {
        "couleur" : {
          "rgba": [1, 0, 0, 0,5]
        }
      }
    },
    "contour" : vrai,
    "Couleur du contour": {
      rouge : 0,
      vert : 0,
      bleu : 0,
      alpha : 1
    }
  }
});

let redEllipsoid = viewer.entities.add({
  "nom": "ellipsoïde rouge",
  "Position" : {
    x : -2083516.9683773473,
    y : -4679655.730028949,
    z : 4270821.855106338
  },
  "ellipsoïde": {
    "rayons": {
      x : 200 000,
      y : 200 000,
      z : 300 000
    },
    "matériel": {
      "couleur" : {
        rouge : 1,
        vert : 0,
        bleu : 0,
        alpha : 0,5
      }
    },
    "contour" : vrai,
    "Couleur du contour": {
      rouge : 0,
      vert : 0,
      bleu : 0,
      alpha : 1
    }
  }
});
Cet extrait de code ne fonctionne pas non plus (renvoie l'ellipsoïde blanc par défaut) : 
let redEllipsoid = viewer.entities.add({
  "nom": "ellipsoïde rouge",
  "Position" : {
    x : -2083516.9683773473,
    y : -4679655.730028949,
    z : 4270821.855106338
  },
  "ellipsoïde": {
    "rayons": {
      x : 200 000,
      y : 200 000,
      z : 300 000
    },
    "matériel": {
      rouge : 1,
      vert : 0,
      bleu : 0,
      alpha : 0,5
    },
    "contour" : vrai,
    "Couleur du contour": {
      rouge : 0,
      vert : 0,
      bleu : 0,
      alpha : 1
    }
  }
});
Je suis confus car taper Cesium.Color.RED.withAlpha(0.5) dans la console après le chargement de Cesium renvoie ne {rouge : 1, vert : 0 , bleu : 0, alpha : 0,5}. On pourrait s'attendre à ce que l'objet spécifié par un membre statique donné fonctionne...
Il s'agit du type de "matériau". Puisqu'il s'agit d'une classe abstraite sans propriétés, suis-je incapable de la spécifier via CZML ? Ce serait très fastidieux si la définition de la couleur de l'ellipsoïde ne pouvait être effectuée que par post-traitement, car j'aimerais pouvoir effectuer une grande partie du traitement hors ligne, puis simplement charger le CZML dans le navigateur. 
EDIT : la documentation CZML est difficile à trouver et à parcourir, mais les réponses simples sont toutes là : 
Voir la page Ellipsoid de la documentation CZML, la page Color et éventuellement la page RgbaValue Il est formaté comme un wiki GitHub, avec une page pour chaque projet, et malheureusement la plupart des projets de documentation sont masqués jusqu'à ce que vous cliquiez sur "Afficher 128 pages supplémentaires". 
            

Answer 1

Le problème est que les Entity.ConstructorOptions acceptées par EntityCollection.add(...) sont similaires à certains égards à CZML, mais présentent des différences évidentes. Vos premiers extraits de code fonctionnels dans la question utilisent correctement ConstructorOptions, mais ils ne gèrent pas la couleur et la position exactement comme CZML.

Pour convertir le code au format CZML d'origine, vous pouvez utiliser CzmlDataSource.load(...) sur le contenu CZML. Par exemple : Démo en direct de 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);