Customize Styles¶

ベクトルタイルのスタイルをカスタマイズする方法について説明します。

スタイル¶

Mapray では、 Mapbox の style's layer 仕様に則って地図データを表示をカスタマイズすることができます。

ただし現在のところ、スタイルに指定できるレイヤーの type は symbol のみで、それ以外を type に設定しても、そのレイヤーは無視されます。

symbol レイヤー専用のプロパティで使用できるものは以下のものに限られ、それ以外のプロパティは設定しても無視されます。

layout.text-field
layout.text-size
layout.text-font
layout.text-anchor
layout.text-offset
paint.text-color
paint.text-opacity
paint.text-halo-color
paint.text-halo-width
layout.icon-image
layout.icon-size
layout.icon-anchor
layout.icon-offset
paint.icon-color
paint.icon-opacity
paint.icon-halo-color
paint.icon-halo-width

layout.text-field プロパティは文字列のみを指定することができ、formatted 型の値を指定することはできません。

シンボルの色変更サンプル¶

Mapray Cloud のデータを表示するサンプルのシンボルの色を変更してみます。

ソースコード36行目の style.json の icon-color を変更します。

"paint": {
    "icon-color": ["rgb", 255, 128, 255],
    :
}

実行結果¶

0.10.0

Note

Mapray Cloudからデータを取得する部分が若干煩雑になりますが、v0.9.6でも利用できます。v0.9.6を使ったVectorTilesサンプルを参考に実装をしてください。

filter サンプル¶

OpenFreeMap のデータを表示するサンプルの filter の定義を変更してみます。

ソースコード79行目の styleJson の filter を変更します。 place_city の symbol に対して、以下のように変更します。これにより、表示している zoom レベルに応じて表示する rank が切り替わるようになります。

"filter": [
    "all",
    [
        "match", [ "get", "class" ], [ "city", "suburb" ], true, false
        // (class === "city" || class === "suburb") ? true : false;
    ],
    [
        "any",  // ||
        [
            "all",  // &&
            [">=", ["zoom"], 8],
            ["<", ["zoom"], 9],
            ["<", ["get", "rank"], 9]
            // 8 <= zoom && 9 < zoom && rank < 9  ... (a)
        ],
        [
            "all",  // &&
            [">=", ["zoom"], 9],
            ["<", ["zoom"], 12],
            ["<", ["get", "rank"], 12]
            // 9 <= zoom && 12 < zoom && rank < 12  ... (b)
        ],
        [
            ">=", ["zoom"], 12
            // 12 <= zoom   ... (c)
        ],
        // (a) || (b) || (c)
    ]
],

その他詳細については Mapbox の Expressions を参照してください。

実行結果¶

Note

Mapray Cloudからデータを取得する部分が若干煩雑になりますが、v0.9.6でも利用できます。v0.9.6を使ったVectorTilesサンプルを参考に実装をしてください。