Gis

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画像に地理参照情報を付与するための拡張仕様です。 ...

概要 以下の記事で、IIIFの機能を簡単に試すことを目的とした「画像コレクション管理」ツールについて紹介しました。 今回は、このツールの裏側で使われている技術について紹介します。 はじめに 画像コレクション管理ツールは、画像コレクションを国際標準規格であるIIIF（International Image Interoperability Framework）形式で管理・公開するためのWebアプリケーションです。本記事では、このツールの技術的な実装について、特にIIIF仕様の実装と地理空間情報の扱いに焦点を当てて解説します。 技術スタック フロントエンド : Next.js 14 (App Router), React, TypeScript バックエンド : Next.js API Routes データストレージ : AWS S3互換オブジェクトストレージ（Cloudflare R2） 認証 : NextAuth.js 地図表示 : Leaflet, MapLibre GL JS IIIF ビューア : Mirador 3, OpenSeadragon IIIF実装の詳細 1. IIIF Presentation API v2/v3の両方をサポート 本ツールは、IIIF Presentation APIのバージョン2とバージョン3の両方に対応しています。これにより、様々なIIIFビューアとの互換性を確保しています。 v2とv3の主な違い { } { } " " " " " } " " " " " I @ @ @ l s ] I @ i t l i I c i t a e " " I c d y a t I o d y b q @ c I o " p b e F n " p e u t a F n : e e m t : e l e y n t " l s v e " " n p v v e " : " " 2 x " : : c e a 3 x h : : の t h e " s の t t " 構 " t " " s : e 構 " t M { [ 造 : t s タ " s 造 : p a . p c イ : " " s n " . " s : ト s : " : i j . h : M ル [ c h / f a ] t / a " { : [ t / e " t / n , S . t e s : p e i e . p x t : x f q . : a " [ / a e u ] / m , " c / m s e / p タ a i p t n i l イ n i l " c i e ト v i e , e i . ル a f . " f c " s . c , . o ] の i o i m 配 o m o } 列 / / m , a m a a p a p n i n i i / i / f p f p e r e r s e s e t s t s " e " e , n , n t t a a t t i i o o n n / / 2 3 / / c c o o n n t t e e x x t t . . j j s s o o n n " " , , 2. マルチ言語対応 v3では、ラベルや説明文を言語別に管理できます： ...

本記事は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を使用して、ユーザーの現在地を地図上に表示する機能を実装しました。 ...

概要 IIIF georeference extensionの可視化ツールの改修を行いましたので備忘録です。 以下で公開しているツールです。 https://github.com/nakamura196/iiif_geo 以下のように、現代地図と画像の並列表示機能を提供します。 改修内容 IIIF georeference extensionに基づくデータ作成を支援するツールとして、Allmapsがあります。 https://allmaps.org/ 以下で使い方を紹介しています。 今回の改修では、上記ツールで作成されるデータを読み込めるようにしました。 https://annotations.allmaps.org/images/2e1d3f991aad6cb4 以下が表示例です。 https://nakamura196.github.io/iiif_geo/ja?u=https://annotations.allmaps.org/images/2e1d3f991aad6cb4 まとめ IIIF georeference extensionの応用にあたり、参考になりましたら幸いです。

