1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 14

点群データ Advent Calendar 2025

@shi-works(shi works)

東京都3次元点群データからDSMタイルを作成し、MapLibre GL JSで3D表示する

1
Posted at

この記事は 点群データ Advent Calendar 2025 14日目の記事です。

はじめに

東京都が公開している3次元点群データ（LAS）を利用して、

  • 点群の前処理
  • DSM（数値表層モデル）の作成
  • Web地図向けDSMタイル（数値PNGタイル）の生成
  • MapLibre GL JSでの3D表示

までを一連の流れとして整理します。

全体の処理フロー

  1. LASファイルのマージ
  2. LAS → LAZ変換
  3. メタ情報の確認
  4. 座標参照系（EPSG:6677）の付与
  5. 点群からDSM（GeoTIFF）作成
  6. GDALでVRT化・型変換
  7. NPtilesによるDSMタイル生成
  8. MapLibre GL JSでの3D表示

使用データ

東京都デジタルツイン実現プロジェクト　区部点群データ

  • 本記事では、点群データのうち、建物・樹木などの地物の高さを含む地表面データ（DSM）: オリジナルデータ（DSM）を使用します。
  • 航空レーザ測量により取得した16点/平方m以上の高密度点群データです。
  • 1/500図郭単位で、LAS等の各種形式をZIP圧縮したファイルです。
  • データの座標参照系は、日本測地系2011／平面直角座標系第9系です。
  • 0.25m及び0.5mのグリッドデータ作成の仕様となっています。
使用するLASファイルの一覧（東京駅周辺）
09LD1853.las
09LD1854.las
09LD1855.las
09LD1856.las
09LD1863.las
09LD1864.las
09LD1865.las
09LD1866.las
09LD1873.las
09LD1874.las
09LD1875.las
09LD1876.las
09LD1883.las
09LD1884.las
09LD1885.las
09LD1886.las
09LD1893.las
09LD1894.las
09LD1895.las
09LD1896.las

PC処理環境

  • OS：Windows 11 Pro(WSL2/Ubuntu)
  • CPU：AMD Ryzen 7 5700X 8-Core Processor
  • メモリ：64GB
  • SSD：4TB（空き容量 1TB）

使用ツール

1. LASファイルのマージ

東京都の3次元点群データは、国土基本図図郭（地図情報レベル500）単位で複数のLASファイルに分割されています。

以降の処理（座標参照系の付与、DSM作成など）をシンプルにするため、まずは対象範囲のLASファイルを1つのLASファイルにマージします。

ここではPDALのpipeline機能を使い、指定したディレクトリ配下のLASファイルをまとめて読み込み、1つのLASファイルとして出力します。

merge-pipeline.json
{
  "pipeline": [
    {
      "type": "readers.las",
      "filename": "las/*.las"
    },
    {
      "type": "writers.las",
      "filename": "tokyo-station.las"
    }
  ]
}
実行コマンド
pdal pipeline merge-pipeline.json

2. LAS → LAZ 変換

マージした点群データはLAS形式のままでも処理可能ですが、ファイルサイズが大きくなりやすく、後続処理や保存の面で扱いづらくなります。

そこで、LASを可逆圧縮形式であるLAZに変換します。LAZはLASと同じ情報を保持したままファイルサイズを大幅に削減でき（本記事で使用するマージ後のLASファイルは4GB程度ですが、LAZに変換すると1GB程度になります）、PDALをはじめとする多くの点群処理ツールで標準的に利用できます。

実行コマンド
pdal translate tokyo-station.las tokyo-station.laz

3. メタ情報の確認

次に、LAZファイルに含まれるメタ情報を確認します。

