deck.glでmapboxサービス以外のベースマップを使用する
概要
そもそもdeck.glにはデフォルトで表示されるベースマップといったものはありませんが、公式のサンプルの多くがdeck.glとreact-map-glを組み合わせて使っているケースが多いため、deck.glではベースマップを使うためにMapboxサービスへの登録が必須であるような誤解があるようです。
他のサービスのベースマップを使う
deck.glでmapbox以外のベースマップを使用する方法はいろいろあるのですが、ここではTIleLayerを利用した例を紹介します。
TileLayerとは
TileLayer:Deck.gl API reference
TileLayerはサードパーティのラスタタイル(地図タイル)を読み込んで表示するためのレイヤーです。
サンプルコード
解説
他のマップライブラリで外部の地図タイルを読み込んだことがある方であればあまり迷うことはないかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const tileLayer = new TileLayer({ data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', minZoom: 0, maxZoom: 19, tileSize: 256, renderSubLayers: props => { const { bbox: { west, south, east, north } } = props.tile; return new BitmapLayer(props, { data: null, image: props.data, bounds: [west, south, east, north] }); } }); |
基本的にはdataプロパティに地図タイルのURLを指定するだけです。
renderSublayersの部分だけちょっとわかりづらいかと思いますが、通常は特に触る必要がありません。（レンダリングにBitmapLayer以外を使いたい時などに修正する必要がでてきます）
ひとつ問題点としてはTextLayerには、attributionを設定するプロパティやメソッドがありません。仕方がないので自分で地図にエレメントを追加してattributionを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
return ( <div className="App"> <DeckGL layers={renderLayers({ data: data })} controller={{ type: MapController, dragRotate: false }} initialViewState={viewport} /> <div className="attribution"><a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a></div> </div> ); |
これで外部の地図タイルをDeck.glに読み込んで使用することができます。
地理院地図を読み込んだサンプルも掲載しておきます。
