What is the method for defining the color of an ellipsoid in a CZML file?

Is there a way to specify the color of an ellipsoid in CZML? I've tried different snippets, some work and some don't:

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  "ellipsoid": {
    "radii": new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
    "material": Cesium.Color.RED.withAlpha(0.5),
    "outline": true,
    "outlineColor": Cesium.Color.BLACK
  }
});

Another working snippet is:

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  "ellipsoid": {
    "radii": {
      x: 200000,
      y: 200000,
      z: 300000
    },
    "material": Cesium.Color.RED.withAlpha(0.5),
    "outline": true,
    "outlineColor": {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    }
  }
});

Unfortunately, these following snippets do not work and result in an ellipsoid with the default white color:

let redEllipsoid = viewer.entities.add({
  "name": "red ellipsoid",
  "position": {
    x: -2083516.9683773473,
    y: -4679655.730028949,
    z: 4270821.855106338
  },
  "ellipsoid": {
    "radii": {
      x: 200000,
      y: 200000,
      z: 300000
    },
    "material": {
      "solidColor": {
        "color": {
          "rgba": [1, 0, 0, 0.5]
        }
      }
    },
    "outline": true,
    "outlineColor": {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    }
  }
});

I'm confused by this issue as well, especially since entering Cesium.Color.RED.withAlpha(0.5) into the console after Cesium has loaded returns 

ne {red: 1, green: 0, blue: 0, alpha: 0.5}
. It seems like using the static member should be sufficient...

You can refer to the CZML documentation for more information on the "material" type. It appears that specifying it via CZML might require additional processing instead of being set directly.

For detailed answers, you can check out the Ellipsoid page, Material page, SolidColorMaterial page, Color page, and optionally the RgbaValue page within the CZML documentation.

javascriptjsontypescesiumjsczml

Answer №1

The main issue at play here revolves around the EntityCollection.add(...) function, which requires Entity.ConstructorOptions. These options bear some resemblance to CZML, but they do have notable differences in certain aspects. The initial snippets in your query demonstrate proper utilization of ConstructorOptions, albeit with variations in color and position handling compared to CZML.

To translate your code into raw CZML format, one would employ the use of CzmlDataSource.load(...) on the CZML data itself. For instance: 

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to switch the visibility of a specific thumbnail

Our team has created a new app that showcases all the videos in our channel. Users can browse through thumbnails and click on one to view the related video, instead of viewing all videos at once. Angular Code $scope.isvideoPlaying = false; $scope.displ ...

javascriptjavaandroidangularjsionic-framework

The debate between storing multiple references in a React component and querying the DOM by ID

While creating a form in React, I want to automatically focus on the first invalid field after submission. In order to achieve this, I need to have access to a reference of the invalid field and then call .focus() on it. My question is whether it would be ...

javascriptreactjsperformance

The functionality of HTML5 Camera is experiencing issues while being used with Tomcat7

My Angular2 project includes HTML5 camera access functionality. I launch the project using Angular CLI (ng serve), which starts the web container for testing purposes. When trying to access the camera, the browser prompts me for permission. Once granted, e ...

javascripthtmlcamera

Retrieve the text content of a span element using jQuery

How can I use jQuery to extract the text "cnn.com" from the given HTML structure? var txt = $(".example1 >.myNewTest").closest('.subexample2').find('span').text(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3 ...

javascriptjquery

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

Are there any current implementations of the Media Capture API in use?

After delving into the details of the draft Device APIs, I am curious if there are any existing implementations of the Media Capture API. Ericsson has showcased a few demos but hasn't made the source code available yet. There is also a reported bug o ...

javascripthtmlw3c

Failure to trigger custom event on FB pixel

I have installed the FB pixel helper browser plugin and I am confident that the FB pixel is properly implemented, as it is tracking pageviews correctly. However, I am facing an issue where the code for reporting a custom event is not working, even though ...

javascriptfacebook

Modifying the href attribute of a hyperlink with jQuery

Is it possible to modify the href attribute of a hyperlink using jQuery? ...

javascripthtmljqueryhyperlink

Creating a dynamic routerLink value in Angular 8 for items within an ngFor loop

I am currently attempting to route a dynamic value from the NgFor using [routerLink]. <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let factors of factorsList"> <span>{{factors | ...

javascripthtmlangularangular-ui-routerangular-routing

When the user initiates a fetch request, they will be directed to the POST page as a standard

Whenever I utilize fetch for a post request, I encounter an issue where the user is not redirected to the Post page as they would be with a regular form submission. My goal is to be able to direct the user to a specific location on the server side at app ...

javascriptnode.jsexpress

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

javascriptcssreactjsreact-nativeflexbox

Incorporate a button into your Django formset application

Working with Django 5, I am in the process of creating a web application for managing a Secret Santa gift exchange project. One issue I'm facing is that formsets are not dynamic, meaning I cannot generate a variable number of forms based on user inpu ...

javascripthtmldjangodjango-viewsdjango-forms

Securing and unscrambling the json file in a node.js environment

Is there a way to encrypt and decrypt a JSON file in node.js? I attempted to run this program and encountered an error stating that File password tty.setrawmode is not a function. Original text: { "production" : { "db" : { "database" : "my ...

jsonnode.jsencryption

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

javascriptcssreactjstypescriptreact-native

Reactjs may have an undefined value for Object

I have already searched for the solution to this question on stackoverflow, but I am still confused. I tried using the same answer they provided but I am still getting an error. Can someone please help me resolve this issue? Thank you. const typeValue = [ ...

javascripttypescript

Anticipated worth following the setTimeout function has been established

When trying to set the expected value in a setTimeout function, I encountered an issue. The two values I have are: const first = 0; const second = 0; However, this resulted in an error: "Uncauth TypeError: You provided 'undefined' where a strea ...

javascriptangularunit-testing

Exploring the power of ElasticSearch alongside Mysql

As I plan the development of my next app, I am faced with the decision between using NoSQL or a Relational Database. This app will be built using ReactJS and ExpressJS. The data structure includes relational elements like videos with tags and users who li ...

javascriptmysqlnode.jselasticsearch

Tips for sending JSON data in a Java RestAPI using the GET method

I'm looking to update my method so that it can handle JSON data. Specifically, I need to make a GET REST method call with JSON data. GET /player/login/ HTTP/1.0 Content-Type: application/json Request Body { "username": ”xyz” ...

javajsonrestjackson

Check if a Vue 3 component has been loaded and if not, load a general component

Currently in the process of migrating a project from Vue 2 to Vue 3, I find myself searching for a way to determine if a component is loaded, and if not, how to load a GenericComponent as a placeholder. In Vue 2, I was able to accomplish this task using ...

javascriptvue.jsvuejs3

How can I apply a class to the pre and code elements in Redactor?

I've been struggling for days to figure out how to add a class to the formatting option element within Redactor. By default, the "Code" formatting option wraps content in either <pre></pre> or <code></code> HTML elements. Howe ...

javascriptjqueryredactor