Is there anything wrong with the below code. What I am doing is
- Remove all imagery layers from the globe
- Add world map as a border using geoJson
- Add 10 radar images of resolution 4096 * 3500 each as entities to the viewer.
- Then by slider(range 1 - 10), I show only that radar image that the current slider value is.
It works fine but there is huge memory leak. Like my MAC machine keeps getting slow. On iPhone, it even crashes the application and restarts it after ~2 minute
var cesiumContent = {};
var radarEntitiesList = [];
cesiumContent.showHideRadarForSlider = function() {
radarEntitiesList.forEach(function(item, index) {
item.show = false;
if (index === currentSliderIndex) {
item.show = true;
}
});
};
cesiumContent.addRadarToCesium = function() {
for (var i = 0; i < 10; i++) {
var temp = viewer.entities.add({
name: `${i + 1} Rotating rectangle with rotating texture coordinate `,
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-130.0000000, 20, -60.0000020, 55.0000000),
material: `static/img/radar/${i + 1}.png`,
classificationType: Cesium.ClassificationType.TERRAIN,
},
});
radarEntitiesList.push(temp);
}
};
cesiumContent.addWorldBorder = function(world) {
var globeWaterColor = Cesium.Color.fromCssColorString("#010d12");
var landColor = Cesium.Color.fromCssColorString("#243e54");
var scene = viewer.scene;
var globe = scene.globe;
scene.skyAtmosphere.show = false;
scene.fog.enabled = false;
scene.globe.showGroundAtmosphere = false;
globe.baseColor = globeWaterColor;
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load("static/json/world-110m.json", {
stroke: Cesium.Color.WHITE,
fill: landColor,
strokeWidth: 1,
})
);
};
content.createCesium = function(world) {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NDY2YTkwNC01ZTQxLTQ2MzktYmQyZi02YTY0YjRhMTMzNGUiLCJpZCI6MTczOTQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzIxNzMyMzl9.93BT_28Av3mBeD6J--cH1eebHfeHMSyNfjh4E28r6gE';
// Intitalize cesium
viewer = new Cesium.Viewer('cesiumContainer', {
fullscreenButton: false,
timeline: false,
animation: false,
baseLayerPicker: false,
sceneModePicker: false,
});
// remove all layers so it is blank globe
viewer.scene.imageryLayers.removeAll();
// draw world map border as vectors
cesiumContent.addWorldBorder(world);
// add 10 png images to cesium viewer.
cesiumContent.addRadarToCesium();
};