ArcGISのベースマップとTerrain-RGBの組み合わせ

はじめに

MapLibre GL JS から Terrain-RGB のサービスを使用した記事が幾つか公開されており、ArcGIS で配信しているベースマップのサービスと一緒に使用して表現できるのではないかと思い、試してみました。

Terrain-RGB はもともと Mapbox が提供しているラスタータイルセットのようで、標高値を所定のルールで RGB 値にエンコードした画像とのことです。

docs.mapbox.com

RGB 値を標高値にデコードする方法や標高値の取得については、以下が参考となります。 docs.mapbox.com

また、Terrain RGB は、MapTiler のサービスもあったり、詳しくは以下の Qiita の記事が参考になります。 qiita.com

Terrain-RGB を対応している製品として、QGIS や MapLibre GL JS などのアプリケーションやツールで利用できます。ですので、今回は、MapLibre GL JS から ArcGIS のロケーションサービスと Terrain RGB を利用してみました。

Terrain-RGB に関しては、変換用のライブラリが公開されていたり、MapLibre GL JS から Terrain-RGB を使用した記事も公開されています。今回は、産総研（国立研究開発法人産業技術総合研究所地質情報研究部門シームレス地質情報研究グループ）が公開している Terrain-RGB 変換サービス(試験公開) を使用させていただきました。

gsj-seamless.jp

ArcGIS のベースマップを利用

MapLibre GL JS を利用して、Terrain-RGB と ArcGIS のベースマップを組み合わせることで、よりリアルな標高データを表現することができました。 ArcGIS では、ArcGIS Location Platform を利用することで、無償から ArcGIS のサービスを利用することができます。特にベースマップは、他のサービスに比べて非常に豊富なベースマップが用意されており、自由に組み合わせて使用することが可能です。OSM などの OpenStreetMapも利用することができます。ArcGIS で使用できるベースマップの種類（スタイル）については、以下のサイトが参考になるかと思います。

developers.arcgis.com

MapLibre GL JS での利用方法

はじめに、MapLibre GL JS でベースマップを指定します。今回は、ベースマップのスタイルとして、ArcGIS Imagery を使用しました。

MapLibre GL JS から ArcGIS のロケーションサービスの利用方法については、Esri Developer の MapLibre GL JS をご参照ください

const apiKey = "API Key";
const basemapEnum = "arcgis/imagery";

const map = new maplibregl.Map({
  container: "map", // the id of the div element
  style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${apiKey}&language=local`,
  zoom: 12, // starting zoom
  //center: [139.776476, 35.660709] // starting location [longitude, latitude]
  center: [138.76069, 35.34967], // starting location [longitude, latitude]
  pitch: 70,
  hash: true
});

次に標高タイルですが、地理院タイルから Terrain-RGB 変換サービス (試験公開)を使用して表示しました。Terrain-RGB 変換サービス(試験公開)に MapLibre GL JS での利用方法が紹介されていましたので、そちらを使用しました。

map.on('load', () => {
  // 標高タイルソース
  map.addSource("gsidem-terrain-rgb", {
      type: 'raster-dem',
      tiles: [
            'https://gsj-seamless.jp/seamless/elev/php/terrainRGB.php?url='
                + 'https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png',
      ],
      attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html#dem" target="_blank">地理院タイル(標高タイル)</a>',
      tileSize: 256
  });

  // 標高タイルセット
  map.setTerrain({ 'source': 'gsidem-terrain-rgb', 'exaggeration': 2 });
});

全体のソースコードは以下となります。

<!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developers dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

-->
<html>
  <head>
    <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">
    <title>MapLibre GL JS Tutorials: Terrain-RGB を ArcGIS から使ってみる。</title>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>

    <script src='https://unpkg.com/maplibre-gl@4.4.1/dist/maplibre-gl.js'></script>
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.4.1/dist/maplibre-gl.css' />

  </head>

  <body>
    <div id="map"></div>

    <script>

    const apiKey = "<API KEY>";
    const basemapEnum = "arcgis/imagery";

    const map = new maplibregl.Map({
      container: "map", // the id of the div element
      style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${apiKey}&language=ja`,
      zoom: 12, // starting zoom
      //center: [139.776476, 35.660709] // starting location [longitude, latitude]
      center: [138.76069, 35.34967], // starting location [longitude, latitude]
      pitch: 70,
      hash: true
    });
    
    map.on('load', () => {
      // 標高タイルソース
      map.addSource("gsidem-terrain-rgb", {
          type: 'raster-dem',
          tiles: [
                'https://gsj-seamless.jp/seamless/elev/php/terrainRGB.php?url='
                    + 'https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png',
          ],
          attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html#dem" target="_blank">地理院タイル(標高タイル)</a>',
          tileSize: 256
      });

      // 標高タイルセット
      map.setTerrain({ 'source': 'gsidem-terrain-rgb', 'exaggeration': 2 });
    });

      // ズーム・回転
      map.addControl(
        new maplibregl.NavigationControl({
            visualizePitch: true,
            showZoom: true,
            showCompass: true
        })
      );
      
      // スケール表示
      map.addControl(new maplibregl.ScaleControl({
          maxWidth: 200,
          unit: 'metric'
      }));

      // 3D地形コントロール表示
      map.addControl(
        new maplibregl.TerrainControl({
            source: 'gsidem-terrain-rgb',
            exaggeration: 2
        })
      );

    </script>
  </body>
</html>

youtu.be

ちなみに ArcGIS では標高レイヤーとして、Terrain3D の Elevation Layer が提供されています。

pro.arcgis.com

こちらは、CesiumJS のサービスとて使用することができます。 cesium.com

まとめ

MapLibre GL JS から Terrain-RGB と ArcGIS のベースマップを使用することで、よりリアルな標高データを表現することができました。ArcGIS のベースマップは標準でも多くのベースマップの種類を利用することができるので、色々な組み合わせでリアリティな表現ができるのではないかと思いました。

以上、参考となれば幸いです。