🌏

3次元点群データから3DTilesを生成する方法

2023/08/16に公開

はじめに

下記の記事に刺激を受けて、3次元点群データ(las)から3DTilesを生成してみたくなったので、
その備忘録も兼ねて、記事にしました。基本的に下記の記事をベースに3DTilesを生成しています。

https://qiita.com/nokonoko_1203/items/a8d58c12c31faf55a7f5

本記事では、長崎県がオープンナガサキとして公開している、3次元点群データ(las)から3DTilesを生成する方法について説明します。最終的には、生成した3DTilesをMapLibre GL JS + deck.glで表示するところまでを目標とします。

PC環境

OS:Windows 10 Pro
CPU:Intel Core i7-9700
メモリ:32GB

前提条件

  • OSGeo4W(PDAL)がインストール済みであること。
  • PDALのバージョンは、pdal 2.5.2です。
    (3次元点群データのメタ情報の確認・座標参照系の付与・XY座標の入れ替えに使用します。)

https://trac.osgeo.org/osgeo4w/

  • WSL2(Ubuntu-20.04)がインストール済みであること。

https://learn.microsoft.com/ja-jp/windows/wsl/install

  • Pythonがインストール済みであること。
  • WSLのターミナルを開き、以下のコマンドでPythonとpipをインストールします。
  • Pythonのバージョンは、Python 3.8.10です。
sudo apt update
sudo apt install python3 python3-pip
  • py3dtilesがインストール済みであること。
    (3次元点群データ(las)の3DTilesへの変換に使用します。)
  • py3dtilesのバージョンは、py3dtiles 6.0.0です。
pip3 install py3dtiles
  • オープンナガサキから3次元点群データ(las)を取得済みであること。
  • 本記事では、オープンナガサキから01KE9821(01ke9821_org.las)※長崎駅周辺をダウンロードして使用します。

https://opennagasaki.nerc.or.jp/

メタ情報の確認

  • OSGeo4W Shellを起動して、以下のコマンドを実行して、メタ情報を確認します。
pdal info --metadata 01ke9821_org.las
  • 実行結果
{
  "file_size": 472552177,
  "filename": "01ke9821_org.las",
  "metadata":
  {
    "comp_spatialreference": "",
    "compressed": false,
    "copc": false,
    "count": 18175075,
    "creation_doy": 0,
    "creation_year": 0,
    "dataformat_id": 2,
    "dataoffset": 227,
    "filesource_id": 0,
    "global_encoding": 0,
    "global_encoding_base64": "AAA=",
    "header_size": 227,
    "major_version": 1,
    "maxx": 34999.994,
    "maxy": -27000.001,
    "maxz": 100.905,
    "minor_version": 2,
    "minx": 34000,
    "miny": -27750,
    "minz": -2.807,
    "offset_x": 34000,
    "offset_y": -27750,
    "offset_z": -2.807,
    "point_length": 26,
    "project_id": "00000000-0000-0000-0000-000000000000",
    "scale_x": 4.65658493556854e-07,
    "scale_y": 3.49245499982147e-07,
    "scale_z": 4.82946634517492e-08,
    "software_id": "TREND-POINT",
    "spatialreference": "",
    "srs":
    {
      "compoundwkt": "",
      "horizontal": "",
      "isgeocentric": false,
      "isgeographic": false,
      "json": "",
      "prettycompoundwkt": "",
      "prettywkt": "",
      "proj4": "",
      "units":
      {
        "horizontal": "unknown",
        "vertical": ""
      },
      "vertical": "",
      "wkt": ""
    },
    "system_id": "FC"
  },
  "now": "2023-08-16T13:52:18+0900",
  "pdal_version": "2.5.2 (git-version: 57c4e7)",
  "reader": "readers.las"
}

  • 3次元点群データに座標参照系を付与します。

座標参照系の付与

  • OSGeo4W Shellで、以下のコマンドを実行して、座標参照系を付与します。
pdal translate -i 01ke9821_org.las -o 01ke9821_translated.las --writers.las.a_srs="EPSG:6669"

