Dear Hannah and dear all,
I figured out my previous issue taking into account your suggestions about the DataSourceDisplay, but the performance are not so good…
The loading and the rendering processes are quite slow (we have more ore less 9000 buildings), but this issue is visible only the first time after the geoJSON parsing. I’m able to notify the user when the viewer is ready…
I implemented also the picking on a building and the highlight feature is slow as well… maybe something is wrong in my code.
If you want try and give me a feedback or suggestions in order to improve the performance, just cut and paste in a blank SandCastle page:
var initialExtent = new Cesium.Rectangle.fromDegrees(14.0556,41.717,14.7711,42.3342);
var buildingsCollection3D;
var buildingsMetadata = ;
var buildingHighlighted;
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
selectionIndicator : false,
infoBox : false
});
var scene = viewer.scene;
var handler;
viewer.scene.camera.setView({destination: initialExtent});
Sandcastle.addToolbarButton(‘Load Custom GeoJSON’, function() {
loadBuildingsFromGeoJson();
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
//MOUSE MOVE
handler.setInputAction(function (movement){
pickingAction.mousePosition = movement;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//LEFT CLICK
handler.setInputAction(function(movement) {
pickingAction();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
function pickingAction(){
var pickedObject = scene.pick(pickingAction.mousePosition.endPosition);
if (Cesium.defined(pickedObject)) {
if(Cesium.defined(buildingHighlighted)){
buildingHighlighted.polygon.material = buildingsMetadata[buildingHighlighted._name].colorRoof;
buildingHighlighted = undefined;
}
pickedObject.id.polygon.material = Cesium.Color.fromCssColorString("#ffc600");
buildingHighlighted = pickedObject.id;
}
}
function loadBuildingsFromGeoJson(){
console.log(“BUILDINGS LOADING -> BEGIN”);
Cesium.loadJson(“http://sparta.sis-ter.it/wg_trignosinello_wip/cesium/Apps/json_edificio.php”).then(function(geojson) {
console.log(“BUILDINGS LOADING -> COMPLETE”);
buildingsCollection3D = new Cesium.EntityCollection();
console.log(“BUILDINGS ENTITIES CREATION -> BEGIN”);
for(var i=0;i<geojson.data.length;i++){
var building = geojson.data[i];
var buildingMetadata = getBuildingsInfo(building);
buildingsMetadata[buildingMetadata.code] = buildingMetadata;
createBuilding(buildingMetadata.code,buildingMetadata.coordinateArray,buildingMetadata.extrudedHeight,buildingMetadata.colorBuilding,buildingMetadata.colorRoof,buildingMetadata.description);
}
buildingsCollection3D.show = true;
console.log(“BUILDINGS ENTITIES CREATION -> COMPLETE”);
}).otherwise(function(error) {
console.log(error);
});
}
function getBuildingsInfo(building){
var colore = building.colore;
var colore_secondario = building.colore_secondario;
var buildingMetadata = {};
buildingMetadata.code = building.id;
buildingMetadata.link = building.cat_partkey;
buildingMetadata.catPartKey = building.cat_partkey;
buildingMetadata.coordinate = JSON.parse(building.coordinate).coordinates[0][0];
buildingMetadata.extrudedHeight = parseFloat(building.altezza);
buildingMetadata.colorBuilding = Cesium.Color.fromCssColorString(colore);
buildingMetadata.colorRoof = Cesium.Color.fromCssColorString(colore_secondario);
buildingMetadata.coordinateArray = .concat.apply(, buildingMetadata.coordinate);
return buildingMetadata;
}
function createBuilding(code,coordinate,extrudedHeight,colorBuilding,colorRoof,description){
var maxhFlat = ;
var minhFlat = ;
for(var i=0;i<coordinate.length/2;i++){
maxhFlat.push(extrudedHeight);
minhFlat.push(0.0);
}
var buildingModelFlat = viewer.entities.add({
name: code,
description: description,
wall : {
positions : Cesium.Cartesian3.fromDegreesArray(coordinate),
maximumHeights : maxhFlat,
minimumHeights : minhFlat,
outline : true,
material: colorBuilding
},
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray(coordinate),
height : extrudedHeight,
outline : true,
material : colorRoof
}
});
buildingsCollection3D.add(buildingModelFlat);
}
``
The building will be displayed on the coast.
Thank you,
Michele