実行コマンド
pdal info --metadata tokyo-station.laz
実行結果
{
  "file_size": 1089584138,
  "filename": "tokyo-station.laz",
  "metadata":
  {
    "comp_spatialreference": "",
    "compressed": true,
    "copc": false,
    "count": 118354472,
    "creation_doy": 33,
    "creation_year": 2025,
    "dataformat_id": 7,
    "dataoffset": 475,
    "filesource_id": 0,
    "global_encoding": 16,
    "global_encoding_base64": "EAA=",
    "header_size": 375,
    "major_version": 1,
    "maxx": -5200,
    "maxy": -34500,
    "maxz": 245.41,
    "minor_version": 4,
    "minx": -6800,
    "miny": -36000,
    "minz": -22.28,
    "offset_x": 0,
    "offset_y": 0,
    "offset_z": 0,
    "point_length": 36,
    "project_id": "00000000-0000-0000-0000-000000000000",
    "scale_x": 0.01,
    "scale_y": 0.01,
    "scale_z": 0.01,
    "software_id": "PDAL 2.8.1 (a06325)",
    "spatialreference": "",
    "srs":
    {
      "compoundwkt": "",
      "horizontal": "",
      "isgeocentric": false,
      "isgeographic": false,
      "json":
      {
      },
      "prettycompoundwkt": "",
      "prettywkt": "",
      "proj4": "",
      "units":
      {
        "horizontal": "unknown",
        "vertical": ""
      },
      "vertical": "",
      "wkt": ""
    },
    "system_id": "PDAL",
    "vlr_0":
    {
      "data": "AwAAAAMEAwAAAAAAUMMAAP////////////////////8CAAoAHgADAAsABgADAA==",
      "description": "http://laszip.org",
      "record_id": 22204,
      "user_id": "laszip encoded"
    }
  },
  "now": "2025-12-14T10:44:23+0900",
  "pdal_version": "2.8.1 (git-version: a06325)",
  "reader": "readers.las"
}

spatialreference が空で、座標参照系が付与されていないため、次節で座標参照系を付与します。

4. 座標参照系（EPSG:6677）の付与

東京都の点群は JGD2011 / 平面直角座標系 で提供されています。
LAZの座標参照系として EPSG:6677 を付与します。

pdal translate \
  -i tokyo-station.laz \
  -o tokyo-station_6677.laz \
  --writers.las.a_srs="EPSG:6677"

5. 座標参照系付与後の確認

実行コマンド
pdal info --metadata tokyo-station_6677.laz
実行結果（抜粋）
{
  "filename": "tokyo-station_6677.laz",
  "metadata":
  {
    "comp_spatialreference": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS IX\", ... ,AUTHORITY[\"EPSG\",\"6677\"]]",
    "spatialreference": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS IX\", ... ,AUTHORITY[\"EPSG\",\"6677\"]]"
  }
}

spatialreference にEPSG:6677相当のWKTが出力されていれば、座標参照系の付与はOKです。

6. 点群からDSM（GeoTIFF）を作成

PDALの writers.gdal を使い、最大標高（max） を用いたDSMを作成します。

grid-pipeline.json
{
  "pipeline": [
    "tokyo-station_6677.laz",
    {
      "type": "writers.gdal",
      "filename": "tokyo-station_6677_025.tif",
      "output_type": "max",
      "resolution": 0.25
    }
  ]
}
実行コマンド
pdal pipeline grid-pipeline.json
  • 解像度：0.25m（DSMのグリッド間隔＝水平解像度）
  • 建物・構造物を含むDSM（最大標高）

7. GDALでVRT化・型変換

Web地図で可視化しやすいよう、Float32のVRTに変換します。

gdalbuildvrt -vrtnodata -9999 \
  tokyo-station_6677_025.vrt \
  tokyo-station_6677_025.tif

gdal_translate \
  -of VRT \
  -ot Float32 \
  tokyo-station_6677_025.vrt \
  tokyo-station_6677_025_float.vrt

8. gdal2NPtilesでDSMタイルを作成

gdal2NPtiles.py を使い、DSMを 数値PNGタイル として出力します。

python gdal2NPtiles.py \
  --numerical \
  --numerical-resolution 0.01 \
  tokyo-station_6677_025_float.vrt \
  tokyo-station \
  -z 1-18 \
  --xyz \
  --processes=8 \
  --resume

これにより、ズームレベルごとの DSMタイル（数値PNGタイル） が生成されます。

なお、--numerical-resolution 0.01 を指定しているため、タイルに格納される標高値は 0.01m（1cm）刻み になります（※DSMの0.25mは水平解像度です）。

9. MapLibre GL JSでDSMタイルを3D表示する

前章で作成したDSMタイル（数値PNGタイル）を、MapLibre GL JSのTerrain（地形）機能として読み込み、3D表示します。

ソースコードは以下のGitHubリポジトリに格納しています。

https://github.com/shiwaku/tokyo-pc-dsm-on-maplibre-for-qiita

ソースコードは、

  • (1) ベースマップ用スタイル（std.json）
  • (2) 表示本体（index.html）
  • (3) 数値PNG→Terrain-RGB変換プロトコル（maplibre-gl-gsi-terrain-fast-png.js）

の3点構成です。

