3D Tiles样式数据格式标准规范

导航


官网文档


概述

3D Tiles 样式为 tileset 要素提供了简洁的声明式样式。样式通常基于存储在图块的批处理表(Batch Table)中的特征属性来定义表达式,以评定要素的显示表达,例如 color(RGB 和半透明)和 show 属性。

样式可以应用于不包含要素的图块,在这种情况下,图块被视为没有属性的隐式单个要素。

尽管可以为数据集创建样式并参考数据集的属性,但是样式独立于数据集,因此任何样式都可以应用于任何数据集。

样式使用 JSON 定义,并使用一部分 JavaScript 的表达式进行了增强扩展。此外,样式语言提供了一组内置函数来支持常见的数学运算。

以下示例根据建筑物高度分配颜色。

{
  "show": "${Area} > 0",
  "color": {
    "conditions": [
      ["${Height} < 60", "color('#13293D')"],
      ["${Height} < 120", "color('#1B98E0')"],
      ["true", "color('#E8F1F2', 0.5)"]
    ]
  }
}


概念

要素样式

用于要素样式的视觉属性是 show 属性,该属性的赋值表达式将评估为确定要素是否可见的布尔值,而 color 属性的赋值表达式将赋值为一个 Color 对象(RGB 和半透明)的属性来确定要素显示的颜色。

以下样式将默认的显示和颜色属性分配给每个要素:

{
  "show": "true",
  "color": "color('#ffffff')"
}

show可以依赖于要素属性的表达式进行显示,而不是显示所有要素,例如,以下表达式将仅显示 zip code 为 19341 的要素:

{
  "show": "${ZipCode} === '19341'"
}

show也可以用于更复杂的查询;例如,此处使用复合条件和正则表达式来仅显示County'Chest'开始,且其YearBuilt大于或等于 1970 的要素:

{
  "show": "(regExp('^Chest').test(${County})) && (${YearBuilt} >= 1970)"
}

颜色也可以通过要素属性的表达式来定义。例如,以下表达式为温度高于 90 的特征为红色,其余为白色:

{
  "color": "(${Temperature} > 90) ? color('red') : color('white')"
}

颜色的 Alpha 部分定义了要素的不透明度。例如,以下内容根据要素的属性设置要素的 RGB 颜色部分,并使体积大于 100 的要素透明:

{
  "color": "rgba(${red}, ${green}, ${blue}, (${volume} > 100 ? 0.5 : 1.0))"
}

条件表达式(Conditions)

除了包含表达式的字符串外,colorshow可以定义一系列条件的数组(类似于if...else语句)。例如,可以使用条件制作具有任何类型的包含/排除间隔的颜色图和颜色渐变。

例如,以下表达式将 ID 属性映射到颜色。按条件顺序求值,因此如果${id}不是'1''2',则"true"条件返回白色。如果不满足任何条件,则要是的颜色将为undefined

{
  "color": {
    "conditions": [
      ["${id} === '1'", "color('#FF0000')"],
      ["${id} === '2'", "color('#00FF00')"],
      ["true", "color('#FFFFFF')"]
    ]
  }
}

下一个示例显示如何使用条件使用包含下限值和上限值的间隔来创建色带:

"color" : {
  "conditions" : [
    ["(${Height} >= 1.0)  && (${Height} < 10.0)", "color('#FF00FF')"],
    ["(${Height} >= 10.0) && (${Height} < 30.0)", "color('#FF0000')"],
    ["(${Height} >= 30.0) && (${Height} < 50.0)", "color('#FFFF00')"],
    ["(${Height} >= 50.0) && (${Height} < 70.0)", "color('#00FF00')"],
    ["(${Height} >= 70.0) && (${Height} < 100.0)", "color('#00FFFF')"],
    ["(${Height} >= 100.0)", "color('#0000FF')"]
  ]
}

由于条件是按顺序判断的,因此以上内容可以写得更简洁:

"color" : {
  "conditions" : [
    ["(${Height} >= 100.0)", "color('#0000FF')"],
    ["(${Height} >= 70.0)", "color('#00FFFF')"],
    ["(${Height} >= 50.0)", "color('#00FF00')"],
    ["(${Height} >= 30.0)", "color('#FFFF00')"],
    ["(${Height} >= 10.0)", "color('#FF0000')"],
    ["(${Height} >= 1.0)", "color('#FF00FF')"]
  ]
}

定义变量

常用的表达式可以以defines变量名作为键存储在对象中。如果变量引用了已定义表达式的名称,则将其替换为所引用的求值表达式的结果:

