orientation problem in dynamic visualization with CZML

1. A concise explanation of the problem you’re experiencing.

I met a problem when I use compositeProperty for orientation. The goal is to display vehicles driving according to track data, which has already converted to CZML file. when the vehicles sometimes stop before traffic light, the orientation of vehicles becomes a problem. With Omar’s help, I use the compositeProperty for orientation, and rewrote CZML file with position intervals(moving interval, stop interval ). The scene in my demo is that a vehicle drives from 00:00 to 00:40, stops until 01:26, and then drives again to end. In code I tried to get the orientation of last time point in a moving interval and assign it as the orientation of next stopping interval. But when running to the stop interval, the vehicle turns to the default orientation again. I checked the orientation value of VelocityOrientationProperty and found it has no value at the stop time point: movingOri.getValue(vehicleInterval.stop) undefined, then I tried to assign the orientation of last second time point to the stop interval, but the vehicle shakes a while and suddenly turns 180deg. I don’t know where the problem is, is the problem of time interval definition in CZML again? I uploaded my CZML file here and below is the link of code in Sandcastle. Could anyone help me to get through this? Many thanks in advance!

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

code shared in sandcastle:

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.57, Windows system, chrome/ firefox browser.

CZMLfromSUMO_singleVeh.czml (6.43 KB)

It looks like the problem is that you have only one stopOrientation property, but you need the vehicle to have multiple different “stop orientations” depending on what the time is. Take a look at this line:

// use the orientation of second last time point of last moving interval

var lastSecondTimeSpot = new Cesium.JulianDate();

Cesium.JulianDate.addSeconds(vehicleInterval.stop, -1, lastSecondTimeSpot);



If you console.log the value of stopOri here, you’ll notice that line of code gets executed twice. But since stopOri is a constant property, each time you set its value, it will overwrite what was before. I manually added a check to make it only execute once, and the vehicle behaves as expected:

