カスタムレイヤーのスタイル式リファレンス
スタイル式は、スタイルルールをフィルタリングおよび設定するためにスタイル内で使用されます。
スタイル式は JSON では array として表されますが、最初の引数は式 name であり、残りのエントリーは式引数です。
[name, argument1, ...argumentN]
式引数は、値タイプまたは式のいずれかになります。
値タイプ
null
null タイプは特殊なタイプで、値は 1 つ (null) のみです。
Example: null
boolean
boolean タイプは true または false の値のみを保持できます 。
Example: true
number
number タイプには実数を格納します。
Example: -23.5
Example: 4
color
color タイプにはレンダリング可能な色を格納します。color 値は、数値のベクターまたは文字列として表すことができます。
ベクターでサポートされている要素数は、3 ([r,g,b]) または 4 ([r,g,b,a]) で、範囲は [0, 1] です。
サポートされている文字列形式は次のとおりです。
- 16 進形式の「#rgb」、「#rgba」、「#rrggbb」、「#rrggbbaa」。r、g、b、a の範囲は [0-9, a-f] です。
- CSS カラー関数の「rgb(r,g,b)」、「rgba(r,g,b,a)」、「hsl(h,s,l)」、「hsla(h,s,l,a)」。r、g、b の範囲は [0, 255]、a、s、l の範囲は [0, 1]、h の範囲は [0,360] です。範囲外の値は範囲境界値に固定されます。
Example: "#00ff7f" -> Color(0, 255, 127, 255) (SpringGreen)
Example: "#f0f" -> Color(255, 0, 255, 255) (Magenta)
Example: "rgba(255, 99, 71, 44)" -> Color(255, 99, 71, 44) (Tomato with alpha 44)
string
string タイプは文字のシーケンスを格納します。
Example: "string_theory"
vector2d
vector2d タイプは numbers の 2 次元ベクターを格納します。vector2d 値を作成するには、make-vector 式を使用します。
Example: ["make-vector", 10, 20] // returns [10, 20]
vector3d
vector3d タイプは numbers の 3 次元ベクターを格納します。vector3d 値を作成するには、make-vector 式を使用します。
Example: ["make-vector", 4.5, 5.5, 6.7] // returns [4.5, 5.5, 6.7]
vector4d
vector4d タイプは numbers の 4 次元ベクターを格納します。vector4d 値を作成するには、make-vector 式を使用します。
Example: ["make-vector", -2, 4, 90, -234] // return [-2, 4, 90, -234]
array
array タイプは値タイプの配列を格納します。array 値を作成するには、literal 式を使用します。
Example: ["literal", [1, 2] ] // returns an aray of real numbers.
Example: ["literal", [1, "2", 3] ] // returns an array of numbers and strings
dictionary
dictionary タイプはキー/値のペアを格納します。辞書は、get および has 式を使用してクエリできます。
dictionary 値を作成するには、literal 式を使用します。
Example: ["literal", {"a": 1, "b": 2}]
注式の引数が複数の値タイプになる可能性がある場合は、その引数に
valueを使用します。
ref
値として評価できる値定義または式定義を参照します。定義が見つからない場合は null を返します。
["ref", string]
例：
"definitions" : {
"my_definition_1": 4,
"my_definition_2": true,
"my definiton_3": ["+", 1, 2]
}
["ref", "my_definition_1"] // returns 4
["ref", "my_definition_2"] // returns true
["ref", "my_definition_3"] // returns 3
["ref", "my_definition_4"] // returns null, the definition cannot be found.
get
現在の feature または dictionary のプロパティ値を取得します。プロパティが存在しない場合は null を返します。feature によって、道路やポリゴンなどのスタイル設定可能なマップ項目がわかります。
["get", name] // `name` can be an expression, but that disables optimization and evaluation will be much slower.
["get", name, dictionary]
例：
get 式の使用法を説明するために、レンダリングされたマップに「Roads」というレイヤーが含まれている場合を考えてみましょう。
レイヤー内の各フィーチャー (道路など) には、メートル単位で表されるプロパティ「road_width」が含まれます。
スタイル内の各フィーチャーの「road_width」プロパティを使用できるのが理想です。そのためには、
get 式を使用します。以下のスタイルでは、スタイル属性「width」を「road_width」プロパティの値に設定しています。このようにスタイル設定した各線の幅は
「road_width」プロパティで定義された幅になります。
{
"styles": [
{
"layer": "Roads",
"technique": "line",
"attr": {
"width": ["get", "road_width"] // returns the width in meter of the current road
}
}
]
}
次の例では、literal は 2 つのキー「a」と「b」を持つ dictionary を返します。get 式はキー「a」の値を返します。
["get", "a", ["literal", {"a": 1, "b": 2}]] // returns 1
has
現在の feature または指定した dictionary に指定されたプロパティがあるかどうかを示す boolean を返します。feature によって、道路やポリゴンなどのスタイル設定可能なマップ項目がわかります。
["has", name] // `name` can be an expression, but that disables optimization and evaluation will be much slower.
["has", name, dictionary]
例：
has 式の使用法を説明するために、レンダリングされたマップに「Roads」というレイヤーが含まれている場合をもう一度考えてみましょう。
ただし、今回はレイヤー内のすべての機能にメートル単位で表されるプロパティ「road_width」が含まれているわけではありません。含まれているものもあれば、含まれていないものもあります。
スタイル内の各機能の「road_width」プロパティを使用するのが理想ですが、「road_width」プロパティを持たない機能に対して何ができるでしょうか。
この場合、どの機能に「road_width」があり、どの機能にないかを確認するために has 式を使用します。「road_width」が含まれていないものについては、線のデフォルトの幅を設定します。
{
"styles": [
{
"layer": "Roads",
"technique": "line",
"attr": {
"width": [ "case"
["has", "road_width"], // returns true if the current road has "road_width" property
["get", "road_width"], // if the current road has "road_width" property, we set line width to "road_width" value
10 ] // else we set the line width to 10 meters
}
}
]
}
次の例では、literal は 2 つのキー「a」と「b」を持つ dictionary を返します。has 式は true を返します。
["has", "a", ["literal", {"a": 1, "b": 2}]] // returns true
!has
現在の feature または指定した dictionary に指定されたプロパティがないかどうかを示す boolean を返します。feature によって、道路やポリゴンなどのスタイル設定可能なマップ項目がわかります。
["!has", name]
["!has", name, dictionary]
!has 式は has 式の否定に相当します。
["!has", name] /* is same as */ ["!", ["has", name]]
["!has", name, dictionary] /* is same as */ ["!", ["has", name, object]]
inside-range
input がいずれかの範囲内にある場合は true を返し、input がいずれの範囲内にもない場合は false を返し、
input または範囲が無効または空の場合は「null」を返します。
範囲は奇数の位置から始まる連続する 2 つの値で範囲を定義して (range*StartMin - range*End) 値のリストとして指定することも、
値のリストを評価するサブ式を通じて指定することもできます。
リストには、2 以上の偶数の値が含まれている必要があります。
各範囲は開始と終了を含みます ([range*Start, range*End))。
["inside-range", input,
range1Start, range1End,
...
rangeNStart, rangeNEnd
]
["inside-range", input,
["literal", [range1Start, range1End, ... rangeNStart, rangeNEnd]]
]
例
["zoom"] returns 8.5
["inside-range", ["zoom"], 8.0, 9.0, 19.0, 20.0] // returns true
["inside-range", ["zoom"], 6.0, 7.0, 20.0, 21.0] // returns false
["inside-range", ["zoom"], 8.0, 9.0, 19.0] // returns null and logs "Inside-range function expects 2 or an even number of range arguments."
["inside-range", ["zoom"]] // returns null and logs "Inside-range function expects at least 2 arguments."
["inside-range"] // returns null and logs "Inside-range function expects at least 2 arguments."
["inside-range", ["zoom"], ["literal", [8.0, 9.0, 19.0, 20.0]]] // returns true
["inside-range", ["zoom"], ["literal", [6.0, 7.0, 20.0, 21.0]]] // returns false
zoom
現在のzoomレベルを取得します。
["zoom"]
all
すべてのサブ式が true と評価される場合、true を返します。
["all", expression...] // boolean
例：
"definitions" : {
"my_condition_1": true,
"my_condition_2": false,
"my_condition_3": true
}
["all",
["ref", "my_condition_1"],
["ref", "my_condition_2"],
["ref", "my_condition_3"]
] // returns false since my_condition_2 is false
any
いずれかのサブ式が true と評価される場合、true を返します。
["any", expression...] // boolean
例：
"definitions" : {
"my_condition_1": true,
"my_condition_2": false,
"my_condition_3": true
}
["any",
["ref", "my_condition_1"],
["ref", "my_condition_2"],
["ref", "my_condition_3"]
] // returns true since my_condition_1 is true
none
サブ式が true と評価されない場合、true を返します。
["none", expression...]
例：
"definitions" : {
"my_condition_1": true,
"my_condition_2": false,
"my_condition_3": true
}
["none",
["ref", "my_condition_1"],
["ref", "my_condition_2"],
["ref", "my_condition_3"]
] // returns false since my_condition_1 is true
match
value をラベルと比較し、最初に一致した result を返します。
value がどのラベルとも一致しない場合は、fallback が返されます。value。
number、string、またはそれらの array である必要があります。value と label のタイプが異なる場合は、fallback が返されます。
["match",
value,
label1, result1,
...
labelN, resultN,
fallback
]
例：
"definitions" : {
"my_value": 10
}
["match",
["ref", "my_value"],
20,
"Value is 20", // result 1
10,
"Value is 10", // result 2
"No match was found" // fallback value
] // returns "Value is 10"
case
条件を順番に評価し、条件が true に評価される最初の結果を返します。
true と評価される条件がない場合は fallback が返されます。
["case",
condition1, result1,
...
conditionN, resultN,
fallback
]
例：
"definitions" : {
"my_condition_1": false,
"my_condition_2": false,
"my_condition_3": true
}
["case",
["ref", "my_condition_1"],
10,
["ref", "my_condition_2"],
20,
["ref", "my_condition_3"],
40,
80 // fallback value
] // returns 40 since my_condition_3 is true
==
値が等しい場合は true が返されます。サポートされるタイプは boolean、number、string、vector2d、vector3d、vector4d、array、dictionary です。
["==", value, value]
!=
値が等しくない場合は true が返されます。サポートされるタイプは boolean、number、string、vector2d、vector3d、vector4d、array、dictionary です。
["!=", value, value]
<
最初の値が 2 つ目の値より小さい場合は true が返されます。サポートされるタイプは boolean、number、string です。
["<", value, value]
>
最初の値が 2 つ目の値より大きい場合は true が返されます。サポートされるタイプは boolean、number、string です。
[">", value, value]
<=
最初の値が 2 つ目の値以下の場合は true が返されます。サポートされるタイプは boolean、number、string です。
["<=", value, value]
>=
最初の値が2つ目の値以上の場合はtrueが返されます。サポートされるタイプはboolean、number、stringです。
[">=", value, value]
rgb
RGB コンポーネントから color を作成します。コンポーネントは、0 ～ 255 の整数である必要があります。範囲外の値は範囲境界値に固定されます。
["rgb", number, number, number]
例
["rgb", 1, 2, 3] // returns Color(1, 2, 3, 255)
rgba
RGBA コンポーネントから color を作成します。r、g、b コンポーネントは範囲 [0, 255] 内の整数である必要があります。a コンポーネントは範囲 [0, 1] 内である必要があります。範囲外の値は範囲境界値に固定されます。
["rgba", number, number, number, number]
例
["rgba", 1, 2, 3, 4] // returns Color(1, 2, 3, 4)
hsl
HSL コンポーネントから color を作成します。
- 0 ～ 360 度までの色相値
- 0 ～ 1 の彩度値
- 0 ～ 1 の明度値
["hsl", number, number, number]
例
["hsl", 180, 0.5, 0.5] // returns Color(64, 191, 191, 250)
hsla
HSLA コンポーネントから color を作成します。
- 0 ～ 360 度までの色相値
- 0 ～ 1 の彩度値
- 0 ～ 1 の明度値
- 0 ～ 1 のアルファ値
["hsla", number, number, number, number]
例
["hsla", 180, 0.5, 0.5, 0.5] // returns Color(64, 191, 191, 128)
literal
json_document で指定された dictionary または array を返します。
["literal", json_document]
例：
["literal", {"a": 1, "b": 2}] // returns a dictionry with keys "a" and "b"
["literal", [1, 2, 3]] // returns an array
make-vector
数値から 2 次元、3 次元、または 4 次元のベクトルを構築します。
["make-vector", number, number]
["make-vector", number, number, number]
["make-vector", number, number, number, number]
例：
["make-vector", 10, 20] // returns [10, 20]
["make-vector", 4.5, 5.5, 6.7] // returns [4.5, 5.5, 6.7]
["make-vector", -2, 4, 90, -234] // return [-2, 4, 90, -234]
["make-vector", 10, "20"] // returns null, does not support strings
!
値が true に変換できる場合は false を返します。それ以外の場合は true を返します。サポートされている値のタイプは boolean、number、color、string、vector2d、vector3d、vector4d、gradient、array、dictionary です。
["!", value]
to-color
string を color に変換します。
["to-color", string]
例：
["to-color", ["+", "#", "01020304"]] // returns Color(1, 2, 3, 4)
["to-color", ["get", "line_color"]] // if ["get", "line_color"] returns a string #01020304 then to-color will return Color(1, 2, 3, 4)
["to-color", "#01020304"] // returns Color(1, 2, 3, 4) but this conversion is not necessary since the style evaluator recognizes automatically "#01020304" as color
pixel-world-scale
- 可視性：公開
画面ピクセル数をワールド単位 (メートル) に変換します。
["pixel-world-scale", number]
例
ユーザーが幅 10 画面ピクセルのポリラインをレンダリングする場合を考えてみましょう。ラインテクニックの幅属性にはメートルが必要であることを踏まえると、幅10ピクセルのポリラインをレンダリングする最も簡単な方法は、pixel-world-scale を使用することです。
{
"styles": [
{
"layer": "MyRoads",
"technique": "line",
"attr": {
"width": ["pixel-world-scale", 10.0] // returns the width in meter that is equivalent to 10 screen pixels. The line will be rendered with a width of 10 screen pixels
}
}
]
}
補間
別の停止変数に基づいて、指定された値の補間を作成します。
使用可能な補間タイプは linear、step、cubic-bezier、exponential です。
["interpolate", ["linear"], ["zoom"],
stop1, value1,
...
stopN, valueN,
]
["interpolate", ["step"], ["zoom"],
stop1, value1,
...
stopN, valueN,
]
["interpolate", ["cubic-bezier", x1, y1, x2, y2], ["zoom"],
stop1, value1,
...
stopN, valueN,
]
["interpolate", ["exponential", base], ["zoom"],
stop1, value1,
...
stopN, valueN,
]
例
["zoom"] returns 9
["interpolate", ["linear"], ["zoom"], 8, 20, 10, 40] // returns 30
数学演算子
["-", value, value]
["/", value, value]
["%", number, number]
["+", value, value]
["*", value, value]
"+" supported operands:
["+", boolean, boolean] // returns the OR of the two operands
["+", number, number]
["+", string, string] // returns the concatenated string
["+", vector2d, vector2d] // component-wise addition
["+", vector3d, vector3d] // component-wise addition
["+", vector3d, vector3d] // component-wise addition
["+", color, color] // returns the sum of the colors. The values are clamped to uint8
"-" supported operands:
["-", number, number]
["-", vector2d, vector2d] // component-wise subtraction
["-", vector3d, vector3d] // component-wise subtraction
["-", vector3d, vector3d] // component-wise subtraction
["-", color, color] // returns the difference of the colors. The values are clamped to uint8
"*" supported operands:
["*", boolean, boolean] // returns the AND of the two operands
["*", number, number]
["*", color, color] // component-wise multipication. Each color channel is interpreted as a value between 0 and 1 (128-> 0.5). Each channel values are multiplied and converted bach to uint8.
["*", color, number] // returns Color(color.r * number, color.g * number, color.b * number, color.a * number)
["*", number, color] // returns Color(color.r * number, color.g * number, color.b * number, color.a * number)
["*", vector2d, vector2d] // component-wise multiplication
["*", vector2d, number] // returns (vector2d.x * number, vector2d.y * number)
["*", number, vector2d] // returns (vector2d.x * number, vector2d.y * number)
["*", vector3d, vector3d] // component-wise multiplication
["*", vector3d, number] // returns (vector3d.x * number, vector3d.y * number, vector3d.z * number)
["*", number, vector3d] // returns (vector3d.x * number, vector3d.y * number, vector3d.z * number)
["*", vector4d, vector4d] // component-wise multiplication
["*", vector4d, number] // returns (vector4d.x * number, vector4d.y * number, vector4d.z * number, vector4d.z * number)
["*", number, vector4d] // returns (vector4d.x * number, vector4d.y * number, vector4d.z * number, vector4d.z * number)
"/" supported operands:
["/", number, number]
["/", vector2d, vector2d] // component-wise division
["/", vector3d, vector3d] // component-wise division
["/", vector4d, vector4d] // component-wise division
7 日前の更新