Maplibre

IIIF Georeference Extension JSONからXYZタイルを生成し、MapLibre GL JSで表示するツール。 リポジトリ : https://github.com/nakamura196/iiif-georef-tiles GitHub Pages : https://nakamura196.github.io/iiif-georef-tiles/ 必要環境 Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) GDALのインストール # b # s r u m e U d a w b o c u O i n a S n t p s u t ( t / H a D i o l e n m l b s e i t b g a a r d n l e a l w l ) g d a l - b i n p y t h o n 3 - g d a l 使用方法 p y t h o n 3 s c r i p t s / i i i f _ g e o r e f _ t o _ t i l e s . p y < I I I F _ G E O R E F _ J S O N _ U R L > 例 p y t h o n 3 s c r i p t s / i i i f _ g e o r e f _ t o _ t i l e s . p y h t t p s : / / n a k a m u r a 1 9 6 . g i t h u b . i o / i i i f _ g e o / c a n v a s . j s o n オプション オプション デフォルト 説明 --scale 0.25 画像の縮小率 --zoom 14-18 タイルのズームレベル範囲 --output-dir docs 出力ディレクトリ --name tiles タイルフォルダ名 --work-dir work 作業用ディレクトリ --keep-work - 作業用ファイルを削除しない 処理の流れ I ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ I ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ I ─ 1 ─ ─ 2 ─ ─ 3 ─ ─ 4 ─ ─ 5 ─ ─ 6 ─ F ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ G ─ J ( ─ ─ 画 ( ─ ─ G ( ─ ─ 座 ( ─ ─ タ ( ─ ─ H ( ─ e ─ S U ─ ─ 像 I ─ ─ C g ─ ─ 標 g ─ ─ イ g ─ ─ T M ─ o ─ O R ─ ─ を I ─ ─ P d ─ ─ 変 d ─ ─ ル d ─ ─ M a ─ r │ ▼ ─ N L ─ │ ▼ ─ ダ I ─ │ ▼ ─ を a ─ │ ▼ ─ 換 a ─ │ ▼ ─ 生 a ─ │ ▼ ─ L p ─ e ─ を か ─ ─ ウ F ─ ─ 埋 l ─ ─ l ─ ─ 成 l ─ ─ ビ L ─ f ─ 取 ら ─ ─ ン ─ ─ め _ ─ ─ w ─ ─ 2 ─ ─ ュ i ─ e ─ 得 f ─ ─ ロ I ─ ─ 込 t ─ ─ a ─ ─ t ─ ─ ー b ─ r ─ e ─ ─ ー m ─ ─ み r ─ ─ r ─ ─ i ─ ─ ア r ─ e ─ t ─ ─ ド a ─ ─ a ─ ─ p ─ ─ l ─ ─ 生 e ─ n ─ c ─ ─ g ─ ─ n ─ ─ ) ─ ─ e ─ ─ 成 ─ c ─ h ─ ─ │ e ─ ─ s ─ ─ ─ ─ s ─ ─ G ─ e ─ ) ─ ─ ─ ─ l ─ ─ ─ ─ . ─ ─ L ─ ─ ─ ─ A ─ ─ a ─ ─ ─ ─ p ─ ─ ─ J ─ ─ ─ P ─ ─ t ─ ─ ─ ─ y ─ ─ │ J ─ S ─ ─ ─ I ─ ─ │ e ─ ─ ─ ─ │ ) ─ ─ S ─ O ─ ─ ─ ) ─ ─ ) ─ ─ │ ─ ─ ─ ─ ) ─ N ─ │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ ┘ ┐ │ ┘ ┐ │ ┘ ┐ │ ┘ ┐ │ ┘ ┐ │ ┘ 変換結果 元画像 地理参照後 出力ファイル d ├ ├ └ o ─ ─ ─ c ─ ─ ─ s / i s t ├ ├ ├ ├ └ n o i ─ ─ ─ ─ ─ d u l ─ ─ ─ ─ ─ e r e x c s 1 1 1 1 1 . e 4 5 6 7 8 h . / / / / / t j m s l o n # # # M 元 X a の Y p I Z L I タ i I イ b F ル r e G e G o L r e J f S e ビ r ュ e ー n ア c e J S O N ローカルで確認 c # d h d t o t c p s : / & / & l o p c y a t l h h o o n s 3 t : - 8 m 0 0 h 0 t / t p を . 開 s く e r v e r 8 0 0 0 IIIF Georeference Extension IIIF Georeference Extensionは、IIIF画像に地理参照情報を付与するための拡張仕様です。 ...