{
  "defines": {
    "NewHeight": "clamp((${Height} - 0.5) / 2.0, 1.0, 255.0)",
    "HeightColor": "rgb(${Height}, ${Height}, ${Height})"
  },
  "color": {
    "conditions": [
      ["(${NewHeight} >= 100.0)", "color('#0000FF') * ${HeightColor}"],
      ["(${NewHeight} >= 50.0)", "color('#00FF00') * ${HeightColor}"],
      ["(${NewHeight} >= 1.0)", "color('#FF0000') * ${HeightColor}"]
    ]
  },
  "show": "${NewHeight} < 200.0"
}

定义表达式不能引用其他定义。但是,它可能引用具有相同名称的要素属性。在下面的样式中,高度为 150 的要素将获得红色:

{
  "defines": {
    "Height": "${Height}/2.0}"
  },
  "color": {
    "conditions": [
      ["(${Height} >= 100.0)", "color('#0000FF')"],
      ["(${Height} >= 1.0)", "color('#FF0000')"]
    ]
  }
}

元属性

可以使用meta属性定义要素的非可视属性。例如,以下设置元属性的一个description为包含要素名称的字符串:

{
  "meta": {
    "description": "'Hello, ${featureName}.'"
  }
}

元属性表达式可以求值为任何类型。例如:

{
  "meta": {
    "featureColor": "rgb(${red}, ${green}, ${blue})",
    "featureVolume": "${height} * ${width} * ${depth}"
  }
}

表达式

表达式语言是 JavaScript(EMCAScript 5)的一小部分,外加本机向量和正则表达式类型,并以只读变量的形式访问 tileset 要素属性。

注意: CesiumJS 使用jsep JavaScript 表达式解析器库将样式表达式解析为抽象语法树(AST)

语法

点号用于按名称访问属性,例如building.name

括号([])也用于访问属性,例如building['name'],或数组,例如temperatures[1]

函数用括号(())调用,逗号分隔参数,例如(isNaN(0.0)color('cyan', 0.5))。


运算符

支持以下运算符,其语义和优先级与 JavaScript 相同。

  • 一元运算符:+, -, !

    • 不支持: ~
  • 二元运算符:||, &&, ===, !==, <, >, <=, >=, +, -, *, /, %, =~, !~

    • 不支持:|^&<<>>,和>>>
  • 三元运算符: ? :

()同样也支持对表达式进行分组以提高清晰度和优先级。

逻辑运算符||&&实现短路;true || expression不评估右侧的表达式,false && expression也不评估右侧的表达式。

同样,true ? leftExpression : rightExpression仅执行左侧表达式,并且false ? leftExpression : rightExpression仅执行右侧表达式。


数据类型

支持以下类型:

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Array
  • vec2
  • vec3
  • vec4
  • RegExp

vec2vec3vec4RegExp外的所有类型,具有 JavaScript 相同的语法和运行时行为。 vec2vec3vec4是从 GLSL 向量派生的,类似于 JavaScript Object(请参见vec)。颜色从CSS3颜色派生并实现为vec4RegExp从 JavaScript 派生并在RegExp描述。

各个类型的示例包括以下内容:

  • true, false
  • null
  • undefined
  • 1.0, NaN, Infinity
  • 'Cesium', "Cesium"
  • [0, 1, 2]
  • vec2(1.0, 2.0)
  • vec3(1.0, 2.0, 3.0)
  • vec4(1.0, 2.0, 3.0, 4.0)
  • color('#00FFFF')
  • regExp('^Chest'))

Number

和 JavaScript 中一样,数字可以是NaNInfinity。支持以下检测方法:

  • isNaN(testValue : Number) : Boolean
  • isFinite(testValue : Number) : Boolean

String

字符串以 UTF-8 编码。

向量

样式语言包括 2,2,3 和 4 维数组浮点矢量类型:vec2vec3,和vec4。向量构造器与 GLSL 使用相同的规则:

vec2
  • vec2(xy : Number) - 用数字初始化每个组件
  • vec2(x : Number, y : Number) -用两个数字初始化
  • vec2(xy : vec2) - 用另一个 vec2初始化
  • vec2(xyz : vec3) - 删除 vec3的第三部分
  • vec2(xyzw : vec4) - 删除 vec4的第三、四部分
