公共測量の数値地形図（DM）を WebGISで忠実かつ綺麗に描画する

Transcript

1. 公共測量の数値地形図（DM）を WebGISで忠実かつ綺麗に描画する 株式会社インフォマティクス 上村宗嗣 WebGIS で DM をきれいに表現する 1 / 20
2. 自己紹介 上村宗嗣（かみむら むねつぐ） 株式会社インフォマティクスで製品開発を行っています。自転車に乗るのが趣味です。 RideWithGPSで過酷なルートを探すのが喜び。 過酷なサイクリングをして メダルをもらうのがうれしい WebGIS で DM をきれいに表現する 2 / 20
3. 皆さん、DM って知ってますか？ Digital Mapping（デジタルマッピング／ディジタルマッピング） 「航空写真や現地測量から数値地形図を作る作業手法」で、 その成果物として「数値地形図データ」が出来上がる 見た目のルールは「公共測量標準図式」で定められている。 https://www.gsi.go.jp/gijyutukanri/gijyutukanri41018.html ⇒ 紙に印刷するための地図。 記号の寸法が全部 mm単位 で決まっている 公共測量標準図式に定められた一例 WebGIS で DM をきれいに表現する 3 / 20
4. DM ってどんな見た目？ 線に沿って記号が生えている。図式に「補助記号は自動発生して表示」と書いてある記号たち 人工斜面 長いケバと短いケバ。低い方を右 岩がけ 線そのものが山型になる 鉄柵 ×を 4 mm 間隔 生垣 波と点の交互 被覆 半円を 2 mm 間隔（＋点） 都府県界 破線 5 mm ＋ 隙間に矢羽根 ⇒ 飾りは作図ソフトが描く前提。その役を WebGIS にやらせたい WebGIS で DM をきれいに表現する 4 / 20
5. WebGIS でDMを見せたいときはどうする？ A. サーバーで画像にして ラスタータイルで配る 安定。ただ、配信データは大きめ。 データが更新されたらラスタタイ ルを作り直し B. ベクターで配信して スタイリングで頑張る 鮮明・軽い・クリックできる。ただし 記号の表現はWebGISライブラリ の仕様の範囲内 ⇒綺麗で速そうなBの方式で頑張ってみたい！ WebGIS で DM をきれいに表現する 5 / 20
6. MapLibre GL JSでDMをがんばる Mapbox GL JS v1 から fork した OSS（2020 年 末、BSD ライセンス） ベクタタイルをブラウザ側で描く Web 地図ライブラリ 見た目は Style JSON で定義。1 レイヤ ＝ 1 つの型（ type は 10 種類） ⇒ 今回、MapLibreでDMを表現してみたい https://maplibre.org/projects/gl-js/ WebGIS で DM をきれいに表現する 6 / 20
7. 線に記号を並べる方法は？ 手段 やってること 気になる点 line-pattern 画像を線に沿って隙間なく繰り返す 拡大でボケる。間隔を空けるには透明余白 symbol-placement: line アイコンを一定間隔に置く 衝突判定で間引かれる。剛体回転 ⇒ これらで何とかならないか試してみる WebGIS で DM をきれいに表現する 7 / 20
8. line-pattern で描いてみた ケバの画像を作って、線に沿って繰り返す なんか、違う。。。 • 角でケバが重なったり消えたりする • タイルの境目で間隔がズレる • mm の間隔を書く場所がない：周期は画像 px × 線幅比。線幅や小数ズームで勝手に伸縮する ⇒ 画像を作り直しても、間隔をいじって も直らない。図式の「X mm」を書く場所 もない WebGIS で DM をきれいに表現する 8 / 20
9. 次に symbol で並べてみた アイコンを symbol-spacing で線上に置く こちらも苦しい ⇒ タイルの境目でズレるのは linepattern と同じ。X mm も守れない WebGIS で DM をきれいに表現する 9 / 20
10. さっきの 2 つは、こう書いていた 本家の機能で寄せられる限り寄せた設定。 8 枚目: line-pattern 線に柄を貼る 9 枚目: symbol-placement: line 線に柄を並べる // ケバ画像: 幅=間隔 24px、高さ=ケバ長×2+2px、下半分だけに線 // （本家は画像の上端を進行左側に貼る → 右側に出すには下半分に描く） // pixelRatio 2 の高解像度画像でボケを抑える（できる範囲の対策） map.addImage("tick", img48x60, { pixelRatio: 2 }); // ケバ 1 本ぶんの画像（幅 6px・高さ 14px、pixelRatio 2） map.addImage("tick", img12x28, { pixelRatio: 2 }); { "type": "symbol", "source": "lines", "layout": { "symbol-placement": "line", "symbol-spacing": 24, // px。タイル生成ズームで確定 "symbol-avoid-edges": false, "icon-image": "tick", "icon-anchor": "top", // 上端を線に置き右側へ垂らす "icon-rotation-alignment": "map", // 線の向きに合わせて板を回す "icon-pitch-alignment": "map", "icon-keep-upright": false, "icon-allow-overlap": true, // 衝突判定で消さない "icon-ignore-placement": true, "icon-padding": 0 } } { "type": "line", "source": "lines", "layout": { "line-join": "miter", "line-cap": "butt" }, "paint": { "line-width": 30, // 画像の高さ＝線幅（ケバ長 14 + 余白） "line-pattern": "tick" // 線に沿って隙間なく繰り返す } } WebGIS で DM をきれいに表現する 10 / 20
11. 標準のスタイル定義だけだと実現はむずかしい v_linesofar（図の s）：線の始点から線に沿って足した距離（タイル座標単位）。角でも途切れず伸び続 ける タイル境界：次のタイルでは距離を 0 から数え直す → 柄が飛ぶ。lineMetrics で繋 ぐと周期が線長依存になり、今度は間隔が崩れる s=1200 s=0 に戻る pattern_pos = mod(v_linesofar, period) s=0 s=240 s=480 直線：距離どおりに柄が並ぶ。問題なし ⇒ 線の頭からpxで数えた距離を頼りに柄を貼っている。 ・間隔はmm指定、ケバなどを表現する長さもmm指定 ・タイルが切れても当然間隔は維持しないといけない WebGIS で DM をきれいに表現する 11 / 20
12. どうしようか？ DM を表現できる MapLibre のレイヤを作ってみよう！ MapLibre を fork して、レイヤ型を 1 つ追加する。 WebGIS で DM をきれいに表現する 12 / 20
13. 足したのが cartographic-line 線に沿って印を打ち、そこに記号の形を作る 線に沿って X mm ごとに印を打つ（メジャーを線に当 てていく感じ。距離は印の位置を決めるだけに使う） Worker 内のイメージ 印の場所に、記号の形そのものを頂点データで作る。 帯に柄を貼るのではなく、印ごとに「置く」 基線は既存の line に任せる。飾りだけこの型で重ね る • が印の場所 WebGIS で DM をきれいに表現する 13 / 20
14. スタイルはこう書く 図式表の mm をそのまま書く { "type": "cartographic-line", "filter": ["==", ["get", "分類コード"], 6141], "layout": { "cl-shape": "tick", // ケバ "cl-side": "right", // 敷地側 "cl-interval": 4.0, // 4.0 mm 間隔 "cl-length": 0.5, // 0.5 mm "cl-stroke-width": 0.15, // 線の太さ 0.15 mm "cl-base-scale": 500 // 縮尺分母 }, "paint": { "cl-color": "#111" } } 図式表に「4 mm 間隔、長さ 0.5 mm」と 書いてあれば、そのまま書く cl-base-scale は縮尺分母。「これは 1/500 の紙の 上の mm ですよ」という宣言 各プロパティの意味（図式: 堅ろう塀 6141 ＝ 4 mm 間隔・長さ 0.5 mm） cl-interval 4.0 mm 印の間隔 基線（line） cl-length 0.5 mm ケバの長さ（線に垂直） cl-stroke-width 0.15 mm ケバ線そのものの太さ ※ どれも「cl-base-scale の縮尺の紙の上の mm」。0.5 mm × 500 ＝ 地上 0.25 m WebGIS で DM をきれいに表現する 14 / 20
15. タイルの境目はどうする？ ⇒ 断片は「元の線の何 % から何 % か」を知っている（lineMetrics オプション） ⇒ それで切る前の距離に戻して印を打つ ⇒ どのタイルでも同じ目盛り。継ぎ目でも 4 mm WebGIS で DM をきれいに表現する 15 / 20
16. 描いてみた 同じ線・同じ間隔で 3 通り。ヘアピン、8 の字、ジグザグ。点線はタイルの境目 × 標準の line-pattern WebGIS で DM をきれいに表現する × 標準の symbol ◦ 改修版 cartographic-line 16 / 20
17. 実データで描いてみた 改修版 本家 MapLibre v5.22.0 の標準機能で寄せた版 数値地形図出典：https://www.city.kawasaki.jp/500/page/0000138658.html WebGIS で DM をきれいに表現する 17 / 20
18. 印刷して定規で測ってみる WebGIS で DM をきれいに表現する 18 / 20
19. おわりに ベクターデータで、図式どおりの DM が（頑張ったら）描けた。 日本の行政で使われる細かい表現に対応されたWebGISがあると幸せになれるシーンは多そう。 WebGIS で DM をきれいに表現する 19 / 20
20. ご清聴ありがとうございました WebGIS で DM をきれいに表現する 20 / 20