メタ情報の確認

  • OSGeo4W Shellで、以下のコマンドを実行して、メタ情報を確認します。
pdal info --metadata 01ke9821_translated.las
  • 実行結果
{
  "file_size": 617952997,
  "filename": "01ke9821_translated.las",
  "metadata":
  {
    "comp_spatialreference": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",GEOGCS[\"JGD2011\",DATUM[\"Japanese_Geodetic_Datum_2011\",SPHEROID[\"GRS 1980\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"7019\"]],AUTHORITY[\"EPSG\",\"1128\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"6668\"]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"latitude_of_origin\",33],PARAMETER[\"central_meridian\",129.5],PARAMETER[\"scale_factor\",0.9999],PARAMETER[\"false_easting\",0],PARAMETER[\"false_northing\",0],UNIT[\"metre\",1,AUTHORITY[\"EPSG\",\"9001\"]],AXIS[\"Northing\",NORTH],AXIS[\"Easting\",EAST],AUTHORITY[\"EPSG\",\"6669\"]]",
    "compressed": false,
    "copc": false,
    "count": 18175075,
    "creation_doy": 0,
    "creation_year": 2023,
    "dataformat_id": 3,
    "dataoffset": 447,
    "filesource_id": 0,
    "global_encoding": 0,
    "global_encoding_base64": "AAA=",
    "gtiff": "Geotiff_Information:\n   Version: 1\n   Key_Revision: 1.0\n   Tagged_Information:\n      End_Of_Tags.\n   Keyed_Information:\n      GTModelTypeGeoKey (Short,1): ModelTypeProjected\n      GTRasterTypeGeoKey (Short,1): RasterPixelIsArea\n      GTCitationGeoKey (Ascii,39): \"JGD2011 / Japan Plane Rectangular CS I\"\n      GeogCitationGeoKey (Ascii,8): \"JGD2011\"\n      GeogAngularUnitsGeoKey (Short,1): Angular_Degree\n      ProjectedCSTypeGeoKey (Short,1): Code-6669 (JGD2011 / Japan Plane Rectangular CS I)\n      ProjLinearUnitsGeoKey (Short,1): Linear_Meter\n      End_Of_Keys.\n   End_Of_Geotiff.\n",
    "header_size": 227,
    "major_version": 1,
    "maxx": 34999.994,
    "maxy": -27000.001,
    "maxz": 100.905,
    "minor_version": 2,
    "minx": 34000,
    "miny": -27750,
    "minz": -2.807,
    "offset_x": 0,
    "offset_y": 0,
    "offset_z": 0,
    "point_length": 34,
    "project_id": "00000000-0000-0000-0000-000000000000",
    "scale_x": 0.01,
    "scale_y": 0.01,
    "scale_z": 0.01,
    "software_id": "PDAL 2.5.2 (57c4e7)",
    "spatialreference": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",GEOGCS[\"JGD2011\",DATUM[\"Japanese_Geodetic_Datum_2011\",SPHEROID[\"GRS 1980\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"7019\"]],AUTHORITY[\"EPSG\",\"1128\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"6668\"]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"latitude_of_origin\",33],PARAMETER[\"central_meridian\",129.5],PARAMETER[\"scale_factor\",0.9999],PARAMETER[\"false_easting\",0],PARAMETER[\"false_northing\",0],UNIT[\"metre\",1,AUTHORITY[\"EPSG\",\"9001\"]],AXIS[\"Northing\",NORTH],AXIS[\"Easting\",EAST],AUTHORITY[\"EPSG\",\"6669\"]]",
    "srs":
    {
      "compoundwkt": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",GEOGCS[\"JGD2011\",DATUM[\"Japanese_Geodetic_Datum_2011\",SPHEROID[\"GRS 1980\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"7019\"]],AUTHORITY[\"EPSG\",\"1128\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"6668\"]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"latitude_of_origin\",33],PARAMETER[\"central_meridian\",129.5],PARAMETER[\"scale_factor\",0.9999],PARAMETER[\"false_easting\",0],PARAMETER[\"false_northing\",0],UNIT[\"metre\",1,AUTHORITY[\"EPSG\",\"9001\"]],AXIS[\"Northing\",NORTH],AXIS[\"Easting\",EAST],AUTHORITY[\"EPSG\",\"6669\"]]",
      "horizontal": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",GEOGCS[\"JGD2011\",DATUM[\"Japanese_Geodetic_Datum_2011\",SPHEROID[\"GRS 1980\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"7019\"]],AUTHORITY[\"EPSG\",\"1128\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"6668\"]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"latitude_of_origin\",33],PARAMETER[\"central_meridian\",129.5],PARAMETER[\"scale_factor\",0.9999],PARAMETER[\"false_easting\",0],PARAMETER[\"false_northing\",0],UNIT[\"metre\",1,AUTHORITY[\"EPSG\",\"9001\"]],AXIS[\"Northing\",NORTH],AXIS[\"Easting\",EAST],AUTHORITY[\"EPSG\",\"6669\"]]",
      "isgeocentric": false,
      "isgeographic": false,
      "json": "{\n  \"type\": \"ProjectedCRS\",\n  \"name\": \"JGD2011 / Japan Plane Rectangular CS I\",\n  \"base_crs\": {\n    \"name\": \"JGD2011\",\n    \"datum\": {\n      \"type\": \"GeodeticReferenceFrame\",\n      \"name\": \"Japanese Geodetic Datum 2011\",\n      \"ellipsoid\": {\n        \"name\": \"GRS 1980\",\n        \"semi_major_axis\": 6378137,\n        \"inverse_flattening\": 298.257222101\n      }\n    },\n    \"coordinate_system\": {\n      \"subtype\": \"ellipsoidal\",\n      \"axis\": [\n        {\n          \"name\": \"Geodetic latitude\",\n          \"abbreviation\": \"Lat\",\n          \"direction\": \"north\",\n          \"unit\": \"degree\"\n        },\n        {\n          \"name\": \"Geodetic longitude\",\n          \"abbreviation\": \"Lon\",\n          \"direction\": \"east\",\n          \"unit\": \"degree\"\n        }\n      ]\n    },\n    \"id\": {\n      \"authority\": \"EPSG\",\n      \"code\": 6668\n    }\n  },\n  \"conversion\": {\n    \"name\": \"unnamed\",\n    \"method\": {\n      \"name\": \"Transverse Mercator\",\n      \"id\": {\n        \"authority\": \"EPSG\",\n        \"code\": 9807\n      }\n    },\n    \"parameters\": [\n      {\n        \"name\": \"Latitude of natural origin\",\n        \"value\": 33,\n        \"unit\": \"degree\",\n        \"id\": {\n          \"authority\": \"EPSG\",\n          \"code\": 8801\n        }\n      },\n      {\n        \"name\": \"Longitude of natural origin\",\n        \"value\": 129.5,\n        \"unit\": \"degree\",\n        \"id\": {\n          \"authority\": \"EPSG\",\n          \"code\": 8802\n        }\n      },\n      {\n        \"name\": \"Scale factor at natural origin\",\n        \"value\": 0.9999,\n        \"unit\": \"unity\",\n        \"id\": {\n          \"authority\": \"EPSG\",\n          \"code\": 8805\n        }\n      },\n      {\n        \"name\": \"False easting\",\n        \"value\": 0,\n        \"unit\": \"metre\",\n        \"id\": {\n          \"authority\": \"EPSG\",\n          \"code\": 8806\n        }\n      },\n      {\n        \"name\": \"False northing\",\n        \"value\": 0,\n        \"unit\": \"metre\",\n        \"id\": {\n          \"authority\": \"EPSG\",\n          \"code\": 8807\n        }\n      }\n    ]\n  },\n  \"coordinate_system\": {\n    \"subtype\": \"Cartesian\",\n    \"axis\": [\n      {\n        \"name\": \"Northing\",\n        \"abbreviation\": \"\",\n        \"direction\": \"north\",\n        \"unit\": \"metre\"\n      },\n      {\n        \"name\": \"Easting\",\n        \"abbreviation\": \"\",\n        \"direction\": \"east\",\n        \"unit\": \"metre\"\n      }\n    ]\n  },\n  \"id\": {\n    \"authority\": \"EPSG\",\n    \"code\": 6669\n  }\n}",
      "prettycompoundwkt": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",\n    GEOGCS[\"JGD2011\",\n        DATUM[\"Japanese_Geodetic_Datum_2011\",\n            SPHEROID[\"GRS 1980\",6378137,298.257222101,\n                AUTHORITY[\"EPSG\",\"7019\"]],\n            AUTHORITY[\"EPSG\",\"1128\"]],\n        PRIMEM[\"Greenwich\",0,\n            AUTHORITY[\"EPSG\",\"8901\"]],\n        UNIT[\"degree\",0.0174532925199433,\n            AUTHORITY[\"EPSG\",\"9122\"]],\n        AUTHORITY[\"EPSG\",\"6668\"]],\n    PROJECTION[\"Transverse_Mercator\"],\n    PARAMETER[\"latitude_of_origin\",33],\n    PARAMETER[\"central_meridian\",129.5],\n    PARAMETER[\"scale_factor\",0.9999],\n    PARAMETER[\"false_easting\",0],\n    PARAMETER[\"false_northing\",0],\n    UNIT[\"metre\",1,\n        AUTHORITY[\"EPSG\",\"9001\"]],\n    AXIS[\"Northing\",NORTH],\n    AXIS[\"Easting\",EAST],\n    AUTHORITY[\"EPSG\",\"6669\"]]",
      "prettywkt": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",\n    GEOGCS[\"JGD2011\",\n        DATUM[\"Japanese_Geodetic_Datum_2011\",\n            SPHEROID[\"GRS 1980\",6378137,298.257222101,\n                AUTHORITY[\"EPSG\",\"7019\"]],\n            AUTHORITY[\"EPSG\",\"1128\"]],\n        PRIMEM[\"Greenwich\",0,\n            AUTHORITY[\"EPSG\",\"8901\"]],\n        UNIT[\"degree\",0.0174532925199433,\n            AUTHORITY[\"EPSG\",\"9122\"]],\n        AUTHORITY[\"EPSG\",\"6668\"]],\n    PROJECTION[\"Transverse_Mercator\"],\n    PARAMETER[\"latitude_of_origin\",33],\n    PARAMETER[\"central_meridian\",129.5],\n    PARAMETER[\"scale_factor\",0.9999],\n    PARAMETER[\"false_easting\",0],\n    PARAMETER[\"false_northing\",0],\n    UNIT[\"metre\",1,\n        AUTHORITY[\"EPSG\",\"9001\"]],\n    AXIS[\"Northing\",NORTH],\n    AXIS[\"Easting\",EAST],\n    AUTHORITY[\"EPSG\",\"6669\"]]",
      "proj4": "+proj=tmerc +lat_0=33 +lon_0=129.5 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs",
      "units":
      {
        "horizontal": "metre",
        "vertical": ""
      },
      "vertical": "",
      "wkt": "PROJCS[\"JGD2011 / Japan Plane Rectangular CS I\",GEOGCS[\"JGD2011\",DATUM[\"Japanese_Geodetic_Datum_2011\",SPHEROID[\"GRS 1980\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"7019\"]],AUTHORITY[\"EPSG\",\"1128\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"6668\"]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"latitude_of_origin\",33],PARAMETER[\"central_meridian\",129.5],PARAMETER[\"scale_factor\",0.9999],PARAMETER[\"false_easting\",0],PARAMETER[\"false_northing\",0],UNIT[\"metre\",1,AUTHORITY[\"EPSG\",\"9001\"]],AXIS[\"Northing\",NORTH],AXIS[\"Easting\",EAST],AUTHORITY[\"EPSG\",\"6669\"]]"
    },
    "system_id": "PDAL",
    "vlr_0":
    {
      "data": "AQABAAAABwAABAAAAQABAAEEAAABAAEAAgSxhycAAAABCLGHCAAnAAYIAAABAI4jAAwAAAEADRoEDAAAAQApIw==",
      "description": "GeoTiff GeoKeyDirectoryTag",
      "record_id": 34735,
      "user_id": "LASF_Projection"
    },
    "vlr_1":
    {
      "data": "SkdEMjAxMSAvIEphcGFuIFBsYW5lIFJlY3Rhbmd1bGFyIENTIEl8SkdEMjAxMXwA",
      "description": "GeoTiff GeoAsciiParamsTag",
      "record_id": 34737,
      "user_id": "LASF_Projection"
    }
  },
  "now": "2023-08-16T14:00:34+0900",
  "pdal_version": "2.5.2 (git-version: 57c4e7)",
  "reader": "readers.las"
}
  • "srs"に座標参照系「"JGD2011 / Japan Plane Rectangular CS I"」が付与されています。

