演習 4: スタイルのカスタマイズ

このセクションでは、Terra Draw の高度なスタイル設定機能を学びます。

Terra Draw は、すべての描画モードに対して豊富なスタイル設定機能を提供しています。スタイルの指定方法は 公式のスタイルガイド に記載されたパターンに従います。

ポイントのスタイル

TerraDrawPointMode は次のプロパティでスタイルを設定します。

LineString のスタイル

TerraDrawLineStringMode は次のプロパティでスタイルを設定します。

TerraDrawFreehandLineStringMode と TerraDrawPolyLineMode も、これらのスタイルプロパティの多くを共有しています。

Terra Draw v1.30 の新機能

lineStringDash はピクセル単位のタプル [破線の長さ, 間隔の長さ] を取ります。[2, 2] は破線に、[1, 3] は点線のような見た目になります。

ポリゴンのスタイル

TerraDrawPolygonMode は次のプロパティでスタイルを設定します。

TerraDrawFreehandMode や TerraDrawCircleMode など、ポリゴンを描く他のモードも同じプロパティでスタイルをカスタマイズできます。

ライブエディタで試す

演習 3 のコードを出発点に、各モードに styles オブジェクトを追加してください。解答では、ポイントを白地に赤い輪郭、線を赤の半透明な破線、ポリゴンを白地に赤い輪郭にし、さらに選択時のスタイルもカスタマイズしています。

Live editor — open this page in the browser to run the code.

解説

各描画モードに styles オプションを追加します。

draw = new TerraDraw({
    modes: [
        new TerraDrawPointMode({
            styles: {
                pointColor: '#FFFFFF',
                pointWidth: 5,
                pointOutlineColor: '#FF0000',
                pointOutlineWidth: 1
            }
        }),
        new TerraDrawLineStringMode({
            styles: {
                lineStringColor: '#FF0000',
                lineStringWidth: 2,
                // Semi-transparent line (added in v1.24)
                lineStringOpacity: 0.8,
                // Dashed line: 2px dash followed by a 2px gap (added in v1.30)
                lineStringDash: [2, 2],
                closingPointColor: '#FFFFFF',
                closingPointWidth: 3,
                closingPointOutlineColor: '#FF0000',
                closingPointOutlineWidth: 1
            }
        }),
        new TerraDrawPolygonMode({
            styles: {
                fillColor: '#FFFFFF',
                fillOpacity: 0.7,
                outlineColor: '#FF0000',
                outlineWidth: 2,
                closingPointColor: '#FFFFFF',
                closingPointWidth: 3,
                closingPointOutlineColor: '#FF0000',
                closingPointOutlineWidth: 1
            }
        }),
    ]
})

選択モードのスタイルをカスタマイズする

ただし、TerraDrawSelectMode でフィーチャーを選択したときのスタイルは、まだ既定のままです。次のように TerraDrawSelectMode に styles プロパティを追加しましょう。

new TerraDrawSelectMode({
    // Add custom style for select mode
    styles: {
        // Point colour
        selectedPointColor: "#FF0000",
        selectedPointWidth: 7,
        selectedPointOutlineColor: "#FFFF00",
        selectedPointOutlineWidth: 2,
        // LineString colour
        selectedLineStringColor: "#FFFF00",
        selectedLineStringWidth: 4,
        // Polygon colour
        selectedPolygonColor: "#FF0000",
        selectedPolygonFillOpacity: 0.7,
        selectedPolygonOutlineColor: "#FFFF00",
        selectedPolygonOutlineWidth: 4,
        // Selection point colour
        selectionPointColor: "#FF0000",
        selectionPointWidth: 8,
        selectionPointOutlineColor: "#FFFF00",
        selectionPointOutlineWidth: 2,
        // Midpoint colour
        midPointColor: "#FF0000",
        midPointWidth: 6,
        midPointOutlineColor: "#FFFF00",
        midPointOutlineWidth: 2
    },
    flags: {
        // keep flags settings from previous exercise
    }
})

動作確認

1. 描画のスタイルを確認します — ポイント・線・ポリゴンを描いて、色が変わっているか確かめてください
2. 破線を確認します — 線が破線になり、少し透けているはずです
3. 選択モードのスタイルを確認します — ポイント・線・ポリゴンを選択して、カスタムスタイルが正しく適用されるか確かめてください

発展課題

固定値の代わりに、スタイルを返す関数を渡すこともできます。

import { TerraDrawExtend } from 'terra-draw';

// Function to generate a random hex color - can adjust as needed
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Cache for each feature id mapped to a hex color string
let colorCache: Record<TerraDrawExtend.FeatureId, string> = {};

new TerraDrawPolygonMode({
    styles: {
        fillColor: ({ id }) => {
            // Get the color from the cache or generate a new one
            colorCache[id] = colorCache[id] || getRandomColor();
            return colorCache[id];
        },
    },
}),

上の例では、ポリゴンごとに塗りつぶしの色がランダムに変わります。

次のステップ

スタイルのカスタマイズが分かったところで、次は Terra Draw のイベント処理を見ていきましょう。

演習 5 に進む