Deck.GLでPMTilesを読み込んで表示したい時に遭遇した事象についての解決策

はじめに

この記事ではDeck.GLとPMTilesが何かという説明はしません
Deck.GLでPMTilesのデータを表示しようとする時にどういう事をする必要があるのか
ある現象が発生してはまっていたのですが、CTOに助けられましたので、その備忘録になります

参考にした記事

実装にあたっては「日本でDeck.GLといえば」のshimizuさんの記事を参考にさせていただきました
他、色々と非公式なライブラリーは出ているのですが、基本はこの方式になるかと思います

方法

最新版のloaders.glでPMTilesを読み込むことが出来るので、Deck.GLのTileLayerで読み込み、PMTilesの内容によって、サブレイヤーで可視化する
という方法を取ることになります
データがベクターの時はGeoJsonLayer、ラスターの時はBMPLayerをサブレイヤーとして可視化を行います
TileLayerとかMVTLayerのみで可視化まで出来ないのはポイントかと思います

ここまでの実装はshimizuさんの記事で確認できるかと思います

問題発生

この方法を取って可視化をさせようとしたのですが、タイルの表示時に、タイルのバッファーが表示されてしまうという現象が起きました
タイルは切れ目が見えないよう、ある程度バッファーを持っているのですが、TileLayerのみの表示ではなく、サブレイヤーでの可視化となることによって、バッファーの表示処理は自分で行わないといけないということのようです

こんな感じに格子状の模様が出てしまう

解決策

この現象を解決するために、ClipExtensionを使います
これは可視化する対象を任意の矩形にクリップできるDeck.GLの拡張機能です

実装はこんな感じになります

const tileSource = new PMTilesSource({
    url: "PMTilesの場所のURL"
});

const layer = new TileLayer({
    getTileData: (props) => tileSource.getTileData(props),
    visible: true,
    renderSubLayers: (props) => {
        return new GeoJsonLayer({
            id: props.id,
            data: props.data,
            // タイルの領域でクリップする
            extensions: [new ClipExtension()],
            clipBounds: [
                props.tile.bbox.west,
                props.tile.bbox.south,
                props.tile.bbox.east,
                props.tile.bbox.north,
            ],
            getFillColor: [255, 0, 80, 120],
            lineWidthScale: 1,
            lineWidthMinPixels: 0.5
        });
    }
}

バッファを持たないデータを作る、という手もあるかと思いますが、データの汎用性を保つならば実装側で対応した方が良さそうです