X座標とY座標の入れ替え

  • OSGeo4W Shellで、以下のコマンドを実行して、データの先頭に格納されているポイントの位置を確認します。
pdal info -p 0 01ke9821_translated.las
  • 実行結果
{
  "file_size": 617952997,
  "filename": "01ke9821_translated.las",
  "now": "2023-08-16T14:05:06+0900",
  "pdal_version": "2.5.2 (git-version: 57c4e7)",
  "points":
  {
    "point":
    {
      "Blue": 45232,
      "Classification": 1,
      "EdgeOfFlightLine": 0,
      "GpsTime": 0,
      "Green": 48830,
      "Intensity": 620,
      "NumberOfReturns": 0,
      "PointId": 0,
      "PointSourceId": 29,
      "Red": 48316,
      "ReturnNumber": 0,
      "ScanAngleRank": 0,
      "ScanDirectionFlag": 0,
      "UserData": 0,
      "X": 34000.12,
      "Y": -27664.3,
      "Z": 20.46
    }
  },
  "reader": "readers.las"
}
  • 国土地理院の緯度、経度への換算というサービスで上記の"X"と"Y"の位置を調べます。

https://vldb.gsi.go.jp/sokuchi/surveycalc/surveycalc/xy2blf.html

  • 調査結果
  • 長崎駅とはずいぶん異なる位置(海の上)にプロットされます。

  • 平面直角座標系は、通常、Xが縦軸で、Yが横軸になりますが、一方で、3次元点群データは、"X"が数学的なX(横軸)、"Y"が数学的なY(縦軸)を意味することが原因のようです。
  • つまり、3次元点群データの"X"と"Y"を平面直角座標系に合わせて、逆にしてあげる必要があります。
  • X座標とY座標の入れ替えには、PDALとJSONを利用して軸を入れ替えます。
  • JSONを以下のとおり作成します。