vec3
  • vec3(xyz : Number) -用数字初始化每个组件
  • vec3(x : Number, y : Number, z : Number) -用三个数字初始化
  • vec3(xyz : vec3) -用另一个 vec3初始化
  • vec3(xyzw : vec4) -删除 vec4的第四部分
  • vec3(xy : vec2, z : Number)-用vec2和数字初始化
  • vec3(x : Number, yz : vec2)-用vec2和数字初始化
vec4
  • vec4(xyzw : Number) -用数字初始化每个组件
  • vec4(x : Number, y : Number, z : Number, w : Number) -用四个数字初始化
  • vec4(xyzw : vec4) -用另一个 vec4初始化
  • vec4(xy : vec2, z : Number, w : Number)-用vec2和两个数字初始化
  • vec4(x : Number, yz : vec2, w : Number)-用vec2和两个数字初始化
  • vec4(x : Number, y : Number, zw : vec2)-用vec2和两个数字初始化
  • vec4(xyz : vec3, w : Number)-用vec3和数字初始化
  • vec4(x : Number, yzw : vec3)-用vec3和数字初始化
向量用法

vec2 组件可以通过以下方式访问

  • .x, .y
  • .r, .g
  • [0], [1]

vec3 组件可以通过以下方式访问

  • .x, .y, .z
  • .r, .g, .b
  • [0], [1], [2]

vec4 组件可以通过以下方式访问

  • .x, .y, .z, .w
  • .r, .g, .b, .a
  • [0], [1], [2], [3]

与 GLSL 不同,样式语言不支持滚动。例如,vec3(1.0).xy不支持。

向量支持以下一元运算符:-+

向量通过执行基于组件的运算来支持以下二元运算符:===!==+-*/,和%。例如vec4(1.0) === vec4(1.0)true,因为x,_y_,zw分量相等,就成立了。本质上是对vec2vec3vec4的运算符进行了重载。

vec2vec3vec4具有toString的方法,在显式(隐式)的变换为字符串,以'(x, y)''(x, y, z)''(x, y, z, w)'的格式。

  • toString() : String

vec2vec3vec4不暴露其他任何方法或prototype对象。

Color

颜色实现为vec4,并可以通过以下方法之一创建:

  • color()
  • color(keyword : String, [alpha : Number])
  • color(6-digit-hex : String, [alpha : Number])
  • color(3-digit-hex : String, [alpha : Number])
  • rgb(red : Number, green : Number, blue : Number)
  • rgba(red : Number, green : Number, blue : Number, alpha : Number)
  • hsl(hue : Number, saturation : Number, lightness : Number)
  • hsla(hue : Number, saturation : Number, lightness : Number, alpha : Number)

color()不带参数的调用与调用color('#FFFFFF')相同。

由大小写不敏感的关键字(例如'cyan')或十六进制 rgb 定义的颜色将作为字符串传递给color函数。例如:

  • color('cyan')
  • color('#00FFFF')
  • color('#0FF')

color函数有一个可选的第二参数,它是用于定义 alpha 部分的不透明度,其中0.0完全透明而1.0完全不透明。例如:

  • color('cyan', 0.5)

十进制 RGB 或 HSL 的颜色定义,以rgbhsl创建,如同 CSS 一样(特别地,百分比范围从0.01.0表示从0%100%)。例如:

  • rgb(100, 255, 190)
  • hsl(1.0, 0.6, 0.7)

rgb部分的范围从0255。对于hsl,色相、饱和度、亮度从0.01.0

rgbahsla具有第四个参数定义的颜色,它是用于定义不透明度的 alpha 分量,其中0.0完全透明且1.0完全不透明。例如:

  • rgba(100, 255, 190, 0.25)
  • hsla(1.0, 0.6, 0.7, 0.75)

颜色与vec4类型相同,并且具有相同的方法,运算符和组件访问器。颜色分量存储在范围0.01.0中。

例如:

  • color('red').xcolor('red').rcolor('red')[0]所有取值为1.0
  • color('red').toString() 结果为(1.0, 0.0, 0.0, 1.0)
  • color('red') * vec4(0.5) 相当于 vec4(0.5, 0.0, 0.0, 0.5)

RegExp

使用以下方法创建正则表达式,类似于 JavaScriptRegExp构造函数:

  • regExp()
  • regExp(pattern : String, [flags : String])

regExp()不带参数的调用与调用regExp('(?:)')相同。

如果指定,则flags可以具有以下值的任意组合:

  • g -全局匹配
  • i -忽略大小写
  • m -多行匹配
  • u -匹配 unicode
  • y-sticky 匹配

