テーマ

主題図は、ジオメトリの視覚的な外観を記述するために使用されます。 これらは、形状のスタイルのセットを記述する TypeScript または JSON ファイルです。 ジオメトリにはさまざまな種類があり、これらのジオメトリの外観をカスタマイズできる対応するスタイルがあります。

ジオメトリのスタイル設定の基本原則を理解 SpeedLimitsDataSource するために、サンプルで使用されている簡単なテーマを確認しましょう。 パッケージ src/datasources/speedLimitsDataSource/theme/speedLimitTheme.ts のファイルにあり @here/olp-examples ます。

このファイルは、主題name図とstyles配列の文字列を持つSpeedLimitThemeオブジェクトをエクスポートします。 異なる色の線のスタイルと、非表示の線のスタイルを定義します。

各スタイルオブジェクトには、 when 2 つの文字列プロパティ、および technique一部のオプションのプロパティ、 attr および各スタイルに固有の追加のプロパティのセットが必要です。

• when: このスタイルをいつ適用するかを記述する式。 この式は、で StyleSetEvaluator 必要なを取得するために使用 techniqueされます。 SpeedLimitsTile.createSpeedLimitsMaterial このメソッドの使用例を確認できます。
• technique: スタイルのジオメトリタイプを指定するプロパティで、 "line"、 "fill"、"solid-line"、"dashed-line"、"extruded-line"、"extruded-polygon"、"text"、"landmark"、"line""segments"、または "none"のいずれかにする必要があります。
• attr: 各に固有 technique の属性で、形状の外観を記述します。
• description: 任意で、わかりやすい説明です。
• renderOrder: オプションで、ジオメトリのレンダリング順序を指定します。
• transparent: 任意 true で、線を透明にする場合はに設定します。 透明な線のレンダリングには、パフォーマンスに若干の影響が出ることがあります。
• opacity: オプションで、透明な線の場合は、完全に透明の場合は0.0の間、完全に不透明の場合は1.0の間に値を設定します。

まず、速度制限の表示に使用する実線のスタイルを確認します。 これらのうち 3 つは、共通の属性が lineAttributes オブジェクトに配置され、すべての行で再利用されるようになっています。

実線 solid-line には、この手法で使用されるスタイルがあり、実線のジオメトリを表します。 外観は、次の属性を指定してカスタマイズできます。

• lineWidth: 線幅 ( メートル ) 。 さまざまなズームレベルの幅の配列です。 value さまざまなズームレベルに異なる幅を適用する必要がない場合、 minLevelまたは、、 maxLevel、、、、、 および value を使用して、特定の線幅のズーム レベル範囲を指定します。
• color: 16 進数または CSS スタイルの表記法による行の色 (例 : "#e4e9ec"、"#fff"、"rgb(255, 0, 0)"、または"hsl(35, 11%, 88%)") 。
• clipping: をに設定 true するか、省略すると、行はタイルの境界でクリップされます。 に設定する falseと、線はタイルの外部にも描画されます。

segments この技法には特別なスタイルがあります。 この方法は、1 ピクセル幅のラインジオメトリを作成するために使用されますが、この場合、属性visibleはfalseに設定されています。 これは、パフォーマンスを改善するために行われます。 このスタイルは、マウスポインタと形状の交差を検出するためにのみ使用される非表示の直線に適用されます。 opacity: 0代わりにvisible: falseを使用することをお勧めします。レンダリングでは、visibleがfalseに設定された形状の実際の描画呼び出しが実行されないため、パフォーマンスが向上します。

制限速度のテーマ :

// Common styles for speed limit line.
const lineAttributes = {
    lineWidth: 4,
    metricUnit: "Pixel",
    clipping: false // Line will not be clipped by tile bounds
};

/** Theme for visualization of speed limits geometries. */
export const SpeedLimitTheme = {
    name: "speedlimits", // Theme name.
    styles: [
        {
            description: "Style for visualizing low speed limits.",
            when: "type == 'speedlimit-line-low'",
            technique: "solid-line",
            renderOrder: 1010,
            attr: { color: "rgb(191,33,47)", ...lineAttributes }
        },
        {
            description: "Style for visualizing medium speed limits.",
            when: "type == 'speedlimit-line-medium'",
            technique: "solid-line",
            renderOrder: 1009,
            attr: { color: "rgb(249,167,62)", ...lineAttributes }
        },
        {
            description: "Style for visualizing high speed limits.",
            when: "type == 'speedlimit-line-high'",
            technique: "solid-line",
            renderOrder: 1008,
            attr: { color: "rgb(39,179,118)", ...lineAttributes }
        }
    ]
};

さまざまな種類のジオメトリを視覚化するために使用される他のテクニックがあります。これらのテクニックについては、 Technique API を参照してください。