[
  {
    "type": "readers.las",
    "filename": "01ke9821_translated.las",
    "spatialreference": "EPSG:6669"
  },
  {
    "type": "filters.reprojection",
    "in_srs": "EPSG:6669",
    "out_srs": "EPSG:6669",
    "in_axis_ordering": "2, 1"
  },
  {
    "type": "writers.las",
    "filename": "01ke9821_swaped.las",
    "forward": "header,scale,vlr",
    "offset_x": "auto",
    "offset_y": "auto",
    "offset_z": "auto"
  }
]
  • OSGeo4W Shellで、以下のコマンドを実行して、X座標とY座標を入れ替えます。
pdal pipeline xy_switch_pipeline.json
  • OSGeo4W Shellで、以下のコマンドを実行して、データの先頭に格納されているポイントの位置を確認します。
pdal info -p 0 01ke9821_swaped.las
  • 実行結果
  • X座標とY座標が入れ替わっていることを確認します。
{
  "file_size": 617952997,
  "filename": "01ke9821_swaped.las",
  "now": "2023-08-16T14:25:07+0900",
  "pdal_version": "2.5.2 (git-version: 57c4e7)",
  "points":
  {
    "point":
    {
      "Blue": 45232,
      "Classification": 1,
      "EdgeOfFlightLine": 0,
      "GpsTime": 0,
      "Green": 48830,
      "Intensity": 620,
      "NumberOfReturns": 0,
      "PointId": 0,
      "PointSourceId": 29,
      "Red": 48316,
      "ReturnNumber": 0,
      "ScanAngleRank": 0,
      "ScanDirectionFlag": 0,
      "UserData": 0,
      "X": -27664.3,
      "Y": 34000.12,
      "Z": 20.46
    }
  },
  "reader": "readers.las"
}