正则表达式支持以下方法:

  • test(string : String) : Boolean -测试指定的字符串是否匹配。
  • exec(string : String) : String-在指定的字符串中搜索匹配项。如果搜索成功,则返回已捕获的第一个实例String。如果搜索失败,则返回null

例如:

{
  "Name": "Building 1"
}
regExp('a').test('abc') === true
regExp('a(.)', 'i').exec('Abc') === 'b'
regExp('Building\s(\d)').exec(${Name}) === '1'

正则表达式具有toString方法显式(隐式)转换为'pattern'格式的字符串:

  • toString() : String

正则表达式不会暴露任何其他函数或prototype对象。

运算符=~!~对正则表达式进行了重载。=~运算符的行为匹配test方法,并测试匹配指定的字符串。它返回true找到一个,false找不到。!~=~的逆操作。返回true如果找不到匹配项,返回false找到匹配项。两个运算符都是可交换的。

例如,以下表达式求值均为 true:

regExp('a') =~ 'abc'
'abc' =~ regExp('a')

regExp('a') !~ 'bcd'
'bcd' !~ regExp('a')

运算规则

  • 一元运算符+-仅对数字和向量表达式进行运算。
  • 一元运算符!仅对布尔表达式进行运算。
  • 二元运算符<<=>,和>=仅对数字表达式进行操作。
  • 二元运算符||&&仅对布尔表达式进行运算。
  • 二元运算符+对以下表达式进行操作:
    • 数字表达式
    • 相同类型的向量表达式
    • 如果至少一个表达式是字符串,则另一个表达式将进行字符串转换之后转换为字符串,并且该操作将返回一个串联的字符串,例如,"name" + 10求值为"name10"
  • 二进制运算符-对以下表达式进行操作:
    • 数字表达式
    • 相同类型的向量表达式
  • 二进制运算符*对以下表达式进行操作:
    • 数字表达式
    • 相同类型的向量表达式
    • 数字表达式和矢量表达式的混合,例如3 * vec3(1.0)vec2(1.0) * 3
  • 二进制运算符/对以下表达式进行操作:
    • 数字表达式
    • 相同类型的向量表达式
    • 矢量表达式后跟数字表达式,例如vec3(1.0) / 3
  • 二进制运算符%对以下表达式进行操作:
    • 数字表达式
    • 相同类型的向量表达式
  • 二进制相等运算符===,可!==对任何表达式进行运算。false如果表达式类型不匹配,则操作返回。
  • 二进制regExp运算符=~!~要求一个参数是字符串表达式,另一个参数是RegExp表达式。
  • 三元运算符? :条件参数必须是布尔表达式。

类型转换

基本类型之间的转换使用BooleanNumberString方法来处理。

  • Boolean(value : Any) : Boolean
  • Number(value : Any) : Number
  • String(value : Any) : String

例如:

Boolean(1) === true
Number('1') === 1
String(1) === '1'

BooleanNumber遵循 JavaScript 约定。String遵循字符串转换

这些本质上是强制类型转换,而不是构造函数。

除非上面另有说明,否则样式语言不允许进行隐式类型转换。像vec3(1.0) === vec4(1.0)"5" < 6这样的表达式无效。


字符转换

vec2vec3vec4,和RegExp表达式转换为使用他们的字符串toString的方法。所有其他类型均遵循 JavaScript 规则。

  • true"true"
  • false"false"
  • null"null"
  • undefined"undefined"
  • 5.0"5"
  • NaN"NaN"
  • Infinity"Infinity"
  • "name""name"
  • [0, 1, 2]"[0, 1, 2]"
  • vec2(1, 2)"(1, 2)"
  • vec3(1, 2, 3)"(1, 2, 3)"
  • vec4(1, 2, 3, 4)"(1, 2, 3, 4)"
  • RegExp('a')"/a/"

常量

样式语言支持以下常量:

PI

数学常数 PI 为圆的周长除以其直径,约3.14159

{
     “ show ”:“ cos($ {Angle} + Math.PI)<0}

E

欧拉常数和自然对数的底数,约2.71828

{
     “ color ”:“ color()* pow(Math.E / 2.0,$ {Temperature})”
}

变量

变量用于检索图块集中各个要素的属性值。使用 ES 6(ECMAScript 2015)模板文字语法(如${feature.identifier}${feature['identifier']})标识变量,其中标识符是区分大小写的属性名称。变量名称以 UTF-8 编码。feature是隐式的,在大多数情况下可以省略。如果标识符包含非字母数字字符,例如:-#,或空格,则应当使用${feature['identifier']}形式。

