Styling and Filtering 3D Tiles with CesiumJS: A Comprehensive Guide

As 3D mapping technologies continue to advance, the ability to style and filter 3D Tiles becomes crucial for creating visually appealing and informative visualizations. In this guide, we will explore how to leverage CesiumJS to style and filter 3D Tiles, enabling developers to highlight important features within their datasets. Whether you are working with 3D buildings, point clouds, or other spatial data, this guide will walk you through the process of applying styles and filters using CesiumJS.

Prerequisites:

Before diving into the styling and filtering techniques, ensure you have the following:

1. A 3D Tileset with properties or classification.

2. Basic knowledge about CesiumJS.

3. A Cesium ion account to generate an access token for JSFiddle code examples.

The Styling Language for 3D Tiles

CesiumJS provides a powerful styling language for 3D Tiles, allowing developers to define rules for the appearance of features within a dataset. This language utilizes JSON and JavaScript expressions, along with built-in functions for common math operations. The guide will cover key aspects of this styling language, including styling options, tests for conditions, creating variables, and using the distance function.

For a more detailed reference, developers are encouraged to consult the 3D Tiles Styling Specification. Additionally, examples can be explored in Sandcastle by searching for "styling."

What is a 3D Tiles Feature?

Before delving into styling, it's essential to understand what constitutes a 3D Tiles feature. Features can represent various entities such as buildings, doors, windows, valves, or points in a point cloud.

Applying Basic Styles

Two common ways to apply styles to a 3D tileset are through the 'show' and 'color' visual properties. The guide demonstrates how to set styling rules using the Cesium3DTileStyle class. A practical example involves coloring specific buildings within a dataset while leaving others in their default color.

javascript

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({

color: {

conditions: [

["${name} === 'Crown Entertainment Complex'", "color('red')"],

["true", "color('white')"],

],

},

});

Coloring Features Using Conditions

Conditions play a crucial role in defining features' appearance based on specific criteria. The guide illustrates this with an example of designing a bus route around Melbourne’s Crown Entertainment Complex, where buildings are colored based on their distance from the complex.

javascript

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({

defines: {

distanceFromComplex:

"distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(144.96007, -37.82249))",

},

color: {

conditions: [

["${distanceFromComplex} > 0.010", "color('#d65c5c')"],

["${distanceFromComplex} > 0.006", "color('#f58971')"],

// Additional conditions...

["true", "color('#ffffff')"],

],

},

});

Handling Undefined Properties

To accommodate scenarios where certain properties are missing, the guide introduces a null checker condition. This ensures that if a building lacks a specific property, its color defaults to white.

javascript

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({

color: {

conditions: [

["${material} === null", "color('white')"],

["${material} === 'glass'", "color('skyblue', 0.5)"],

["${material} === 'concrete'", "color('grey')"],

// Additional conditions...

["true", "color('white')"],

],

},

});

Conclusion

Styling and filtering 3D Tiles with CesiumJS provide developers with the tools to create visually compelling and context-rich visualizations. By following this comprehensive guide, you'll gain a deeper understanding of the 3D Tiles styling language and be equipped to enhance your 3D mapping projects with customized and informative styles.