py3dtilesで3次元点群データを3DTilesに変換する

  • WSLのターミナルを起動して、以下のコマンドを実行して、3次元点群データを3DTilesに変換します。
  • なお、余談ですが、Windows環境では、以下のコマンドを実行してもエラーになるようです。
py3dtiles convert --srs_in 6669 --srs_out 4978 --out 01KE9821 01ke9821_swaped.las
  • 変換結果は以下のとおり、pntsファイルとjsonファイルが作成されます。
  • 3DTilesの表示では、tileset.jsonを使用します。
01KE9821:.
    r.pnts
    r0.pnts
    r06.pnts
    r064.pnts
    r0646.pnts
    r06463.pnts
    r06465.pnts
    r06466.pnts
    r06467.pnts
    (中略)
    tileset.1.json
    tileset.2.json
    tileset.4.json
    tileset.json

MapLibre GL JS + deck.glで3DTilesを表示する

  • MapLibre GL JSでは、直接、3DTilesを表示する機能は提供されていませんので、deck.glのMapboxOverlayを使ったインターリーブで3DTilesを表示します。
  • deck.glのMapboxOverlayを使ったインターリーブについては、Qiitaで記事「MapLibre GL JS + deck.gl + Google Photorealistic 3D Tilesを試す」を書いていますので、あわせてご確認ください。
