Maplibre+TerrainRGBで栃木県の山を立体表示してみた

先日、林野庁から、栃木県、兵庫県、高知県のデータが公開されました。
[森林の未来を導く森林情報サイト～羅森盤～](http://rashinban-mori.com/pc/public/)

各種データは、G空間情報センターに登録されています。

参照用のWebGISのページもあります。

[令和5年度林野庁委託事業 森林情報WEB-GIS公開実証](https://webgis-rashinban-mori.com/)

その中で、TerrainRGBが公開されていたので、栃木県の山を立体的に表示してみようと思います。

![スクリーンショット 2023-10-20 17.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/241a94b5-ad0a-7339-5051-f3b0baf71334.png)





残念ながらTerrrainRGBはG空間情報センターのページにはないようですが、

ブラウザのデバッグツールのNetworkを除くと

```
https://rinya-tochigi.geospatial.jp/2023/rinya/tile/terrainRGB/8/227/99.png
```
最大拡大してみてもZoomレベル18まで配信されています。

```
https://rinya-tochigi.geospatial.jp/2023/rinya/tile/terrainRGB/18/232645/102246.png
```
G空間情報センターのドメインgeospatiol.jpから配信されているようなので、このTerrainRGBを使います。

地図の表示には、MapLibreを使用します。

本家にサンプルがあるので見本にします。
[3D Terrain - MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/)

地理院の衛星写真を背景にして

栃木県の男体山が見える初期位置に調整します。
ソースは以下のとおりです。

```json
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>3D Terrain確認（栃木）</title>
    <meta property="og:description" content="Go beyond hillshade and show elevation in actual 3D." />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = (window.map = new maplibregl.Map({
        container: 'map',
        zoom: 15,
        center: [139.49997,36.75429],   //栃木県 男体山が見える用調整
        pitch: 70,
        bearing: -45,
        hash: true,
        style: {
            version: 8,
            sources: {
                gsi: {
                    type: 'raster',
                    tiles: ['https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'], //衛星写真
                    tileSize: 256,
                    attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>',
                    maxzoom: 19
                },
                terrainSource: {
                    type: 'raster-dem',
                    tiles: ["https://rinya-tochigi.geospatial.jp/2023/rinya/tile/terrainRGB/{z}/{x}/{y}.png"], //G空間情報センター 栃木のTerrainRGB
                    tileSize: 256,
                    attribution: '<a href="https://www.geospatial.jp/ckan/dataset/dem05_tochigi" target="_blank">栃木県</a>',
                    minzoom: 0,
                    maxzoom: 12,
                    bounds: [-180, -85.05112877980659, 180, 85.0511287798066],
                    center: [0, 0, 6]
                }
            },
            layers: [
                {
                    id: 'gsi',
                    type: 'raster',
                    source: 'gsi'
                }
            ],
            terrain: {
                source: 'terrainSource',
                exaggeration: 1
            }

        },
        maxZoom: 18,
        maxPitch: 85
    }));

    map.addControl(
        new maplibregl.NavigationControl({
            visualizePitch: true,
            showZoom: true,
            showCompass: true
        })
    );

    map.addControl(
        new maplibregl.TerrainControl({
            source: 'terrainSource',
            exaggeration: 1
        })
    );
</script>
</body>
</html>
```

![スクリーンショット 2023-10-20 18.09.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/c64dbfcb-c7ee-f4ce-8ba6-c6f40700b1a7.png)

うまく表示できました。

やはり山が立体で見えるのは良いですね。

ただ気になる点もあります。

中禅寺湖の半分が切れている、標高が極端に低くなっています。

![スクリーンショット 2023-10-20 18.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/a19cb181-21a5-8601-faa2-8badb62b5af7.png)

想像できる理由としては、

- 林野部門が整備したデータなので山が専門、水部分は守備範囲外。
- 航空レーザー測量の関係で、水部は、NodataになっておりTerrainRGBの0＝-10000になってしまっている。

栃木県自体が台地状になっている。Terrainデータが無いところは、-10000になっているので、Nodataなのかと想像します。

![スクリーンショット 2023-10-20 18.17.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/95b4b929-ad87-cdb1-5530-4c970baea089.png)

ちなみにTerrainRGBの計算式は

```json
height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)
```

TerrianRGBについては、こちらの記事で詳しく解説してくれてます。

[地理院タイルとdeck.glで3D地図をつくろう - Qiita](https://qiita.com/Kanahiro/items/e22594b738655a189c1d#rgb値の標高換算)