これはQiita アドベントカレンダー「OpenStreetMap Advent Calendar 2024」四日目の記事です。

はじめに

デジタルツインという言葉が技術者の中に浸透しつつある昨今、みなさまいかがお過ごしでしょうか。
国内では国土交通省が整備するProject Plateauが知名度を増しているほか、3Dあるいは2.5Dと言われる立体地図表示はいろいろなところで見られるようになってきました。

OpenStreetMapは地図タイルである以上にデータベースとして活用されており、建物のポリゴンによっては高さのデータを整備してあるものもあります。

このデータを活用して、大手のSaaS地図サービスと同様に立体(2.5D)地図として表示する方法が模索されてきました。

OpenStreetMapを3Dで見てみよう！

OpenStreetMapの愛好者がコミュニティにおいてよくお知らせしているサービスが「F4Map」です。

こちらはF4グループという会社組織によって運営されています。
OSSではなく、一部の3DモデルはF4よって提供されていたりと、生成されたタイルイメージなどは著作制作物として取り扱われていますが、CC-By-NCで利用できる媒体です。(非営利の活動に利用することができる)

東京タワーを見てみると以下のようになっています。

上記のデータはOSMからパースされていて、梁に当たる部分はbuilding=roofの属性が与えられており、工夫が垣間見えます。

このように、layerやroof:shapeを駆使した立体表現を通して、
地図としての実用性を損ねない程度に、表現をリッチにしていくというのもOpenStreetMapの一つの楽しみ方であり、OpenStreetMapのデータ拡充を理解する糸口になるかと思います。

OSM Buildingとは？

一方でMITライセンスとして提供されている3Dエンジンでは「OSM Building」が活用しやすいです。

開発自体は2020年で止まっているものの、現在もCDN経由で呼び出すことができるライブラリです。

サンプルコード


<head>
    <link href="https://cdn.osmbuildings.org/4.1.1/OSMBuildings.css" rel="stylesheet">

    <script src="https://cdn.osmbuildings.org/4.1.1/OSMBuildings.js"></script>

</head>

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



    <script>

        var map = new OSMBuildings({

            container: 'map',

            position: { latitude: 35.68997, longitude: 139.692461 },

            zoom: 16,

            minZoom: 8,

            maxZoom: 20,

            attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> © Map <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'

        })



        map.addMapTiles('https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png');

        map.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/59fcc2e8/tile/{z}/{x}/{y}.json');

    </script>

</body>

(公式サンプルのコードではタイルセットの読み込みまわりでコケたので改良した)

たとえば東京タワー周辺であればこのような感じで確認することができます。

F4Mapと比べるとややレンダリングのパフォーマンスが重く感じるのと、属性のパースが異なっていて、思ったような3Dオブジェクトが描画されない部分もあるものの、しっかりとOSMを立体化してくれています。

GeolocationAPIと組み合わせて、現在地の3Dモデルを表示するサンプル👇

このようにOpenStreetMapのデータを使って、気軽に3D表現を楽しむことができます。

2024年では様々シーンで使われるようになったWebGLを用いた地図表現が10年前には提供されていた、ということに、最近Web開発の世界に入った自分としては驚愕した次第です。

また、現在では、WebGLを基幹としたWeb地図ライブラリとしてはMapBoxGL JS や MapLibreGL JS、Cesium、Re:Earthなど選択肢が多くなっていて、身近に楽しめると思います。
日本語でのGet Start記事を有志が投稿されているので、ぜひ検索してみてください。

ライブラリ側だけではなく、地図データフォーマットとしても3DTilesやベクター形式での提供が徐々に広まっています。

OpenStreetMapもいろいろなところで活用シーンが広がれば、1マッパーとしても大変嬉しいです。

ちなみに

F4MapやOSMBuildingでは、OpenStreetMapのサーバーの負担が小さいように、定期的にOpenStreetMapからデータをクローンし、それぞれの管理するサーバーで3Dレンダリングに適したデータを生成しているようです。

本家のOpenStreetMapのサーバーにも言えることですが、サービス自体はフリーで提供していても、サービスの維持コストは馬鹿にならないことが多くあります。
様々な形でできる支援があるので、心に留めておいてもらえたら嬉しいです。

明日は AshMapさんのお話です。

ほなまた。