<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/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet">
  <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
  <script src="https://unpkg.com/@loaders.gl/3d-tiles@^2.3.0/dist/dist.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script type="text/javascript">
    const map = new maplibregl.Map({
      container: 'map',
      style: 'std.json',
      hash: true,
      zoom: 16,
      center: [129.8671061, 32.7526307],
      pitch: 60,
      bearing: 0,
      attributionControl: false,
    })

    // ズーム・回転
    map.addControl(new maplibregl.NavigationControl());

    // フルスクリーンモードのオンオフ
    map.addControl(new maplibregl.FullscreenControl());

    // 現在位置表示
    map.addControl(new maplibregl.GeolocateControl({
      positionOptions: {
        enableHighAccuracy: false
      },
      fitBoundsOptions: { maxZoom: 18 },
      trackUserLocation: true,
      showUserLocation: true
    }));

    // スケール表示
    map.addControl(new maplibregl.ScaleControl({
      maxWidth: 200,
      unit: 'metric'
    }));

    // Attributionを折りたたみ表示
    map.addControl(new maplibregl.AttributionControl({
      compact: true,
      customAttribution: '<a href="https://twitter.com/shi__works" target="_blank">Twitter</a> | <a href="https://github.com/shi-works/nagasaki-point-cloud-map-on-maplibre-gl-js" target="_blank">Github</a> | <a href="https://opennagasaki.nerc.or.jp/" target="_blank">©オープンナガサキ</a> '
    }));

    map.on('load', () => {
      // MapboxOverlayを使ったインターリーブ
      // 3次元点群データ
      const overlay = new deck.MapboxOverlay({
        interleaved: true,
        layers: [
          new deck.Tile3DLayer({
            id: "tile3dlayer",
            pointSize: 2,
            data: 'https://xs489works.xsrv.jp/3dtiles/open_nagasaki/01KE9821/tileset.json', // 長崎県 3次元点群データ
            loader: Tiles3DLoader
          })
        ]
      });

      map.addControl(overlay);

    })
  </script>
</body>

</html>

  • デモサイトはこちらです。

https://github.com/shi-works/nagasaki-point-cloud-map-on-maplibre-gl-js

参考文献

https://qiita.com/nokonoko_1203/items/a8d58c12c31faf55a7f5

https://zenn.dev/nekoya3/articles/9686fab3c50990

Discussion