Hello, we want to display our data on the map by using the method “Cesium.GeoJsonDataSource.load(data, options) → Promise.” in our project. But when we run this method in a loop, we cannot see it loading instantly. It expects all datasources to be loaded and dataSource sets Display.ready to false. What can I do so that the dataSourceDisplay.ready state is always true or that every data source I add appears instantly without waiting for the previous one?
My Code(result has list of url) :
for (let i = 0; i < result.length; i++) {
getGeoJsonData(result[i], onclick, layerName);
}
function getGeoJsonData(geoJsonUrl, onclick, layerName) {
let isFirstLoad = true;
for (let i = 0; i < that.map3d.dataSources.length; i++) {
if (that.map3d.dataSources._dataSources[i].name === geoJsonUrl) {
isFirstLoad = false;
}
}
if (!isFirstLoad)
return;
$.ajax({
type: "GET",
url: geoJsonUrl,
success: function (data) {
let promise = window.Cesium.GeoJsonDataSource.load(data);
promise
.then(function (dataSource) {
console.log(that.map3d.dataSourceDisplay.ready);
dataSource.name = geoJsonUrl;
dataSource.layerName = layerName;
that.map3d.dataSources.add(dataSource);
const entities = dataSource.entities.values;
for (let i = 0; i < entities.length; i++) {
const entity = entities[i];
entity.oid = entity.properties.gd_id._value;
entity.description = entity.properties.gd_description._value;
entity.threeD = true;
entity.onclick = onclick;
entity.polygon.material = entity.properties.gd_style._value;
entity.polygon.outline = false;
entity.polygon.extrudedHeight = entity.properties.gd_ext_height._value;
}
});
},
error: function (e) {
console.error("getobjects error: ", e);
}
});
}
};