Cesium JS Dev tool crashed when two instances are running for long time

CesiumJS
1

I am using cesium js 1.50 version with angular js application. As per my requirement i need to run two cesium instances (2D & 3D) on a single page(Refer attached image).
Data will be updated through API call and i am using CZML object structure to create the drawing elements.

Issue:
Application runs for 3 to 4 hours, then chrome Dev tool crashes after 1100 iteration.
I am running in 8GB RAM, i3 Processor.
Any help or suggestion for me me check ?

image
image1362×581 267 KB

2

What error message do you see? Do both instances crash? Can you elaborate on what you mean by “1100 iteration” - is that 1,100 frames? Are you able to reproduce that consistently or does it only happen some of the time?

3

What error message do you see?
Chrome Dev Tool Crash error. Heap size is full.

Do both instances crash?
Yes, Whole application is crashed.

Can you elaborate on what you mean by “1100 iteration” - is that 1,100 frames?
I am updating polygon and polyline points in a recurssive function call. All data are coming from API as JSON and i am updating the points by parsing viewer.datasource.
On first iteration am adding the czml to datasource. Then on next iterations i am updating the points. please check below codes.

let iterationCount = 0;

let czml = ;

let polygonList = ;

let polyLineList = ;

processData();

var getData = function() {

var _responsePromise = $http({

    url: "http://localhost:5000/api/getDetails",

    method: 'GET'

});

return _responsePromise;

}

function processData() {

getData().then(function (response) {

    polygonList = response.data.PolygonList;

    polyLineList = response.data.PolylineList;

    if(iterationCount == 0){

        constructCZML();

    }

    drawOnMap(function(res) {

        if(res.status == "Complete"){

            iterationCount++;

            processData();

        }

    });

});

}

function constructCZML() {

czml.push({

    'id' : 'document',

    'name' : 'CZML: Geometry',

    'version' : '1.0'

},

{

    "id": "polygonCircle",

    "name": "polygonCircle",

    "polygon": {

        "positions": {

            "cartographicDegrees": [],

        },

        "material": {

            "solidColor": {

                "color": {

                    "rgba": [255, 255, 255, 255]

                }

            }

        },

        "show": true

    }

},

{

    "id" : "polyline",

    "name" : "polyline",

    "polyline" : {

        "positions" : {

            "cartographicDegrees" : []

        },

        "material" : {

            "solidColor" : {

                "color" : {

                    "rgba" : [255, 0, 0, 255]

                }

            }

        },

        "width" : 2,

        "clampToGround" : false,

        "show": true

    }

});

}

function drawOnMap() {

if(iterationCount == 1) {

    //polyline

    var _index = czml.findIndex(item => item.id == "polyline");

    if(_index != -1){

        var tempPolylineList = [];

        for(var e = 0; e < polyLineList.length; e++) {

            tempPolylineList.push(polyLineList[e].Lon, polyLineList[e].Lat, 0);

        }

        czml[_index].polygon.positions.cartographicDegrees = tempPolylineList;

        czml[_index].polygon.show = true;

    }

    //polygon

    var _index = czml.findIndex(item => item.id == "polygonCircle");

    if(_index != -1){

        var tempPolygonList = [];

        for(var e = 0; e < polygonList.length; e++) {

            tempPolygonList.push(polygonList[e].Lon, polygonList[e].Lat, 0);

        }

        czml[_index].polygon.positions.cartographicDegrees = tempPolygonList;

        czml[_index].polygon.show = true;

    }

    

    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

    callback({ status: "Complete" });

}else if(iterationCount > 1){

    for(var a = 0; a < viewer.dataSources._dataSources.length; a++){

        var source = viewer.dataSources._dataSources[a];

        if(source.name == "CZML: Geometry") {

            if(polyLineList.length > 0){

                var tempPolylineList = [];

                for(var e = 0; e < polyLineList.length; e++) {

                    tempPolylineList.push(polyLineList[e].Lon, polyLineList[e].Lat, 0);

                }

                var polyline = source.entities.getById('polyline').polyline;

                polyline.hierarchy.positions.setValue(Cesium.Cartesian3.fromDegreesArrayHeights(tempPolylineList));

            }

            if(polygonList.length > 0){

                var tempPolygonList = [];

                for(var j = 0; j < polygonList.length; j++) {

                    tempPolygonList.push(parseFloat(polygonList[j].Lon), parseFloat(polygonList[j].Lat));

                }

                var polygonCircle = source.entities.getById('polygonCircle').polygon;

                polygonCircle.hierarchy.setValue(Cesium.Cartesian3.fromDegreesArray(tempPolygonList));

            }

        }

    }

    callback({ status: "Complete" });

}

}
Are you able to reproduce that consistently or does it only happen some of the time?
Yes, This happens every time i reached that iteration.

Note:
I have given one sample of czml. I have 30 to 40 drawing elements on the czml array.

4

Hi @omar any suggestion for me ?

5

Can you share a full Sandcastle example I can run to reproduce the crash? See: How to share custom Sandcastle examples

If you can only trigger it using this specific CZML data, please upload it to Cesium ion and share that link so we can run it.