可以在任何接受有效表达式的地方使用变量,但在其他变量标识符中除外。例如,不允许以下内容:

${foo[${bar}]}

如果要素没有具有指定名称的属性,则该变量的值为undefined。请注意,如果属性是为某个属性显式存储的,null则该属性也可能是null

变量可以是任何受支持的原生 JavaScript 类型:

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Array

例如:

{
    "enabled" : true,
    "description" : null,
    "order" : 1,
    "name" : "Feature name"
}
${enabled} === true
${description} === null
${order} === 1
${name} === 'Feature name'

此外,存储在批处理表(Batch Table)二进制文件中矢量属性的变量被视为矢量类型:

componentType variable type
"VEC2" vec2
"VEC3" vec3
"VEC4"

变量可用于构造颜色或向量。例如:

rgba(${red}, ${green}, ${blue}, ${alpha})
vec4(${temperature})

点或括号符号用于访问要素子属性。例如:

{
  "address.street": "Maple Street",
  "address": {
    "street": "Oak Street"
  }
}
${address.street} === `Example street`
${address['street']} === `Example street`

${address.city} === `Example city`
${address['city']} === `Example city`

括号表示法仅支持字符串文字。

可以显式使用feature关键字的括号表示法访问顶级属性。例如:

{
  "address.street": "Maple Street",
  "address": {
    "street": "Oak Street"
  }
}
${address.street} === `Oak Street`
${feature.address.street} === `Oak Street`
${feature['address'].street} === `Oak Street`
${feature['address.street']} === `Maple Street`

要访问名为feature的要素,请使用变量${feature}。这等效于访问${feature.feature}

{
  "feature": "building"
}
${feature} === `building`
${feature.feature} === `building`

也可以在用反引号定义的字符串内替换变量,例如:

{
  "order": 1,
  "name": "Feature name"
}
`Name is ${name}, order is ${order}`

括号符号用于访问要素子属性或数组。例如:

{
  "temperatures": {
    "scale": "fahrenheit",
    "values": [70, 80, 90]
  }
}
${temperatures['scale']} === 'fahrenheit'
${temperatures.values[0]} === 70
${temperatures['values'][0]} === 70 // Same as (temperatures[values])[0] and temperatures.values[0]

内置函数

许多内置函数都将标量或向量作为参数。对于向量参数,将按组件方式应用该函数,并返回结果向量。

abs

abs(x : Number) : Number
abs(x : vec2) : vec2
abs(x : vec3) : vec3
abs(x : vec4) : vec4

返回x的绝对值。

{
     "show" : "abs(${temperature}) > 20.0"
}

sqrt

sqrt(x : Number) : Number
sqrt(x : vec2) : vec2
sqrt(x : vec3) : vec3
sqrt(x : vec4) : vec4

x >= 0时,返回x的平方根。当x < 0时返回NaN

{
    "color" : {
        "conditions" : [
            ["${temperature} >= 0.5", "color('#00FFFF')"],
            ["${temperature} >= 0.0", "color('#FF00FF')"]
        ]
    }
}

cos

cos(angle : Number) : Number
cos(angle : vec2) : vec2
cos(angle : vec3) : vec3
cos(angle : vec4) : vec4

返回angle弧度的余弦值。

{
    "show" : "cos(${Angle}) > 0.0"
}

sin

sin(angle : Number) : Number
sin(angle : vec2) : vec2
sin(angle : vec3) : vec3
sin(angle : vec4) : vec4

返回angle弧度的正弦值。

{
    "show" : "sin(${Angle}) > 0.0"
}

tan

tan(angle : Number) : Number
tan(angle : vec2) : vec2
tan(angle : vec3) : vec3
tan(angle : vec4) : vec4

返回angle弧度的正切值。

{
    "show" : "tan(${Angle}) > 0.0"
}

acos

acos(angle : Number) : Number
acos(angle : vec2) : vec2
acos(angle : vec3) : vec3
acos(angle : vec4) : vec4

返回angle弧度的反余弦值。

{
    "show" : "acos(${Angle}) > 0.0"
}

asin

asin(angle : Number) : Number
asin(angle : vec2) : vec2
asin(angle : vec3) : vec3
asin(angle : vec4) : vec4

返回angle弧度的反正弦值。

{
    "show" : "asin(${Angle}) > 0.0"
}

atan