本記事はAIが作成し、人間が追記しました。 概要 IIIF Georeference ViewerにおけるマップコンポーネントをLeafletからMapLibre GLへ移行し、複数の機能改善を実施しました。本記事では、実装した主要な機能とその技術的詳細について説明します。 https://nakamura196.github.io/iiif_geo/ 主要な改善点 1. 画像の自動回転機能 IIIF画像を地図上に正しい向きで表示するため、コントロールポイント（対応点）から自動的に回転角度を計算する機能を実装しました。 機能概要 画像座標と地理座標の対応点から、画像を北が上になるように回転させる角度を自動計算 2点間または3点以上の分布パターンから最適な回転角度を決定 URLパラメータによる回転角度の保存と復元 実装のポイント e } x p c ) c c c r u o ; o o o e t r n f n n n t i t 最 s . 画 s s 北 s u l も t p 像 t t を t r s f 離 r 座 基 n / u れ v o 標 i g 準 r c n た a p 系 m e と o n a c 2 l e で g o し t o l t 点 i r の V V た a r c i を d t ベ e e 角 t m u o 見 F i ク c c 度 i a l n つ e e ト t t の o l a け a s ル o o 差 n i t c る t ? と r r を D z e a （ u . 地 計 e e I l よ r r 理 = = 算 g A m c り e e 座 n a u 正 s s 標 { { = g g l 確 o 系 l e a な = u で x x g e R t 角 r の : : e ( o e 度 f c ベ o r t I 計 e e ク i g A o a m 算 a C ト m e n t t a の t o ル g o g a i g た u o か 2 2 l t o e め r r ら . . e i n R ） e d 回 x l F o . o s s 転 n r n t t . 角 - g o D s a f & 度 m e t i & を i - N g i l 計 m o ) o t f 算 g g r ; n e . 1 e t ( r g . o h f ( e x 1 D e ( o , . e a f m l g t ) e y n u t : g - r = r , e > y i i s ? m y m : . g : g c 2 A F o . g n e o y e g a r o l t d - 2 e u i . D r n i l e e a m a g [ t g t ; ] e 1 ) s . - : y g R } e o ; o t 1 a . t l i a o t n C } a ; l c u l a t i o n R e s u l t | n u l l { UI実装 自動回転ボタン（🔧アイコン）をOSDビューアーに配置 rotationパラメータが未指定の場合は自動的に回転角度を計算 手動での角度調整用スライダーも提供 2. LeafletからMapLibre GLへの移行 移行の背景 パフォーマンス向上 : MapLibre GLはWebGLベースのレンダリングにより、大量のマーカー表示時のパフォーマンスが向上 スムーズなアニメーション : 地図の移動やズーム時のアニメーションがより滑らかに ベクタータイルのサポート : ラスタータイルに加えてベクタータイルの表示が可能 実装のポイント i i c m } m m o a ) p p n p c s c z a ; o o s M I o t e o t r r t a n n y n o t t t p s t l t m r m L t a e e : i { " a i a i : r b m p b n n : z u M a I r c e m o t a p n e e r a i o i p l s . : p n m o , i t G v S i _ n b a L a m t t . C N r n 初 l a y i v o a e c 期 u p l a a n v - e 化 e C e l l t i g o s C u r g l = = n . e e o a / t v n , l t d r n a a t : i i e e i l e o s f w n u r f n t < e e , a C M M r [ l m a a . 0 s n a p p v ] e t p ( a . r l | { l s o i u t l b n e y , r u ! l e l , e M - l , a g > r l ( k . n e c u r s l , s l " ) P ; ; o p u p } f r o m " m a p l i b r e - g l " ; 3. 現在地表示機能 ブラウザのGeolocation APIを使用して、ユーザーの現在地を地図上に表示する機能を実装しました。 ...

