本記事はAIが作成し、人間が追記しました。

概要

IIIF Georeference ViewerにおけるマップコンポーネントをLeafletからMapLibre GLへ移行し、複数の機能改善を実施しました。本記事では、実装した主要な機能とその技術的詳細について説明します。

https://nakamura196.github.io/iiif_geo/

主要な改善点

1. 画像の自動回転機能

IIIF画像を地図上に正しい向きで表示するため、コントロールポイント（対応点）から自動的に回転角度を計算する機能を実装しました。

機能概要

  • 画像座標と地理座標の対応点から、画像を北が上になるように回転させる角度を自動計算
  • 2点間または3点以上の分布パターンから最適な回転角度を決定
  • URLパラメータによる回転角度の保存と復元

実装のポイント

e}xpc)cccruo;oooetrnfnnntit最s.画ss北sulもtp像ttをtrsf離r座基n/uれvo標ig準rcnたap系meとonac2leでgoしtolt点irのVVたarciをdtベee角tmuo見Fiクcc度ialnつeeトttのolaけasルoo差nitcるt?とrrをDzea（u.地計eeIlよrr理==算gAmcりee座nau正ss標{{=ggl確o系leaな=uでxxgeRt角rの::e(oe度fcベortI計eeクigAoam算aCトmenttaのtoルgogaigたuoか22ltoeめrrら..einR）ed回xlFo.oss転nrntt.角-goDsaf&度meti&をi-Ngil計mo)otf算ggr;ne.1et(rg.ohf(ex1De(o,.eafmlgt)eynut:g-r=r,e>yiis?mym:.g:gc2AFo.gneoyegaroltd-2eui.Drnileeamag[tgt;]e1)s.-:ygR}eo;ot1a.tliaotnC}a;lculationResult|null{

UI実装

  • 自動回転ボタン（🔧アイコン）をOSDビューアーに配置
  • rotationパラメータが未指定の場合は自動的に回転角度を計算
  • 手動での角度調整用スライダーも提供

2. LeafletからMapLibre GLへの移行

移行の背景

  • パフォーマンス向上 : MapLibre GLはWebGLベースのレンダリングにより、大量のマーカー表示時のパフォーマンスが向上
  • スムーズなアニメーション : 地図の移動やズーム時のアニメーションがより滑らかに
  • ベクタータイルのサポート : ラスタータイルに加えてベクタータイルの表示が可能

実装のポイント

iicm}mmoa)ppnpcscza;oosMIoteotrrtannynotttpstltmrmLtaee:i{"aiai:rbmpbnn:zuMaIrcemotapneeraioipls.:pnmo,itGvSi_nbaLamtt.CNrn初layivoaec期uplaanv-e化eCelltigosCurgl==n.eeoa/tvn,ltdrnaat:iieeileosfwnurfnt<ee,aCMMr[lmaa.0snappv]etp(a.rl|{lsoiutlbney,ru!lel,eM-l,ag>rl(k.necursl,sl")P;;opup}from"maplibre-gl";

3. 現在地表示機能

ブラウザのGeolocation APIを使用して、ユーザーの現在地を地図上に表示する機能を実装しました。

実装内容

  • カスタムコントロールボタンの追加（📍アイコン）
  • 現在地取得と地図の自動移動
  • 青色マーカーによる現在地の可視化