atan(angle : Number) : Number
atan(angle : vec2) : vec2
atan(angle : vec3) : vec3
atan(angle : vec4) : vec4

返回angle弧度的反正切值。

{
    "show" : "atan(${Angle}) > 0.0"
}

atan2

atan2(y : Number, x : Number) : Number
atan2(y : vec2, x : vec2) : vec2
atan2(y : vec3, x : vec3) : vec3
atan2(y : vec4, x : vec4) : vec4

返回yx商的反正切值。

{
    "show" : "atan2(${GridY}, ${GridX}) > 0.0"
}

radians

radians(angle : Number) : Number
radians(angle : vec2) : vec2
radians(angle : vec3) : vec3
radians(angle : vec4) : vec4

angle从度转换为弧度。

{
    "show" : "radians(${Angle}) > 0.5"
}

degrees

degrees(angle : Number) : Number
degrees(angle : vec2) : vec2
degrees(angle : vec3) : vec3
degrees(angle : vec4) : vec4

angle从弧度转换为度。

{
    "show" : "degrees(${Angle}) > 45.0"
}

sign

sign(x : Number) : Number
sign(x : vec2) : vec2
sign(x : vec3) : vec3
sign(x : vec4) : vec4

x正数时返回 1.0 ,当x零时返回 0.0 ,当x负数时返回-1.0 。

{
    "show" : "sign(${Temperature}) * sign(${Velocity}) === 1.0"
}

floor

floor(x : Number) : Number
floor(x : vec2) : vec2
floor(x : vec3) : vec3
floor(x : vec4) : vec4

返回小于或等于x的最接近的整数。

{
    "show" : "floor(${Position}) === 0"
}

ceil

ceil(x : Number) : Number
ceil(x : vec2) : vec2
ceil(x : vec3) : vec3
ceil(x : vec4) : vec4

返回大于或等于x的最接近的整数。

{
    "show" : "ceil(${Position}) === 1"
}

round

round(x : Number) : Number
round(x : vec2) : vec2
round(x : vec3) : vec3
round(x : vec4) : vec4

返回最接近x的整数。小数为 0.5 的数字将按实现定义的方向四舍五入。

{
    "show" : "round(${Position}) === 1"
}

exp

exp(x : Number) : Number
exp(x : vec2) : vec2
exp(x : vec3) : vec3
exp(x : vec4) : vec4

返回ex次幂,其中e欧拉常数,约为2.71828

{
    "show" : "exp(${Density}) > 1.0"
}

log

log(x : Number) : Number
log(x : vec2) : vec2
log(x : vec3) : vec3
log(x : vec4) : vec4

