Help us understand the problem. What is going on with this article?

地理院標高タイル+傾斜量タイルでつくるCS立体図もどき

More than 1 year has passed since last update.

はじめに

2016年末に 地理院標高タイルと Leaflet でつくるCS立体図 というエントリを書いたのですがその後データの供給サイドではいろいろと変化がありました。

前のエントリの際はテキスト形式のDEMを使用してブラウザ上でCS立体図を作る方法を紹介したのですが、割ときまじめに実装したので応答速度面では不利でした。 北海道CS立体図 のように直接タイルを提供する流れも出てきているので、CS 立体図自体の利用はしやすくなってきています。

このエントリでは傾斜量図と標高タイル(PNG形式)を使って、CS立体図もどき を作った話を紹介します。

注意: このエントリで紹介する方法は「もどき」です。オリジナルの CS 立体図の作成手順を踏襲していないのでご注意ください。

できあがり

こんなかんじで動くものができました。CSS filter (blur)、CSS mix-blend-mode に依存しているので IE なんかでは動きません。

image

解説

傾斜量 / Slope

以前はテキスト形式の DEM を何枚か取得して計算していた傾斜量ですが、そのものずばりの傾斜量図タイルが提供されているので、これを利用させてもらいました。

image

単独で表示すると平坦が白、急峻が黒、というようにモノクロで塗り分けられていることがわかります。これだけだと谷・尾根が区別しにくいですね。

曲率 / Curvature

CS 立体図のキモは曲率レイヤーの生成で、計算方法や平滑化などパラメータが多いです。もっと詳しく知りたい方は つくばFOSS4Gもくもく会・CS立体図勉強会 を参照してください。

このエントリの方法では以下のような手順で Curvature レイヤを作成しています。

  1. 256x256 標高 PNG タイルを取得
  2. 4x4 ごとに曲率を計算し、 64x64 Curvature タイルを生成
  3. 2 のタイルを画面上に追加
  4. タイル全体のコンテナに対して filter:blur を適用して全体をぼかす(=ガウス平滑化)

ちなみに 3. の段階はこのようなモザイク画像です。(画像は IE のもの、IE は blur が使えないので 4 の効果がかかりません)

image

blur に対応したブラウザでは、このようにぼんやりとした画像が表示されているはずです。

image

合成 / Slope + Curvature

Slope の上に Curvature を載せることでこのように立体感のある表現になりました。ざっくりいうとモノクロ画像に対して、谷部分を寒色、尾根部分に暖色を塗ってものすごくぼかしたものです。

image

さらに合成 / 地図 + Slope + Curvature

Slope レイヤは不透明画像なので、地図の上に重ねると地図が消えてしまうのですが、 CSS mix blend mode : multiply を指定することで白:透過/灰:半透明/黒部分が不透明になるように、画像の合成方法を変えることができます。その結果こんな表現が可能になります。(再掲)

image

まとめ

標高PNGタイルや傾斜量PNGタイルを使って CS 立体図もどきを作った話を紹介しました。
サーバの立場とすると CS 立体図をタイル配信するのがよいのか、DEM や傾斜量といった形で提供するのがよいのかは判断分かれると思うのですが、クライアントとしてはたぶんどちらでも処理できそうだし、サーバクライアントによらずいろいろな表現技法を開拓していければいいな、と思います。

追記 (2017/04/06)

Curvature レイヤ生成の手法を応用して css-mix-blend-mode を使わずに Slope レイヤを合成できるように実装を変更しました。 css-mix-blend-mode 未対応の IE でも合成画像を見ることができます(ただし IE は blur に対応していないので、Curvature 部分がモザイク調になるのは相変わらずです)。

image

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away