c}o;ni}sftn)(a;fnv(}(}oaip,ecvgoccm}crauiasooa)urlsgtinnpcz;r...oeCaotssIeorssarrutrittnnoeeed)tro.ostmnttd(rrgn{cte:tLPT=te.e)uarLnoo>(ngolrn:1ogp('tel=arc5cLum{位Loo>teecaapa置olcin.utt(p情coa{ttvri(nI報actuLarocenのtaidnlenuws取itoegunMrt得oin,LetarPaにno.a!Lreon失nglt.nknpc敗=)eo:fgetueしtnlLrLp.ま{CgLya.n(vしuinTtvg)aたrtgo,aL.l'=ruL(lasu)>eda{utee)nete)t);{tLH;P}i=TokMs=enLie(tp=wtio(os[M'nila現(tor在ink地oge'nir).t()cu{)odoecr,odlslo;art:it'u#d4e0]8;0FF'})

4. 複数地図スタイルの切り替え機能

異なる地図スタイルを動的に切り替える機能を実装しました。

対応する地図スタイル

  • OpenStreetMap : 標準的な地図表示
  • 空中写真 : 国土地理院提供の航空写真
  • れきちず : Mierune提供の歴史的地図スタイル

実装のポイント

  • スタイル切り替え時のデータ永続化
  • クラスタリングやマーカーの再設定
  • レイヤーセレクターUIの提供
c}o;nicclmm}sfuoeaa)trntppi}i};(rsス新IスIffsietタcしnタnswnnイuいsイs((eidtsルrスtルtcgtteSt変rタa読au現eucxty更eイnみnr在ophyl前nルc込cr地jCM=leにtをeみeeマsla=eデL適.後.nーoup=I=ーo用vにvtカnsSnタcaデaLーDttcdmをalーloをaeyuea保tuタuc再trlrxp存ieをea追aier.So.復.t加.nevtns元oivg=nayDenoaWtllatcnli(SuetSeDutitesat(aehny.y't)Ddl=v=liaaeeaed){txIilc(la:nnuuse{(ddert'gnee[ry,euxxielom.;nnejbvdt)seaeL;orlxo=n)u]c>De.aa=)st{t>tiaryo.{elnvteMau;alrrunke;e)r;.value?{...}:null;

5. マーカークラスタリング機能

大量のマーカーを効率的に表示するためのクラスタリング機能を実装しました。

機能詳細

  • 近接するマーカーの自動グループ化
  • クラスター内のマーカー数表示
  • クリック時のズームイン動作
  • 個別マーカーのポップアップ表示
c}o;nm}m}sa)a)tptdccc;pitsfp};IyalllクIdyoiasnptuuuラn:puli']']eseasssスsertnc,ctt::tttタt':ceti''''i'234uaeeeーacer:rs###rs000pn'grrrレnl'::ct5ffct,,Ccge:MRイcuc{le112leleeoaaヤesi'[epbf8ep13u.ojtxdー.trp'-'b0c-'00svjsrZivecohc,d7br,,,tasououarliao651aeloneoslsensl['''d[run,,m:u''t'o',,i'ie':e,,s,rgugn.,5.''e13sega10a,':t00'tWd4dp',,:'id,do[,,tSLi[hoan''Duytppare_ootcrciiae(onn({utt='n__ptcc(o'oogi]uuen,nnotttjs''s']]o,,,n:{any)=>{

6. URLパラメータによる状態管理

地図の状態（ズームレベル、中心座標）をURLパラメータとして保存し、共有可能なリンクを生成する機能を実装しました。

対応パラメータ

  • mapZoom: ズームレベル
  • mapLat: 緯度
  • mapLng: 経度
  • lat, lng: 直接座標指定（レガシーサポート）
c}o;ncpppcwsoaaaoitnrrrnnsaaasdutmmmtopssswdp...n.aasssehtreeewieatttUsMm(((rtas'''lopmmmrU=aaa=yRppp.LnZLL`rPeoan$eawotg{prm''wlaU',,iamR,ncsLlldeSzanoS=eotgwtao...armttltc_oooeh.FFc(=Pviia{>aaxxt}rleei,{auddome((ns.66.'(t))p,wo))aiS;;tnnthedrnwoiaUwnmr.gell(})o)?;c)$a;{tpiaorna.msse.atrocSht)r;ing()}`;

7. その他の改善点

TypeScript対応の強化

  • 型定義の追加によるコード品質向上
  • MapLibre GLの型定義活用

レスポンシブ対応

  • モバイルデバイスでの操作性向上
  • タッチジェスチャーのサポート

パフォーマンス最適化

  • debounceによるURL更新の最適化
  • スタイル切り替え時の効率的なデータ管理

技術スタック

  • フレームワーク : Vue 3 + Nuxt 3
  • 地図ライブラリ : MapLibre GL JS v4.7.1
  • UI : Vuetify 3
  • 言語 : TypeScript

まとめ

LeafletからMapLibre GLへの移行により、パフォーマンスの向上と機能の拡充を実現しました。特に複数の地図スタイル切り替え機能により、歴史的地図と現代地図の比較が容易になり、IIIF画像の地理的コンテキストをより深く理解できるようになりました。

今後は、3D地形表示やより高度な可視化機能の追加を検討しています。