概要 「れきちず x Next.js」サイトにルートの登録機能を追加しました。以下が表示例です。 参考 「れきちず x Next.js」サイトについては、以下で紹介しています。 この「れきちず」を使ってルートを表示する先行事例として、以下が挙げられます。 https://codh.rois.ac.jp/edomi/route/ 今回は上記の事例を参考に、ルートを作成する機能を追加しました。 使い方 サイトにアクセスします。 https://rekichizu-next.vercel.app/ja/ 「マイルートを管理」をクリックします。 ログインが求められますので、画面右上のボタンからログインします。 「新しいルートを作成」から、ルートを作成します。 以下が編集画面です。 編集アイコンをクリックすると、ルートのタイトルおよび説明を編集できます。 モードを「追加」に設定すると、地図上でクリックした箇所にピンが立ちます。ドラッグ&ドロップで移動させることも可能です。 マーカーはドラッグ＆ドロップで順序変更することができます。 インポートとエクスポート エクスポート ルートの一覧画面と編集画面にダウンロードボタンを設置しています。以下のようなJSONファイルがダウンロードされます。 { } " " ] t f y e { } { } { } p a , , e t " " } " } " " } " } " " } " } " u t p , g t p , g t p , g : r y r " " " " e " " ] y r " " " " e " " ] y r " " " e " " ] e p o i t w t o t c p o i t w t o t c p o i p t o t c " s e p d e h y m y o 1 3 e p d e h y m y o 1 3 e p d a y m y o [ ] [ ] F " " e " x e p e p o 3 5 " e " x e p e p o 3 5 " e " t p e p o , e : : r : t r e t e r 9 . : r : t r e t e r 9 . : r : h e t e r 1 3 1 3 a t " e " r " d . 7 t " e " r " d . 7 t " " r " d 3 5 3 5 t [ " i " : " : y : i 7 0 " i " : " : y : i 7 1 " i " : : y : i 9 . 9 . u F e 1 : " n 6 7 F e 1 : " n 7 2 F e 1 " n . 7 . 7 r e s 7 " " : " a 8 7 e s 7 " " : " a 0 1 e s 7 " " : " a 7 0 7 1 e a " 4 湯 " p P t 0 0 a " 4 不 " p P t 5 0 a " 4 [ l L t 6 7 7 2 C t : 4 島 神 o { o e 9 2 t : 4 忍 池 o { o e 0 4 t : 4 1 i { i e 8 7 0 1 o u 6 天 社 i i s 9 0 u 6 池 " i i s 6 9 u 6 7 n n s 0 0 5 0 l r { 3 神 " n n " 2 1 r { 3 " , n n " 8 9 r { 3 4 e e " 9 2 0 4 l e 9 " , t t : 1 3 e 9 , t t : 1 4 e 9 4 " S : 9 0 6 9 e " 5 , " " 4 8 " 3 " " 0 9 " 5 6 t 2 1 8 9 c , 5 , [ 7 1 , 7 , [ 3 6 , 5 3 r [ 1 3 1 4 t 1 0 7 9 4 9 1 9 i 4 8 0 9 i 5 0 1 9 1 1 5 5 n 7 1 3 6 o 6 5 5 0 0 5 6 5 g 0 7 4 9 n 3 6 5 3 3 3 1 " 0 1 1 1 " " , " , - 5 , 5 5 0 5 , , , 1 6 6 5 3 7 3 , , 4 ] 4 6 3 9 3 [ 7 1 9 7 9 4 0 4 3 6 " 3 , 9 3 7 9 9 0 3 ] " , これをgeojson.ioに貼り付けると、以下のように表示されます。 ...

概要 れきちずをNext.jsで使用する方法を調べてみましたので、備忘録です。 背景 以下の記事で、「れきちず」の使い方を紹介しました。 そして、2025年4月4日に「全国版が公開」されたことを知りました。 https://rekichizu.jp/ そこでNext.jsを用いて作成したアプリケーションへの導入にあたり、その使い方を調べてみました。 デモアプリ 以下のようなアプリケーションを試作しました。 https://rekichizu-next.vercel.app/ja/ 使用方法の調査にあたり、公式サイトで提供されている地図の切り替えや重ね合わせ機能、および検索機能などを再現することを目的としました。この実装にあたり、以下のReactライブラリを使用しました。 https://visgl.github.io/react-maplibre/ 開発メモ 検索機能 検索機能には、GeoLODのAPIを利用させていただきました。なお、「れきちず」の公式サイトでは、専用の検索APIが用いられているようでした。 https://geolod.ex.nii.ac.jp/doc/api/ react-maplibre 本ライブラリを使用して、やりたいことの多くを実現できました。一方、TerrainControlではTerrainのON/OFFと合わせてピッチを変更することが難しい？、useMapではaddLayer/removeLayerが難しい？など、いくつか苦労した点もありました。 まとめ 「れきちず」およびNext.jsを用いたアプリケーション開発にあたり、参考になりましたら幸いです。 「れきちず」の開発に関わる方々に深く感謝いたします。