The main class for styling mesh data is MeshStyle
MeshStyle
MeshStyle
.
You can use it to define several expressions to visualize, filter, and change your dataset:
-
colorExpression
: use an expression to choose the color of your mesh. You can also use the color encoded in your dataset by usingStyleExpressionFactory::defaultColor
. A color expression overrides any texture color in the dataset. -
visibilityExpression
: use an expression to make meshes partly visible or invisible based on available attributes and parameters. -
displacementExpression
: use an expression to partly displace meshes based on available attributes and parameters.
Benefits of style expressions
Style expressions are expressive and powerful tools to style your data. Using the StyleExpressionFactory
StyleExpressionFactory
StyleExpressionFactory
, you can create a variety of expressions, from basic constant expressions to expressions that combine other expressions.
By combining expressions, you can tune the result exactly to your liking.
Using style expressions
You can create various expressions with the StyleExpressionFactory
StyleExpressionFactory
StyleExpressionFactory
, from basic constant expressions to expressions that combine other expressions.
Using basic expressions
These are basic style expressions you can make use of:
-
Constant expressions: always evaluate to the given value.
-
Attribute expressions: evaluate to the value of a particular property of your data, referenced by the property name. You must make sure that the attribute or property that you’re referencing actually exists in your data set. You can then specifyspecifyspecify the ones that you’re using in your style expression when you’re building your 3D tiles layer.
To discover which attributes you can use, see the reference documentation for the model decoder of the format you’re working with. For example:
auto minParameter = Expr::constant(95.0);
auto maxParameter = Expr::constant(115.0);
auto height = Expr::doubleAttribute("Height");
var minParameter = Constant(95.0);
var maxParameter = Constant(115.0);
var height = DoubleAttribute("Height");
val minParameter = StyleExpressionFactory.constant(95.0)
val maxParameter = StyleExpressionFactory.constant(115.0)
val height = StyleExpressionFactory.doubleAttribute("Height")
Using parameter expressions for dynamic values
Sometimes, the value of an expression depends on a value that changes dynamically during the lifetime of a layer. You want to make the styling dynamically adjustable through a UI, for example. You could create a new expression to reflect the new result every time the value changes. An easier option with better performance is using a parameter expression.
To use a parameter expression for a dynamic value:
-
Wrap the value into an
Observable
Observable
Observable
object. -
Create an expression using
StyleExpressionFactory::parameter
StyleExpressionFactory::parameter
StyleExpressionFactory::parameter
with the observable.
As a result, any change made to theObservable
Observable
Observable
through itssetValue
setValue
setValue
method is reflected in the expression.
StyleExpression<double> createPointSizePixelsExpression() {
// Creates an expression that allows you to change its value at runtime by using a parameter expression
return Expr::parameter(TileSet3DLayerFactory::getPointSizePixelsObservable());
}
const std::shared_ptr<Observable<double>>& TileSet3DLayerFactory::getPointSizePixelsObservable() {
static std::shared_ptr<Observable<double>> pointSize = Observable<double>::create(2.0);
return pointSize;
}
public static readonly Observable<double> PointSizePixelsObservable = Observable<double>.Create(2.0);
private static StyleExpression<double> CreatePointSizePixelsExpression()
{
// Creates an expression that allows you to change its value at runtime by using a parameter expression
return Parameter(PointSizePixelsObservable);
}
val pointSizePixelsExpression: StyleExpression<Double> by lazy { createPointSizePixelsExpression() }
private fun createPointSizePixelsExpression(): StyleExpression<Double> {
// Creates an expression that allows you to change its value at runtime by using a parameter expression
return StyleExpressionFactory.parameter(pointSizePixelsObservable)
}
Combining expressions
You can use various functions to combine style expressions into a new expression. Each function accepts a combination of style expression types and results in a specific type of style expression. For these combined expressions, you can use common functions such as arithmetic, boolean, and comparison operators, as well as conditional operations.
This code snippet demonstrates how to create the intensity-based gradient styling in the OGC 3D Tiles sample:
StyleExpression<Color> createIntensityColorExpression() {
auto minParameter = Expr::constant(0.0);
auto maxParameter = Expr::constant(65535.0);
auto minIntensityColor = Expr::constant(Color{0, 0, 80});
auto maxIntensityColor = Expr::constant(Color::white());
auto intensity = Expr::doubleAttribute("Intensity");
auto intensityFraction = Expr::fraction(std::move(intensity), std::move(minParameter), std::move(maxParameter));
std::vector<StyleExpression<Color>> colorExpressions{minIntensityColor, maxIntensityColor};
return Expr::mixMap(std::move(intensityFraction), std::move(colorExpressions));
};
private static StyleExpression<Color> CreateIntensityColorExpression()
{
var minParameter = Constant(0.0);
var maxParameter = Constant(65535.0);
var minIntensityColor = Constant(Color.FromArgb(255, 0, 0, 80));
var maxIntensityColor = Constant(Color.White);
var intensityFraction = Fraction(DoubleAttribute("Intensity"), minParameter, maxParameter);
return MixMap(intensityFraction, new List<StyleExpression<Color>> { minIntensityColor, maxIntensityColor });
}
private fun createIntensityColorExpression(): StyleExpression<Color> {
val minParameter = StyleExpressionFactory.constant(0.0)
val maxParameter = StyleExpressionFactory.constant(65535.0)
val minIntensityColor =
StyleExpressionFactory.constant(Color.valueOf(Color.rgb(0, 0, 80)))
val maxIntensityColor = StyleExpressionFactory.constant(Color.valueOf(Color.WHITE))
val intensity = StyleExpressionFactory.doubleAttribute("Intensity")
val intensityFraction =
StyleExpressionFactory.fraction(intensity, minParameter, maxParameter)
val colorExpressions = listOf(minIntensityColor, maxIntensityColor)
return StyleExpressionFactory.mixMap(intensityFraction, colorExpressions)
}
This example illustrates how to use expressions to filter out points between two height values:
StyleExpression<bool> createVisibilityExpression() {
auto minHeight = TileSet3DLayerFactory::getMinVisibleHeightObservable();
auto maxHeight = TileSet3DLayerFactory::getMaxVisibleHeightObservable();
auto minParam = Expr::parameter(minHeight);
auto maxParam = Expr::parameter(maxHeight);
return Expr::between(std::move(minParam), std::move(maxParam), Expr::doubleAttribute("Height"));
}
private static StyleExpression<bool> CreateVisibilityExpression()
{
// Creates an expression that makes points invisible when they are above the height in MaximumHeightObservable
var maxHeight = Parameter(MaxVisibleHeightObservable);
return Gt(maxHeight, DoubleAttribute("Height"));
}
private fun createHeightFilterExpression(): StyleExpression<Boolean> {
val minParam = StyleExpressionFactory.parameter(minVisibleHeightObservable)
val maxParam = StyleExpressionFactory.parameter(maxVisibleHeightObservable)
return StyleExpressionFactory.between(
minParam,
maxParam,
StyleExpressionFactory.doubleAttribute("Height")
)
}
If your expression results in transparent colors, see Transparent colors how to enable transparency support. |