3DTiles Styling by code

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Is is possible to create this:

function colorByHeight() {

tileset.style = new Cesium.Cesium3DTileStyle({

    color: {

        conditions: [

            ['${citygml_measured_height} >= 21', 'rgba(45, 0, 75, 0.5)'],

            ['${citygml_measured_height} >= 18', 'rgb(102, 71, 151)'],

            ['${citygml_measured_height} >= 15', 'rgb(170, 162, 204)'],

            ['${citygml_measured_height} >= 12', 'rgb(224, 226, 238)'],

            ['${citygml_measured_height} >= 9', 'rgb(252, 230, 200)'],

            ['${citygml_measured_height} >= 6', 'rgb(248, 176, 87)'],

            ['${citygml_measured_height} >= 3', 'rgb(198, 106, 11)'],

            ['true', 'rgb(127, 59, 8)']

        ]

    }

});

}

``

But instead of in a declarative way define it by code.

For example, having a XML file with the ranges information-

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Define styles in a more generic way

4. The Cesium version you’re using, your operating system and browser.

1.50

2

You should be able to create an expression function as shown here:

https://cesiumjs.org/Cesium/Build/Documentation/Cesium3DTileStyle.html?classFilter=styl#color

var style = new Cesium.Cesium3DTileStyle();
// Override color expression with a custom function
style.color = {
    evaluateColor : function(feature, result) {
        return Cesium.Color.clone(Cesium.Color.WHITE, result);
    }
};

``

That way this function could read from your XML/whatever datasource and dynamically return the correct color, even if you have hundreds of such rules.

Is that what you’re looking for?

3

Thank you Omar.

Another question, is it possible to style the 3D Tiles with properties that are not in the 3D Tile? I mean, for example with data that has been calculated or some real data or sensor data that is not included in the static 3D Tile data.

Thanks in advance!

Best regards

4

Do you have an example of what kind of data you’re thinking about? I think at the least you’d need some sort of way to map the features in the tileset to your new data. For example, if you have real time sensor data about each building in a city, you can use that style expression above, which gives you the feature, to get the new data for that particular building based on its name or ID. So it could look something like:

var style = new Cesium.Cesium3DTileStyle();
style.color = {
    evaluateColor : function(feature, result) {
        var buildingName = feature.getProperty('name');
        return ColorMap[buildingName];// Assuming ColorMap is a dictionary you create and update
    }
};

``

See https://cesiumjs.org/Cesium/Build/Documentation/Cesium3DTileFeature.html?classFilter=feature#getProperty

For a completely different approach, I recently wrote a blog post about 3D Tiles classification:

This way you can create geometry, like a GeoJSON or CZML, which can be regularly updated and used to color the tileset(s).