返回自然数为底(ex的对数。

{
    "show" : "log(${Density}) > 1.0"
}

exp2

exp2(x : Number) : Number
exp2(x : vec2) : vec2
exp2(x : vec3) : vec3
exp2(x : vec4) : vec4

返回 2 的x次幂。

{
    "show" : "exp2(${Density}) > 1.0"
}

log2

log2(x : Number) : Number
log2(x : vec2) : vec2
log2(x : vec3) : vec3
log2(x : vec4) : vec4

返回的以 2 为底x的对数。

{
    "show" : "log2(${Density}) > 1.0"
}

fract

fract(x : Number) : Number
fract(x : vec2) : vec2
fract(x : vec3) : vec3
fract(x : vec4) : vec4

返回x的小数部分。等同于x - floor(x)

{
    "color" : "color() * fract(${Density})"
}

pow

pow(base : Number, exponent : Number) : Number
pow(base : vec2, exponent : vec2) : vec2
pow(base : vec3, exponent : vec3) : vec3
pow(base : vec4, exponent : vec4) : vec4

返回基数baseexponent次幂。

{
    "show" : "pow(${Density}, ${Temperature}) > 1.0"
}

min

min(x : Number, y : Number) : Number
min(x : vec2, y : vec2) : vec2
min(x : vec3, y : vec3) : vec3
min(x : vec4, y : vec4) : vec4
min(x : Number, y : Number) : Number
min(x : vec2, y : Number) : vec2
min(x : vec3, y : Number) : vec3
min(x : vec4, y : Number) : vec4

返回xy中小的数。

{
    "show" : "min(${Width}, ${Height}) > 10.0"
}

max

max(x : Number, y : Number) : Number
max(x : vec2, y : vec2) : vec2
max(x : vec3, y : vec3) : vec3
max(x : vec4, y : vec4) : vec4
max(x : Number, y : Number) : Number
max(x : vec2, y : Number) : vec2
max(x : vec3, y : Number) : vec3
max(x : vec4, y : Number) : vec4

返回xy中大的数。

{
    "show" : "max(${Width}, ${Height}) > 10.0"
}

clamp

clamp(x : Number,  min : Number, max : Number) : Number
clamp(x : vec2,  min : vec2, max : vec2) : vec2
clamp(x : vec3,  min : vec3, max : vec3) : vec3
clamp(x : vec4,  min : vec4, max : vec4) : vec4
clamp(x : Number,  min : Number, max : Number) : Number
clamp(x : vec2,  min : Number, max : Number) : vec2
clamp(x : vec3,  min : Number, max : Number) : vec3
clamp(x : vec4,  min : Number, max : Number) : vec4

约束x位于min和之间max

{
    "color" : "color() * clamp(${temperature}, 0.1, 0.2)"
}

mix

mix(x : Number,  y : Number, a : Number) : Number
mix(x : vec2,  y : vec2, a : vec2) : vec2
mix(x : vec3,  y : vec3, a : vec3) : vec3
mix(x : vec4,  y : vec4, a : vec4) : vec4
mix(x : Number,  y : Number, a : Number) : Number
mix(x : vec2,  y : vec2, a : Number) : vec2
mix(x : vec3,  y : vec3, a : Number) : vec3
mix(x : vec4,  y : vec4, a : Number) : vec4

计算xy的线性内插。

{
    "show" : "mix(20.0, ${Angle}, 0.5) > 25.0"
}

length

length(x : Number) : Number
length(x : vec2) : vec2
length(x : vec3) : vec3
length(x : vec4) : vec4

计算向量的长度x,即分量平方之和的平方根。如果x是数字,则length返回x

{
    "show" : "length(${Dimensions}) > 10.0"
}

distance

distance(x : Number, y : Number) : Number
distance(x : vec2, y : vec2) : vec2
distance(x : vec3, y : vec3) : vec3
distance(x : vec4, y : vec4) : vec4

计算两个点之间的距离xy,即length(x - y)

{
    "show" : "distance(${BottomRight}, ${UpperLeft}) > 50.0"
}

normalize

normalize(x : Number) : Number
normalize(x : vec2) : vec2
normalize(x : vec3) : vec3
normalize(x : vec4) : vec4

返回长度为 1.0 的向量,该向量与x平行。当x为数字时,normalize返回 1.0。

{
    "show" : "normalize(${RightVector}, ${UpVector}) > 0.5"
}

dot

dot(x : Number, y : Number) : Number
dot(x : vec2, y : vec2) : vec2
dot(x : vec3, y : vec3) : vec3
dot(x : vec4, y : vec4) : vec4

计算xy的点积。

{
    "show" : "dot(${RightVector}, ${UpVector}) > 0.5"
}

cross

cross(x : vec3, y : vec3) : vec3

计算xy的叉积。该函数仅接受vec3参数。

{
    "color" : "vec4(cross(${RightVector}, ${UpVector}), 1.0)"
}

特殊说明

不支持注释。


点云

点云 (Point Cloud)数据集可以像其他要素一样设计样式。除了点的colorshow属性,点云的样式可以设置为pointSize,或每个像素点的大小。默认pointSize值为1.0

{
  "color": "color('red')",
  "pointSize": "${Temperature} * 0.5"
}

实现时,可以限制pointSize在系统支持的点大小范围内。例如,当POINTS渲染时,WebGL 渲染器可能会查询ALIASED_POINT_SIZE_RANGE以获取系统限制。pointSize1.0必须得到支持。

点云样式还可以引用点云要素表语法,包括位置,颜色和法线,以允许对源数据进行更灵活的样式设置。

  • ${POSITION}RTC_CENTER和平铺变换应用之前,以vec3存储 xyz 直角坐标系的点坐标。量化位置时,${POSITION}QUANTIZED_VOLUME_SCALE应用后,但QUANTIZED_VOLUME_OFFSET应用前指定位置。
  • ${POSITION_ABSOLUTE}RTC_CENTER和 tile 变换应用之后,以vec3存储 xyz 直角坐标系的点坐标。量化位置时,${POSITION_ABSOLUTE}QUANTIZED_VOLUME_SCALEQUANTIZED_VOLUME_OFFSET和瓦片变换应用后,指定位置。
  • ${COLOR}为该点存储Color的 rgba 颜色。当要素表的颜色语义为RGBRGB565时,${COLOR}.alpha1.0。如果未定义颜色语义,则${COLOR}求值为特定应用程序的默认颜色。
  • ${NORMAL}在应用 tile 变换之前,以vec3存储点的法线(以笛卡尔坐标表示)。当法线被八进制编码时,${NORMAL}引用解码后的法线。如果在要素表中未定义法线,则${NORMAL}的结果为undefined

例如:

{
  "color": "${COLOR} * color('red')'",
  "show": "${POSITION}.x > 0.5",
  "pointSize": "${NORMAL}.x > 0 ? 2 : 1"
}

实施注意:点云样式引擎可能经常使用着色器(GLSL)实现,但是在纯 GLSL 实现中,表达语言的某些功能是不可能的。其中一些功能包括:

  • isNaNisFinite(GLSL 2.0+支撑isnanisinf分别用于这些功能)
  • nullundefined类型
  • 字符串,包括访问对象属性(color()['r'])和批处理表值
  • 正则表达式
  • 长度不是 2、3 或 4 的数组
  • 类型比较不匹配(例如1.0 === false
  • 数组索引超出范围

文件扩展名和 MIME 类型

Tileset 样式使用.json扩展名和application/jsonmime 类型。


属性参考

样式

3D Tiles 样式

类型 描述 是否必需
defines object 表达式映射到变量名称键的字符串的字典对象,在整个样式中都可以引用该对象。如果表达式引用定义的变量,则将其替换为相应表达式的求值结果。
show booleanstringobject 布尔表达式多条件属性,它确定是否应该显示的特征。 否,默认值: true
color stringobject 颜色表达式多条件属性,它确定颜色混合与特征的固有颜色。 否,默认值: color('#FFFFFF')
meta object ,其确定所述特征的非可视属性的值的对象。

布尔表达式

具有 3D Tiles 样式表达式的布尔值或字符串,其值为布尔值。请参阅表达式


颜色表达式

3D Tiles 颜色样式的表达式。请参阅表达式


多条件

一系列条件按顺序求值,例如一系列 if … else 语句,这些表达式导致对表达式进行求值。

特性

类型 描述 是否必需
conditions array [] 一系列布尔条件按顺序求值。对于第一个计算结果为 true 的值,将计算并返回其值“结果”(也是一个表达式)。结果表达式必须全部为同一类型。如果没有条件得出的结果为 true,则结果为undefined。当条件为undefinednull或为空对象时,结果为undefined No

不允许使用其他属性。


条件

表达式作为条件为真的结果进行的评估。两个表达式的数组。如果对第一个表达式求值并且结果为true,则对第二个表达式求值并作为条件的结果返回。


表达式

有效的 3D Tiles 样式表达式。请参阅表达式


一系列属性名称和表达式用于评估该属性的值。

允许其他属性。


数字表达式

3D Tiles 样式表达式,其计算结果为数字。请参阅表达式


点云样式

具有点云附加属性的 3D Tiles 样式。

类型 描述 是否必须
defines object 表达式映射到变量名称键的字符串的字典对象,在整个样式中都可以引用该对象。如果表达式引用定义的变量,则将其替换为相应表达式的求值结果。 No
show boolean, string, object 布尔表达式多条件属性,它确定是否应该显示的特征。 No, default: true
color string, object 颜色表达式多条件属性,它确定颜色混合与特征的固有颜色。 No, default: color('#FFFFFF')
meta object ,其确定所述特征的非可视属性的值的对象。 No
pointSize number, string, object 数字表达式多条件属性,用于确定点的大小(以像素为单位)。 No, default: 1

不允许使用其他属性。



未完



版权声明:
除非注明,本博文章均为原创,转载请以链接形式标明本文地址。



   转载规则


《3D Tiles样式数据格式标准规范》 Jackie Tang(唐浩桀) 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
js任意string转随机颜色 js任意string转随机颜色
function hashCode(str) { // java String#hashCode var hash = 0 for (var i = 0; i < str.length; i++) { hash =
2021-06-01 Jackie Tang(唐浩桀)
下一篇 
3D Tiles批处理表(Batch Table)数据格式标准规范 3D Tiles批处理表(Batch Table)数据格式标准规范
导航 引 概述 文件结构 结构填充 JSON 头 二进制体 实例 属性参考 引官网文档 概述批处理表是瓦片二进制体的一个组成部分,包含瓦片中每个要素的应用程序特定属性。在运行时查询这些属性以声明样式和任何应用程序特定的用法,例如
  目录