deck.glで塗りにテクスチャを適用する
この記事はdeck.gl Advent Calendar 2021 参加記事です。
概要
GeoJSONレイヤーなどでポリゴンを描画する際に、塗(fill)にテクスチャを適用する方法です。
サンプルコード
パターンファイル（透過png）を読み込んでポリゴンに網掛けをしています。
解説
FillStyleExtensionをGeoJSONレイヤーに適用することで、塗り(Fill)スタイルを拡張しテクスチャを適用することができます。
extensionはdeck.glとは別にインストールしてください。
|
1 |
> npm install @deck.gl/extensions |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
//エクステンションの読み込み import { FillStyleExtension } from "@deck.gl/extensions"; //texureのマッピング設定 const textureMapping = { "hatch-1x": { x: 4, y: 4, width: 120, height: 120, mask: true }, "hatch-2x": { x: 132, y: 4, width: 120, height: 120, mask: true }, "hatch-cross": { x: 4, y: 132, width: 120, height: 120, mask: true }, dots: { x: 132, y: 132, width: 120, height: 120, mask: true } }; export function renderLayers(props) { //県境界データを可視化 const geoJSONlayer = new GeoJsonLayer({ id: "geojson-layer", data: "./data/pref.geojson", stroked: true, filled: true, getLineColor: [0, 0, 0, 255], lineWidthMinPixels: 1, getFillColor: [255, 0, 0], //テクスチャにマスクを適用するか・いなか。 fillPatternMask: true, //透過pngのパターンファイルを読み込み fillPatternAtlas: "./texture/pattern.png", //mapping設定を反映 fillPatternMapping: textureMapping, //ポリゴンに適用するテクスチャをマッピングした名前で指定する getFillPattern: (f, { index }) => "hatch-2x", //別の名前を指定することで呼び出すテクスチャを変更できます getFillPatternScale: 100, getFillPatternOffset: [0, 0], //エクステンションを設定 extensions: [new FillStyleExtension({ pattern: true })] }); return [geoJSONlayer]; } |
マッピング設定にて、パターンファイルとして使用する画像の横幅や縦幅、位置などを正確に設定しないと正しくテクスチャが適用されないので注意してください。
また、設定したマッピングから実際に適用するものを指定するgetFillPatternアクセサはコールバックの中でマッピング名を戻り値として返さないと行けない仕様となっています。
一般的な画像もテクスチャとして適用することができます。
画像をそのまま適用したい場合は、fillPatternMaskを「false」にしてください。
複数のパターンをポリゴンごとに適用することもできます。