9.1 DSMタイルを「raster-dem」として読み込む

DSMタイル（数値PNGタイル）を地形として扱うため、map.addSource() で type: "raster-dem" を指定します。
ここで tiles に DSMタイルURLテンプレート（{z}/{x}/{y}.png）を渡します。

map.addSource("dsm", {
  type: "raster-dem",
  tiles: [
    "gsidem://https://shiworks.xsrv.jp/raster-tiles/tokyo-digitaltwin/tokyo-station-dsm/{z}/{x}/{y}.png",
  ],
  tileSize: 256,
  attribution:
    '<a href="https://www.geospatial.jp/ckan/dataset/tokyopc-23ku-2024" target="_blank">東京都デジタルツイン実現プロジェクト 区部点群データを加工して作成</a>',
});

ポイントは tiles の先頭が gsidem:// になっていることです。
この gsidem:// は、次節の「数値PNG→Terrain-RGB変換プロトコル」で解決されます。

9.2 数値PNG（DSM）をTerrain-RGBに変換する（gsidemプロトコル）

MapLibre の raster-dem は、一般的に Terrain-RGB形式 を前提に標高を3D表示します。
一方、前章で作ったDSMタイルは 国土地理院の標高タイルと同様の数値PNGタイル なので、そのままだと raster-dem として解釈できません。

国土地理院の標高タイル（数値PNGタイル）やTerrain-RGB形式の標高タイルの仕様については、以下の記事に整理しています。

そこで、maplibre-gl-gsi-terrain-fast-png.js で gsidem プロトコルを追加し、タイル取得時に画像を読み込み、ピクセル単位でTerrain-RGB相当へ変換して返します。

変換の流れ

  1. maplibregl.addProtocol('gsidem', ...) で独自プロトコルを登録
  2. リクエストされたURLから gsidem:// を外して画像取得
  3. Canvasに描画→getImageData()でRGBA配列を取得
  4. 各ピクセルのRGBから標高を復元し、Terrain-RGB向けのRGBに再エンコード（gsidem2terrainrgb）
  5. fast-png でPNGに再エンコードしてMapLibreに ArrayBuffer を返す

この「クライアント側で動的に（Terrain-RGBへ）変換して描画する」方式により、サーバー側でTerrain-RGB形式のタイルを別途生成しなくても、DSMタイルをそのまま3D地形に利用できます。

デモサイト: 東京都デジタルツイン実現プロジェクト 点群DSMタイル

ズームレベル15
image.png

ズームレベル16
image.png

ズームレベル17
image.png

ズームレベル18
image.png

まとめ

本記事では、東京都の3次元点群（LAS）から、

  • PDALで点群をマージ・圧縮（LAS→LAZ）し、座標参照系（EPSG:6677）を付与
  • writers.gdal でDSM（GeoTIFF）を作成
  • GDALでWeb可視化しやすい形式に整形（VRT化・型変換）
  • gdal2NPtiles.py で DSMを数値PNGタイル化
  • MapLibre GL JS の raster-dem + setTerrain で 3D地形として表示
  • さらに gsidem プロトコルで 数値PNGをTerrain-RGBへ動的変換し、hillshade で陰影表現も追加

までを一通りつなげました。

点群由来のDSMは、建物や樹木の高さも含めて “都市の凹凸” をそのまま反映できるため、都市スケールの地形・構造物把握に非常に有効です。
また、本記事の例では 0.25m（水平解像度） でDSMを作成しており、点群の高さ情報を高い空間分解能のまま保持できる点も大きな特徴です（標高値は数値PNGとして 0.01m刻み で格納しています）。

DSMタイルは、以下のような特徴があります。

  • ラスタータイル（数値PNGタイル）として非常に軽量
  • 通常の地図タイル配信基盤（CDN、HTTP）で扱える
  • MapLibre GL JS の raster-dem という標準的な仕組みで表示可能

これらの特徴から、
「都市全体の起伏や高さ感を俯瞰的に把握したい」用途では、シンプルで実装・運用コストが低い手法 と言えます。
さらに、DSMはラスター形式で標高値を直接保持するため機械判読性が高く、ドローン航路画定時の障害物把握や高度制限判定などにもDSMタイルを活用可能です。

また、ベクトルタイルを技術基盤とするMapLibre GL JSなどのWeb地図ライブラリと組み合わせることで、既存の2D地図表現に「高さ」を低コストに追加できる点が、DSMタイルの大きな特徴です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?