概要 「Peripleo」を使う方法を調べましたので、備忘録です。「Peripleo」は以下のように説明されています。 Peripleo is a browser-based tool for the mapping of things related to place. https://github.com/britishlibrary/peripleo 今回は以下の記事で紹介した「れきちず」と組み合わせて、使用する方法について紹介します。 成果物 以下のURLでお試しいただけます。 https://nakamura196.github.io/peripleo/ リポジトリは以下です。 https://github.com/nakamura196/peripleo 本ブログでは、以下の『東京帝國大學本部構内及農學部建物鳥瞰圖』(東京大学農学生命科学図書館所蔵）をサンプルデータとして使用します。 https://iiif.dl.itc.u-tokyo.ac.jp/repo/s/agriculture/document/187cc82d-11e6-9912-9dd4-b4cca9b10970 背景 以下の会議に参加し、「Peripleo」について教えていただきました。「Peripleo」を開発してくださっている関係者の皆様、会議を開催してくださった皆様、また使用方法を教えてくださったGethin Rees氏に感謝いたします。 http://codh.rois.ac.jp/conference/linked-pasts-10/ 基本的な使い方 以下に記載があります。 https://github.com/britishlibrary/peripleo?tab=readme-ov-file#installation-guide 今回は、『東京帝國大學本部構内及農學部建物鳥瞰圖』のデータを利用するにあたり、カスタマイズした点について紹介します。 データの準備 以下のようなスプレッドシートを用意します。 https://docs.google.com/spreadsheets/d/1ZZJZL0K4cBOc0EgMHNV9NQ56C_fcZm0eceBg_OPmxe4/edit?usp=sharing 灰色のセルは不要な列です。 データの準備ができたら、CSV形式でダウンロードします。 JSON形式への変換 Locolligoというツールを用いて、CSVのデータをJSON形式のデータに変換します。 https://github.com/docuracy/Locolligo まず、以下にアクセスします。 https://docuracy.github.io/Locolligo/ CSVファイルをアップロード後、「Assign CSV Columns」を押すと、以下が表示されます。 予約語をCSVのヘッダーに使用しておくと、手動でマッピングする必要がないようでした。うまくマッピングされなかった場合には、手動で設定します。 なお、予約語は以下で確認できました。 https://github.com/docuracy/Locolligo/blob/main/js/data-converter.js f u $ v ] n ( a [ [ [ [ [ [ [ [ [ [ [ [ [ [ [ [ [ ; c ' r ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' t # ( @ p p g g g n l l d d d d t t { i a a i i r r e e e a i i e e e e y y c o s s g d o o o o o m n n p p s s p p u n s s n ' p p m m m e k k i i c c e e s i i o , e e e e e s s s c c r r s s t a g g r ' r r t t t [ [ [ t t i i [ [ o s n n e i t t r r r 0 0 0 i i p p 0 0 m s ' m ) d i i y y y ] ] ] o o t t ] ] } i ) e ' e e e . . . . . . n n i i . . ' g . n ] n s s c c c t t i s s o o i l ] n r t , t . . o o o o y d [ [ n n d a ( e O i t % o o o p p e 0 0 s s e b ) m p f i % r r r o e n ] ] [ [ n e { o t i t % d d d n ' t . . 0 0 t l v i e l ' i i i y ] i @ t ] ] i ' e o r e ] n n n m , f i i . . f ] C n ' , a a a ' i d t @ v i , l s u , t t t , e ' l i a e a u ' e e e ' r ] e d l r s = i t s s s t ' , ' ' u ' s d i ' [ [ o ] ] ] e ] ( [ | t , 0 1 p , , , ' , ' i l ' ] ] o ] t d e c ' ' n , h o , , y r @ n o ' ' m o i a r l l ' b d m d o a ] ' ' e i n t , ) ] | n g i ; , l a i t a t t u b e u d e s d e l | e | ' c | l ] o l a , o o t r n | d g n s | l r O n t S g h G | i B e n ' a g ] s | , t s i o n u g t | h w i e n s g t | i Y n ' g ] | , X ' ] , 結果をダウンロードすると、featuresに以下のようなアイテムが格納されたデータを取得できます。 ...