// define this variable somewhere at the top of the code
var doneOnce = false;
// …
// Then back to the snippet above, it’s replaced with:
if (!doneOnce){

doneOnce = true;





Here’s a Sandcastle where you can see this. I embedded your CZML in the code so this should be a standalone code example. Hopefully this makes sense. I think the solution here would be to create a composite property whose value is a different constant property for different intervals.

Thanks a lot for your help!

I tried your code snippet in sand castle and it didn’t turn around 180deg any more. I will try to create a composite property for stopOri. But there is another thing still looks weird: just before the vehicle stops, it shakes a little bit and then stops, the orientation when it stops seems not the same as the last moving point orientation but a little bit tilted, but actually it is indeed assigned to the orientation value of second last moving point. hope you can understand what I mean. And there is an error in console:’ TypeError: vehicle.position.setInterpolationOptions is not a function’. I really want the vehicle to stop like a normal car in real world, no shaking, no tilted orientation. Is there anyway to do it? Looking forward to your help.

The sandcastle code is here:https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=zVr9b6M4Gv5XfP2lRNshYL7TdnRznWqvd51L1WS6d7MdVS5xE2sAIzCZbVf9388QkgDh5dxZaXUoSoPt9/HL834Zu2uSofAljtA5+vU+QQj9Xn3L6/6IFGLFs/ujyf3Rh/rnyb53TbOc8aTqNnWj1ccWVfOCh0VME9HqCyMefpPdu4k2Eomg2ZpElRw2zOCd4bwz/LlhTKrPl3G70XQntvWlAVyhxEUkWBoxWmqN231hkWVSlzmLKTjJ/dFW5LWhcUJqkTuWFyRiLyxZop9v/o0WRBD0lPEYzT5/mtbCtWSDx5TnTGyo+rWhUpOAH+JAfmyjw0EFRFMergYe8kAgJJngy4ykKxZ+pMuM0ryj7OYyTg6aTFO3Lcu1/cMu29c917Zw0CPVh6SD8LZnQvDYd9TgMQyPAw+Et9XQLRjdtF0I3QxcNXgbhjdMG4R3FLlxQHjsu7D2hqcG78LwnmVB8IaryL0HwzsBqL1hKnLvw/C2gwF4K3AtNfgAhpeOD8Kram8aMD42HQjfVyXfhMMWGz5Ij6/qOyYct2bgQFnH8hxF+k04ck3fBvn3DFV+4NA1PQw5f39C7cWHY9d0AhDf8VXx4eCVic0D8S2siA9Hr2nZoH/anqr+cPiaGIP+aWNV/4Hj1zR8UH/LNRXLFhy/RuCB+luq8HD4Gr4FmherFl04eg0Pg+yYgaJ1MRy9hmuYIL6t6J0Yjl7DBtmRzCnCw8FrWCA7huqKCsOxa2AM5TYcuKr4cOwaJlhbcGAq5n4Mxi4OAh/KbXJFqJibcQDj+y5UW7AXKHq/ZcD4ng3jq+ZOy4TxXXDtgF1P0T0tDOM7pgvim4rJx7JgfCsA9XdsRf+xbBhfWhHCt33VRb8D45u+B+Kr0u8OwIPs2Iaq93gD8DC+5auy7w/hw/Cq5A8Er2m4ML4iPbYxhG/B+L3O32762rh9PfnxPQH7cE/AnGD3T90T+H9ipHr4Q0b+5F0SfyBujQAsi5an+kI6ELiGC9vBUQxcfyBwDQymNbmmVcSHI9cPBvhRXTYExgC+CyY2rLroDMwBfHA/A2NVeDwAD+ZN7KqyAxdd3/dg7W3FRU9gD+APsG8qLjoDZ4AeOAth1Z28wB3Ad0Dvx6p7bYH3Q9HVu0fZiz9UdsEXXpkdVPerBuou/E6h/j5tDNRdywOzg/PGGrP9/fWkuVHPysOKztFEyKPqFOSgEmXLR9JbAHp94U2NisXx/ogXImIJ/YUtRFnL3HbvirLlStzSJ5rRJNwcYtxeXn+YX91dPsynDz/fTj//62P3FCVlv9Foxl7K8X7vdBdvpqR358fqe3brrYT0HdnUB1A3G4M2OsiasIg8soiJ57eeNW2Od+6Tr6f3yX2yJhlaM/qdZugcJfQ7uqA5K2L9rmrTjsPq9oIngkjGsuPR6UaLUo4lTDAS3dQHQ22AC7nMkL9IYunl2VK90tCqCHAcmYHqDWxX1iv5imkYo0qfLfaKx/SCxDQjpSYSumGkBc0FS0g556SrRIN2njEq1d4M69h4RcmCJcsJck/QeFxjTPcCej2gY8XxOGUiXKHdtE2RqutAIONR1D++7NmPrh3gdctvxb+ehzShelgRoedUlGRobW72vI3HaEYFKlJUnU4ikiyQYDEtfV1HPS7S5yGt6SscPRfSluWJozRDbd1/FJE07UciaGXdq5z7rmFq0CJ0dNoLy9MfQt16ci9q44D0D6nbA70/l5XI+LTkW5okRwTlKaWLIu1Tp/yeCZrulbnYNumz/8zml58eLq6nF/98+PT5en51c311eVshCyYtGPI4LTbugmK+oNAEtyRZ0s4MVZt+PZ3ePMzm05sKNOI8RUQgsaKIJosW3M5TXjiP51zrd4GTfhuOtmzI7pw9RhRl5fR7z8xlMMnWNZVvHfJvSHKKHguBvjOxqh6zjF+K0oynNBPPiD8143efF2qATKbw5gO/xJG0LpnxIgupHnGy0Mr/B2hmq1qy0bKbVkZlJ3lte25qfbR2dlrwhE5lKZJSTyTK6b6zoZ4uWU60pyIJK/tpi52Co2Y6qvnc9+Y6WSyao08bg2v+ztG+X5csyeQi5ZZU/O35aqEdVxXjuEdQL70oaqfT8ioyNkHHuj7efT6kaT6ekTiNaMnsuBLMxxuCPrHo2zwrwm/de30ZPR53cmAsc19cxDfbejxBZnf9FpPfyiGzkERlt6wGnQE5i1a8oEJsivZkbyh5p//y96v5ZUPitfng0lwxX0v3O7DyHZU+LCtoIynv7L3la/tfD6MOZOn4PW6TyEBJRMNrxuPd5KV57khUUG04Kx0fJCUr+HI8Gu0VeOKZVhXgc+OUnXVV1bd7C7ke0WQpVqfsp59GHYM3IuKqHt5+ljKqtz3a7weLmY1VyqwwQQMKyEfW2GiTPk4gEJ6qYfAUgChjYbK3cnvQa9N05cWetP89Wwmps3xr0VEPAx36KhHJYe0ZnUlf27cylGgPZM8k0k4RycWMhjxZlEaZpVy0TbX3I637rOV16G0yv2zwcq37EBXL6J150jNrHzh7QtpftumwZAmw0D5hiqzY58s+ZyhDJd+GSk/09Cg2AgHlsJxHZUlY/iGs10Fztu+adaXhWZL1XUB1aG8y+3qYtBuVUBLYhO/J8DuflhxW+CmPKtFpWn7n3WBmzTGbZbpcr3bfX1qjPkRLqZJYxWiXiK/lyoFksmhkXKbyRtFuheDrSOeyKmbfWU53lVGjWcazVk1sWm3TuwM4PTo5OsvFc0Tfb5r+yiQdmVz2ZpEm65agsmRJJ8/Hj7IeUaGHeV5Kn423QmcLtkZscS7fidsvN/dHcuFM8lz2PBVR/e74/mwsx7fEyuVF6UhrmkXkuRyyMt9fbxp1XT8by9tDKcF59EiyHeJ/AQ

Kind regards,


The error is because it looks like setInterpolationOptions is only available on SamplePositionProperty (see https://cesiumjs.org/Cesium/Build/Documentation/SampledPositionProperty.html?classFilter=SampledP#setInterpolationOptions). You might need to set it in the CZML itself like in this example:


This reference page may also be helpful: https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/InterpolatableProperty

Or just set all your positions outside of CZML directly with the Entity API.

As for the shake, I do believe this is because the velocity of the truck changes in that last part as it slows down, and since orientation is automatically computed from velocity, we see this difference. I’m not entirely sure if it is getting the right orientation, or if it’s not taking enough samples and this change is actually an error. To make debugging this a little easier, here’s a version with a dynamic arrow representing the truck’s computed velocity. It’s clear here that the velocity is jumping around. This is where the velocity is being computed:

It gets two positions in time and subtracts them. So I’m not entirely sure where the problem might be, but hopefully this gives you some direction to look into.

Hi Omar,

thanks again for your help! For the interpolation, do you mean that I should add interpolation in CZML and delete the ‘setInterpolationOptions’ in App.js? But I saw in Cesium-workshop demo() that interpolation exists in both App.js and CZML file for the drone. In App.js it sets interpolationAlgorithm : Cesium.HermitePolynomialApproximation, and in CZML file it sets “interpolationAlgorithm”:“LAGRANGE”, so I was confused which interpolation algorithm actually works and should set it once or twice.

For the shake, I think maybe there is some problem with the function ‘VelocityOrientationProperty’. I saw the arrows you drew to show the direction of velocity, it was very clear. The CZML file is only track data samples, and from the track samples, we can see the vehicle slows down in front of the light and then stop. I will check the velocity calculating as you suggested to see where the problem is. Thank you once again!

Best wishes,