Viewer and scene problem

CesiumJS
1

Hello, I create an app contains glTF model and geojson data sources. When I change the data source with a function using HTML button, the code gives an error.

I tried to “viewer.scene.primitives.removeAll();” code block but I did not take a result. How can I solve this problem?

Thank you.

Dogus

2

Hello Dogus,

What is the error you are seeing?

Scott

3

Hi, you can see the error in the link below.

http://web.itu.edu.tr/gulerdo/Cesium/Apps/HelloWorld4.html

Thanks

19 Mayıs 2018 Cumartesi 18:07:36 UTC+3 tarihinde Scott Reynolds yazdı:

4

Could you help us track down the error by creating a Sandcastle example that duplicates this?

Thanks,
Gabby

5

It looks like the call to primitives.removeAll() destroys the “primitives” that are associated with the GeoJsonDataSource and thus the call dataSources.removeAll() attempts to destroy primitives that have already been destroyed. Maybe Gabby knows for sure.

Here’s a Sandcastle example that works.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var modelPrimitive = null;

function hideByHeight1() {

viewer.dataSources.removeAll();

if (modelPrimitive) {

    viewer.scene.primitives.remove(modelPrimitive);

    modelPrimitive = null;

}

var promise = Cesium.GeoJsonDataSource.load('../../SampleData/Dogus/Dogus_ist.geojson');

promise.then(function (dataSource) {

    viewer.dataSources.add(dataSource);

    var entities = dataSource.entities.values;

    for (var i = 0; i < entities.length; i++) {

        //Remove the outlines.

        entities[i].polygon.outline = false;

        //Extrude the polygon based on any attribute you desire         

        entities[i].polygon.extrudedHeight = entities[i].properties.Shape_Area * 100000;

        if (entities[i].polygon.extrudedHeight > 5000) {

            entities[i].polygon.material = Cesium.Color.FUCHSIA;

        } else {

            entities[i].polygon.material = Cesium.Color.GOLD;

        }

    }

    viewer.zoomTo(promise);

});

}

function hideByHeight() {

viewer.dataSources.removeAll();

if (modelPrimitive) {

    viewer.scene.primitives.remove(modelPrimitive);

    modelPrimitive = null;

}

var promise = Cesium.GeoJsonDataSource.load('../../SampleData/Dogus/Dogus_ist.geojson');

promise.then(function (dataSource) {

    viewer.dataSources.add(dataSource);

    var entities = dataSource.entities.values;

    for (var i = 0; i < entities.length; i++) {

        //Remove the outlines.

        entities[i].polygon.outline = false;

        //Extrude the polygon based on any attribute you desire         

        entities[i].polygon.extrudedHeight = entities[i].properties.Shape_Area * 100000;

        if (entities[i].polygon.extrudedHeight > 1000) {

            entities[i].polygon.material = Cesium.Color.DARKCYAN;

        } else {

            entities[i].polygon.material = Cesium.Color.GOLD;

        }

    }

    viewer.zoomTo(entities);

});

}

function addModel() {

viewer.dataSources.removeAll();

if (modelPrimitive) {

    viewer.scene.primitives.remove(modelPrimitive);

    modelPrimitive = null;

}

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(

    Cesium.Cartesian3.fromDegrees(29, 41.0, 0.0));

modelPrimitive = viewer.scene.primitives.add(Cesium.Model.fromGltf({

    url: '../../SampleData/Dogus/Dogus_deger2.gltf',

    modelMatrix: modelMatrix,

    scale: 2000

}));

}

Sandcastle.addToolbarMenu([{

text: 'Options'

}, {

text: '> 1000',

onselect: function() {

    hideByHeight();

}

}, {

text: '> 5000',

onselect: function() {

    hideByHeight1();

}

}, {

text: 'Model',

onselect: function() {

    addModel();

}

}]);

``

6

It works, thank you so much.

Bests,