Openstreetmap

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