はじめに
この記事は MapLibre Advent Calendar 2023 20日目の記事です。
MapLibre GL JSは2.5次元のインタラクティブな地図を描画するライブラリですが、一方で、3Dのデータ表現が弱いというところがあります。そこで、便利な方法として、3Dのデータ表現に長けているdeck.glのレイヤーをMapLibre GL JSに組み込む方法を紹介したいと思います。具体には、3D都市モデルPLATEAU 3D Tilesや3次元点群データをdeck.glのTile3DLayerを用いて、MapLibre GL JSにレイヤーとして組み込む方法について紹介します。
MapLibre GL JSにdeck.glレイヤーを組み込む方法
MapLibre GL JSにdeck.glレイヤーを組み込む方法には主に3つの方法があるようです。詳細については、下記の記事に詳しく書かれています。
1. MapboxOverlayを使ったオーバーレイ
2. MapboxOverlayを使ったインターリーブ
3. MapboxLayerを使ったインターリーブ
上記の記事の中で紹介されている、3つの方法におけるオーバーレイ、インターリーブの違いはこちらのページの図がわかりやすいです。
オーバーレイは、2つのライブラリが相互に独立してレンダリングする仕様のようで、2Dマップに適しているようです。一方で、インターリーブは、deck.glのレイヤーとMapLibre GL JSのレイヤーのオクルージョン（手前にある物体が後ろにある物体を隠す状態）が可能になるようで、3Dマップに適しているようです。
今回は、上記の記事で紹介されている方法のうち、deck.glのMapboxLayerを使ったインターリーブを使用して、MapLibre GL JSで3D都市モデルPLATEAU 3D Tilesや3次元点群データを表示します。
なお、3つの方法については、下記の記事でもGoogle Photorealistic 3D Tilesを用いて、MapLibre GL JSにdeck.glレイヤーを組み込む方法を試しているのであわせてご覧ください。
3D都市モデルPLATEAU 3D TilesをMapLibre GL JSで表示する
3D都市モデルPLATEAU 3D Tilesをdeck.glのTile3DLayerを用いて、MapLibre GL JSにレイヤーとして組み込みます。
デモサイト
東京駅周辺
ソースコードと解説
- 全体のソースコードは、下記のGitHubから入手してください。
- 解説は下記のとおりになります。
- 3D Tilesのローダーには、loaders.glのTiles3DLoaderを使用します。
<html>
<head>
<title>3D都市モデルPLATEAU（3D Tiles）</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet">
<script src="https://unpkg.com/pmtiles@2.10.0/dist/index.js"></script>
<script src="https://unpkg.com/deck.gl@8.9.0/dist.min.js"></script>
<script src="https://unpkg.com/@loaders.gl/3d-tiles@^2.3.0/dist/dist.min.js"></script>
-
MapboxLayerで3D都市モデルPLATEAU 3D Tilesを定義します。 -
loaderにTiles3DLoaderを指定します。 -
dataに3D都市モデルPLATEAU 3D TilesのURL（tileset.jsonのURL）を指定します。 - 3D Tilesの配信URLは下記より確認できます。
今回、3D都市モデルPLATEAU 3D Tilesは2021年度末時点で公開されている3D Tilesデータを使用しています。今回の方法で最新の3D Tilesデータ（2022年度末時点）を使用すると3Dモデルが表示されませんでした。ちなみに、QGIS3.34で3D Tilesを読み込めるようになりましたが、最新の3D Tilesデータは表示できませんでした。現時点の最新の3D Tilesデータは下記になります。
https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/plateau-3dtiles-streaming.md
-
onTileLoad以下は、3Dモデルの高さをマップ平面に合うようにするための調整です。 - 詳細については、下記の記事が詳しいです。
- 最終的に、
content.cartographicOrigin.zで建築物の基礎の標高に加えて東京駅付近のジオイド高 36.6641m を引いて、3Dモデルの高さをマップ平面に合うように調整しています。 -
map.addLayer(tile3dLayer)で3D都市モデルPLATEAU 3D Tilesレイヤを追加します。
map.on('load', () => {
// MapboxLayerを使ったインターリーブ
const tile3dLayer = new deck.MapboxLayer({
id: '13101_chiyoda-ku',
type: deck.Tile3DLayer,
// 3D都市モデルPLATEAU 3DTilesソース
data: 'https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13101_chiyoda-ku/low_resolution/tileset.json', // 千代田区
loader: Tiles3DLoader,
opacity: 1,
// 【参考】https://nagix.hatenablog.com/entry/2022/12/27/203825
onTileLoad: d => {
const { content } = d;
const buffer = content.batchTableBinary.buffer;
const key = content.batchTableJson;
const len = key._gml_id.length;
const zMinView = new DataView(buffer, key._zmin.byteOffset, len * 8);
const zMins = [];
for (let i = 0; i < len; i++) {
zMins.push(zMinView.getFloat64(i * 8, true));
}
zMins.sort((a, b) => a - b);
content.cartographicOrigin.z -= 36.6641 + zMins[Math.floor(len / 2)];
}
});
// 3D都市モデルPLATEAU 3DTilesレイヤ
map.addLayer(tile3dLayer);
})
3次元点群データ（3D Tiles）をMapLibre GL JSで表示する
3次元点群データをdeck.glのTile3DLayerを用いて、MapLibre GL JSにレイヤーとして組み込みます。
長崎県がオープンデータとして公開している3次元点群データ（LAS形式）から3D Tilesを生成して、MapLibre GL JS+deck.glで表示しています。3次元点群データから3D Tilesを生成する方法については、Zennで記事を書いていますので、あわせてご覧ください。
デモサイト
長崎駅周辺
ソースコードと解説
- 全体のソースコードは、下記のGitHubから入手してください。
- 解説は下記のとおりになります。
- 3D Tilesのローダーには、loaders.glのTiles3DLoaderを使用します。
<html>
<head>
<title>長崎県 3次元点群データ（3DTiles）</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/pmtiles@2.10.0/dist/index.js"></script>
<script src="https://unpkg.com/deck.gl@8.9.0/dist.min.js"></script>
<script src="https://unpkg.com/@loaders.gl/3d-tiles@^2.3.0/dist/dist.min.js"></script>
-
MapboxLayerで3次元点群データ（3D Tiles）を定義します。 -
dataに3次元点群データ（3D Tiles）のURL（tileset.jsonのURL）を指定します。 -
loaderにTiles3DLoaderを指定します。 -
map.addLayer(tile3dLayer)でレイヤを追加します。
map.on('load', () => {
// MapboxLayerを使ったインターリーブ
const tile3dLayer = new deck.MapboxLayer({
id: "nagasaki-station",
type: deck.Tile3DLayer,
pointSize: 2,
// 3次元点群データ（3DTiles）ソース
data: 'https://xs489works.xsrv.jp/3dtiles/open_nagasaki/nagasaki_station/tileset.json',
loader: Tiles3DLoader
});
// 3次元点群データ（3DTiles）レイヤ
map.addLayer(tile3dLayer);
})
参考文献
おわりに
MapLibre GL JSにdeck.glのレイヤーを組み込む方法についてご紹介しました。deck.glのTile3DLayerをMapLibre GL JSにレイヤとして組み込むことで、MapLibre GL JSで3D都市モデルPLATEAU 3D Tilesや3次元点群データ（3D Tiles）を表示することができます。deck.glには、Tile3DLayer以外にも可視化のための様々なレイヤーが用意されています。例えば、地点間の繋がりを3Dの弧で表現できるArcLayerやデータをヘキサゴン（六角形）で集約してヒートマップとして表現できるHexagonLayerなど表現力の高いレイヤーを利用することもできます。