Hello,
I’ve spent a lot of time trying to figure out what is the best way to display complex polygons on a cesium map and have not had any breakthrough. Any help would be greatly appreciated. Currently I am working with 10 polygons that each have anywhere between 20 to 300 points and they are moving every 5 seconds. So my cesium map for a duration of 5 minutes is loaded with about 600 polygons (each made up of 20-300 points). Unfortunately this makes the map extremely laggy and basically unusable. Here are the different approached I tried which none of them helped the performance. I should mention that the points position are determined ahead of time so using the callback method on the client side seems to not make sense. I’ve also tried to reduce the number of reference points to less than 10 for each complex polygon so that I basically have 10 dynamic polygons each with 4-10 position reference points and it has not improved performance =/
Approach 1: Using references, I am basically copying this example. Obviously my set up has up to 300 reference points for each polygon. https://sandcastle.cesium.com/?src=CZML%20Polygon%20-%20Interpolating%20References.html&label=CZML
Approach 2: Creating a polygon every time. Every 5 seconds, I create a czml packet for each of the 10 polygons, in this form (I’ve omitted some of the packet details for simplicity).
{
id: “polygon1”,
polygon: {
positions: {
interval: <5 sec interval>,
cartographicDegrees: [<20-30 polygon points>]
}
}
}
The 600 + packets then get loaded onto the client app on the cesium map
Approach 3: I saw that you can also build polygons using hierarchy using the example in this document (https://cesium.com/docs/tutorials/creating-entities/) but I am unable to move the polygon. I tried using references as the points, but it is not working or even loading in the Hello World SandCastle. Here is the code I am using, when you copy/paste that in the Hello World sandcastle, the app just hangs on “Loading”.
var viewer = new Cesium.Viewer(“cesiumContainer”, {
shouldAnimate: true,
});
var czml = [
{
id: "document",
name: "CZML Polygon - Interpolating References",
version: "1.0",
},
{
id: "v1",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2020-08-04T16:00:00Z/2020-08-04T17:00:00Z",
epoch: "2020-08-04T16:00:00Z",
cartographicDegrees: [
0,
-60,
35,
30000,
160,
-65,
35,
5000000,
400,
-70,
40,
20000,
800,
-62,
45,
200000,
1800,
-65,
40,
650000,
3600,
-60,
35,
3000,
],
},
},
{
id: "v2",
position: {
interval: "2020-08-04T16:00:00Z/2020-08-04T17:00:00Z",
cartographicDegrees: [-45.0, 20, 4000000],
},
},
{
id: "v3",
position: {
interpolationAlgorithm: "LINEAR",
interpolationDegree: 1,
interval: "2020-08-04T16:00:00Z/2020-08-04T17:00:00Z",
epoch: "2020-08-04T16:00:00Z",
cartographicDegrees: [
0,
-45,
60,
4000,
400,
-40,
70,
2000000,
1000,
-35,
75,
100000,
3600,
-45,
65,
3000,
],
},
},
];
var wyoming = viewer.entities.add({
polygon : {
hierarchy : Cesium.ReferenceProperty.fromString("v1#position", "v2#position", "v3#position"),
height : 0,
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.dataSources.process(wyoming);
viewer.zoomTo(wyoming);
I’m really running out of ideas on how to improve the performance of my app. I’ve thoroughly looked into the 3 options I mentioned and searched for examples and documentation and I can’t find a solution to improve the performance. Any help would be so appreciated!! thank you!!