概要 「れきちず」を使う方法を調べましたので、備忘録です。「れきちず」は以下のように説明されています。 「れきちず」は、「現代風の地図デザイン」の歴史地図を閲覧できるサービスです。 https://rekichizu.jp/ 背景 以下の会議に参加し、「れきちず」について教えていただきました。「れきちず」を開発してくださっている関係者の皆様、会議を開催してくださった皆様、また使用方法を教えてくださった北本朝展先生に感謝いたします。 http://codh.rois.ac.jp/conference/linked-pasts-10/ 以下のように、CODHのサービスでも導入されています。 http://codh.rois.ac.jp/news/ 2024-05-01 江戸マップ「れきちず」データセットを公開しました。また、edomi マップおよびedomi 災害に「れきちず」を導入し、現代デザインの歴史地図上で、edomiの歴史ビッグデータが閲覧できるようになりました。 使用方法 以下に、最低限の機能を実現するためのソースコードを格納しました。 https://github.com/nakamura196/rekichizu/blob/main/docs/index.html 以下でデモをご確認いただけます。 https://nakamura196.github.io/rekichizu/ 以下は地形とともに、富士山を表示した例です。 なお、地形については、以下の点にご注意ください。 江戸時代後期（1800〜1840年ごろ、文化・文政・天保年間）を想定した地図になります。関東・中部以外の地方についても順次拡大していく予定です。 地形の3D表示については現在の地形を表示しています。そのため、当時とは異なる地域があります。 https://rekichizu.jp/ 参考 ライブラリ 本アプリケーションの構築にあたっては、Leafletではなく、MapLibre GL JSを使用します。 https://maplibre.org/maplibre-gl-js/docs/ 以下のサイトにおいて、MapLibre GL JSは、Mapboxのオープンソースフォーク版と説明されていました。 https://qiita.com/asahina820/items/66cd78a4462db86578a4 当初、Mapboxでの使用を前提に、アカウント登録やトークンの発行等を行いましたが、MapLibre GL JSを使用する場合は、このような手続きは不要でした。 地形の有効化/無効化時にピッチを変更 地形の有効化/無効化時にピッチを変更するにあたり、以下のような記述によって実現できました。 m a p } . ) o c c m } ; n o o a ) ( n n p p d ; " s s . i u t t t e t r e a c a r t d s h t r e u e : i a r r T o i r a o t n n a t ( e , " i i { r , n o r n a = i = n m = a 1 ? > p 0 . 0 6 { g 0 0 e ; t : T e 0 r , r ア a ニ i メ n ー ( シ 地 ) ョ 形 ; ン が の 有 持 効 続 に 時 な 間 っ （ た ミ と リ き 秒 の ） ピ ッ チ 当初、map.setPitch(60)などを使用していましたが、map.easeToを使用することにより、スムーズにピッチが変更されるようになりました。 ...

古地図ビューアライブラリであるMaplatを使用してみましたので、使い方の備忘録です。 https://github.com/code4history/Maplat 上記のGitHubリポジトリのほか、以下のQiitaの記事なども参考になります。 https://qiita.com/tags/maplat?page=1 MaplatEditorのダウンロード 以下のページから、MaplatEditorの最新版をダウンロードします。 https://github.com/code4history/MaplatEditor/wiki データの作成 インストールしたMaplatEditorを立ち上げ、「新規作成」ボタンを押します。 必要なメタデータを入力します。以下の図に示す項目が必須項目です。 次に「対応点編集」タブに移動して、以下に示すように、対応点を追加します。 「データセット入出力」タブに移動して、「地図データエクスポート」ボタンを押します。 以下のように、<id名>.zipというファイルを適当な場所に保存します。 ダウンロードされたファイルを展開すると、以下に示すように、tmbs、tiles、mapsフォルダが格納されていることが確認できます。 アプリを作成する（ソースコードを利用する） 本記事では、ソースコードから利用する方法を説明します。npmコマンドが使用できる前提で話を進めます。 サンプルパッケージなどを利用して、より簡単にアプリを作成する方法が以下にまとめられています。こちらも参考にしてください。 https://github.com/code4history/Maplat/wiki/How-to-set-up-Maplat-Application 準備 適当なフォルダに移動して、以下に示すようなコマンドにより、ソースコードをダウンロードします。Maplatというフォルダが作成されます。 g i t c l o n e h t t p s : / / g i t h u b . c o m / c o d e 4 h i s t o r y / M a p l a t . g i t 次に、以下のコマンドにより、ライブラリのインストールを行います。 ...