Loading kmldataSource takes time

CesiumJS
1

Hi!Could someone give advice on performance issue.
I have one kml file that contains 4 polygon. For each polygon, I must have a button to trigger ones visibility.
So to achieve this goal, I have divided my kml file to 4 kml file that contains each one a polygon (because I couldn’t find a way to show/hide each polygon inside one kml file).
So if I click one button, it shows one polygon, and if I click this last button again, it hides the polygon. But the problem is it takes a little time for loading the data.
So my question is how should I do to have better performance issue.
I want to know If there are some solutions before changing a datasource type to czml or something else?
Thanks
Regards

2

Hello Valimo, I’m not sure about the performance issue, but have you tried just toggling the visibility of the individual polygon entities that the KML data source creates? I am doing something similar as you, and that worked for me.

3

Hi!Yes I have tried to change show property of an entity to control it in debug mode but it doesn’t work, that’s why I separate the 4 polygon in 4 files.
I even iterate all the 4 entity and then do show=false but it doesn’t work.
Could you tell me more about the way You did yours please.
Regards

4

Valimo,

You can definitely do this with a single KML file with 4 polygons and it will be instantaneous to toggle them on and off. If you can share the KML file and the code you are currently using, I can help you figure out what’s wrong.

5

Hi Matthew,
this polygon.kml is only for a test but I have already visualised it on google earth.
this is my code:
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
timeline: true,
animation: false,
homeButton: false,
screenModePicker: false,
navigationHelpButton: false,
baseLayerPicker: false,
geocoder: false,
sceneMode: Cesium.SceneMode.SCENE3D
}
);
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
url: ‘//assets.agi.com/stk-terrain/world’,
requestWaterMask: true,
requestVertexNormals: true
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
var ds=new Cesium.KmlDataSource();
var myDataSource;
ds.load(‘pathToMyPolygon’).then(function(dataSource){
viewer.dataSources.add(dataSource);
myDataSource=dataSource;
});
//I gave an ID to folder containing each polygon then I took it by getById method
var poly_1=myDataSource.entities.getById(‘id1’);
var poly_2=myDataSource.entities.getById(‘id2’);
var poly_3=myDataSource.entities.getById(‘id3’);
var poly_4=myDataSource.entities.getById(‘id4’);

        document.getElementById('btn1').addEventListener('click',function(){
            poly_1.show=false;
        });
        document.getElementById('btn2').addEventListener('click',function(){
            poly_2.show=false;
        });
        document.getElementById('btn3').addEventListener('click',function(){
            poly_3.show=false;
        });
        document.getElementById('btn4').addEventListener('click',function(){
            poly_4.show=false;
        });

I thought that if I change the property of each polygon container, the polygon itself will be hidden.
This is what I did and I can’t find a way to hidden/show these polygons in one file

Regards

polygon.kml (4.08 KB)

6

I think what you have here is ok except that the values for id in the getById() calls are incorrect. For example, “id1” should be “poly_1” and similar for the other three.

Scott

7

I am sorry for these mistakes. yes getById must be poly_1 and so on
But even so I can’t hidden them

8

In the snippet you posted, everything after the load call needs to be inside the then callback. Right now your entities are undefined because the KML isn’t done loading yet so getByID returns undefined. The fixed code looks like this:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

timeline : true,

animation : false,

homeButton : false,

screenModePicker : false,

navigationHelpButton : false,

baseLayerPicker : false,

geocoder : false,

sceneMode : Cesium.SceneMode.SCENE3D

});

var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({

url : '//[assets.agi.com/stk-terrain/world](http://assets.agi.com/stk-terrain/world)',

requestWaterMask : true,

requestVertexNormals : true

});

viewer.terrainProvider = cesiumTerrainProviderMeshes;

var ds = new Cesium.KmlDataSource();

var myDataSource;

ds.load(’…/…/SampleData/polygon.kml’).then(function(dataSource) {

viewer.dataSources.add(dataSource);

myDataSource = dataSource;

//I gave an ID to folder containing each polygon then I took it by getById method

var poly_1 = myDataSource.entities.getById('poly_1');

var poly_2 = myDataSource.entities.getById('poly_2');

var poly_3 = myDataSource.entities.getById('poly_3');

var poly_4 = myDataSource.entities.getById('poly_4');

Sandcastle.addToolbarButton('click1',function(){

    poly_1.show=false;

});

Sandcastle.addToolbarButton('click2',function(){

    poly_2.show=false;

});

Sandcastle.addToolbarButton('click3',function(){

    poly_3.show=false;

});

Sandcastle.addToolbarButton('click4',function(){

    poly_4.show=false;

});

});

9

Hi Matthew

Thank you very much. I have to pay more attention

Generally, I put such code inside the then callback but anyway I really thank you to remind me this.

Regards

10

Hi everyone!
did anyone can help me how to use a gif file while loading kml datasources?
this is the code I use:
viewer.dataSources.dataSourceAdded.addEventListener(function(d) {
clearGifFileWaiting();
});
var fleetPromise=(new Cesium.kmlDataSource()).load(‘mykmzfile’);
loadWaitingImage();
Cesium.when(fleetPromise, function(datasource) {
viewer.dataSources.add(datasource);
});
I want to display a gif file showing that the cesium is still loading,rendering the datasource but it seems that the dataSourceAdded event is fired very early before cesium render the kmz file. So my gif file is just showing less than 1 second and I have to wait before seeing the kmz datasource be rendered on the globe.