2024年11月6日 (水) 03:40時点における最新版

[編集] SVGMap.js (Level0.1フレームワーク)解説書

2018年現在のSVGMapのデータ形式、およびそれを実装した初歩的なフレームワーク(SVGMap Level0.1 Revision*)の解説を行います。

[編集] 第一章：SVGMapの基本機構と、更新部分

この章は、JIS化されたSVGMap (JIS X.7197)や、W3C Member Submissionに対する、近年の開発成果に基づいたSVGMapのアップデートを解説しています。

JIS X.7197もしくは、W3C Member Submissionに記載されているように、SVGMapの基本機構は主に以下の機能を　汎用的なグラフィイクスデータ記述形式SVGに拡張することです。

• 地理座標処理
  • SVGの座標系と地理座標系との間の関係を記述する globalCoordinateSystems要素
• タイルピラミッド（タイリングとLevel of Detail）
  • コンテンツを埋め込むimage要素、animation要素のx,y,width,height属性への追加の振る舞いと、visible-min-zoom, visible-max-zoom属性の追加
  • 詳細は こちらの論文を参照
• 拡張されたレイヤー
  • ルートコンテナにおけるimage, animation要素の扱い
  • ルートコンテナが埋め込むsvgコンテンツ(レイヤーsvgコンテンツ)の処理

[編集] 地理座標系の処理

SVG2では地理空間座標を記述するスペック(metadata geospatial coordinate systems)が削除されました。これは、W3C SVG仕様の範囲では単なるメタデータであり、ユーザエージェントの振る舞いに何ら影響を及ぼさないことが理由です。　また、JIS SVGMapにおいては、coordinateReferenceSystem 要素が定義され、それに基づくユーザエージェントの振る舞いが規定されていますが、これは一方でW3Cのスペックではないという課題を持ちます。

これを受けて、現在提案されているSVGMapのデータ仕様では、SVG1.1の段階ですでに標準化と実装が行われたスペックを注意深く活用することにより、JIS SVGMapで規定された地理座標系に関する機能のいくつか（すべてではない）を実現する方法を用いることとしています。（globalView spec）

なお、JIS SVGMapのcoordinateReferenceSystem要素もサポートしています。

[編集] メルカトル図法を含む任意の図法の定義とその合成機能(＞rev16)

従来のSVGMapでは、グローバル座標系に緯度経度座標を用いた場合、使用できる図法はPlateCarreeや正距円筒図法でした。

一方、rev16ではコンテナsvgコンテンツを含む任意のSVGMapコンテンツ(レイヤーsvgコンテンツやサブレイヤー、タイルなど)のglobalCoordinateSystem 要素のtransform属性に、下記のように"mercator"を指定することで、そのコンテンツの座標系がメルカトル図法(web mercator)であることを宣言できます。

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" />

この記述がされたコンテンツのSVGの座標空間はメルカトル図法上のものとなり、この座標系上でのx,y=0,0は西経180.0度,北緯85.051129度、x,y=1,1は東経180.0度,南緯85.051129度に対応します。

[編集] メルカトル図法での地図表示

コンテナsvgコンテンツで先述の宣言を行うことで、SVGMap0.1.jsはメルカトル図法で画面上に地図を表示します。このとき、コンテナsvgコンテンツが参照する各レイヤーはメルカトル図法であっても、それ以外であっても構いません。フレームワーク内でオンザフライの図法変換が実行されます。（逆にコンテナsvgコンテンツがPlateCarreeでレイヤーがメルカトルでも同様）

[編集] メルカトル図法のドキュメントルート要素のviewBox属性

• コンテナsvgコンテンツにおいて、地図の初期表示状態を記述するドキュメントルート要素(<svg>要素)のviewBoxに記述する座標も先述のメルカトル座標系で記述する必要があります。
• 一方、緯度経度で初期表示領域を記述したい場合に対応する仕様が拡張されており、その記述例は下記のとおり、globalを追加します。

<svg viewBox="global,138,35,2,2">

[編集] プロキシの設定

オンザフライでの図法変換では、多くのケースで非線形の座標変換が必要となります。ビットイメージ（タイルを含む）に対して子の座標変換を実行するためにSVGMap.jsではビット委イメージのピクセルにアクセスしています。これを実現するにはビットイメージがSVGMap.jsと同一オリジンにある必要があります。この条件を満たせないケースに対してフレームワークにはプロキシを設定する機能があります。(setProxyURLFactory APIを参照)

詳細な情報をこちらに掲載しました

[編集] 多様な図法の定義と利用

javascriptコードに記載されたscript要素内に定義した関数の関数名をglobalCoordinateSystem要素のtransform属性に記述することで、その関数を図法変換に用いた図法定義が可能となります。(先述のmercator属性は、フレームワークに特別に組み込まれた関数です）

たとえば、日本の平面直角座標系の地図(固有の基準点を持つ横メルカトル図法)をPlateCarreeやメルカトル図法の地図として合成・表示するケースなどに有効でしょう。

ユーザが定義できるこの関数は引数を持たない関数であり、返り値として以下の３つの関数を返す必要があります。

• {x,y} transform({x,y}) : グローバル座標(WGS84経度緯度)から、そのコンテンツの図法の座標への変換関数 入出力値は.x,.yメンバを持つオブジェクト。
• {x,y} inverse({x,y}) : 同、逆変換関数
• number get scale : グローバル座標系に対するコンテンツの図法の座標系の座標値のスケール（グローバル座標系で1変化すると、コンテンツの座標系でいくつ変化するのかを表す）
• 記述例

<svg ...>
  <script>
  function azimuthalEquidistant(){
    ...
    return{
      transform:function(inp){
        var xy = transform_int(inp.y, inp.x, ...);
        return{ x:xy.x, y:xy.y}
      },
      inverse:function(inp){
        var latLng = inverse_int(inp.x, inp.y, ...);
        return{ x:latLng.lng, y:latLng.lat }
      },
      scale: 1.0
    }
  }
  </script>
  <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="azimuthalEquidistant" />
  ...map contents in projected coordinate system...
</svg>

[編集] ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング

SVG2(SVG1.1 2nd Edition)では、SVG単独によるユーザエージェントという実装想定は撤廃され、よく知られているウェブブラウザの機能の一部としてのSVGデータの描画機能、HTMLやCSSと一体化されたデータ・コンテンツ　へと変化しました。一方、近代のウェブブラウザにおけるコンテンツでは古典的なhtmlに基づくコンテンツデータに対して、javascriptとDOM APIによるプログラムでコンテンツをブラウザ上で動的に生成する（ウェブアプリケーション）機構を備えます。すなわちSVGを実装する現代のユーザエージェントは例外なくウェブアプリケーションの実行が可能となりました。

そこで、SVGMapでは静的なSVGによる地図コンテンツに加え javascriptで動的に生成されるコンテンツ(ウェブアプリケーション)も地図コンテンツ（地図のレイヤー）として扱えることとしました。それにもかかわらず SVGMapは依然として複数のウェブ上で分散する地図データを一つの画面上にレイヤリングする機能（ハイパーレイヤリング）を維持しています。すなわち、ウェブアプリケーションとしての地図レイヤーをレイヤリング（マッシュアップ）する機能が拡張されます。これは、SVGMapのマッシュアップ・ハイパーレイヤリングの概念を、単に地図画像データのレイヤリングから、地図上に表現された動的なオブジェクトのマッシュアップ・レイヤリングに広げています。SVGMapではこのコンセプトを"Layers as WebApps"(ウェブアプリケーションとしてのレイヤー)と呼んでいます。

このようなウェブアプリケーションは、レイヤーごとにカプセル化されることになります。これにより、グローバル空間(コンテナsvgコンテンツとそれを起動する、svgMap.jsフレームワークを読み込んだウェブページ)のスパゲッティ化なしに、多様な機能を実装していくことが可能になります。

こちらの論文も参考にしてください。

ウェブアプリケーションによる地図レイヤーを構築するには二つの方法があります。

• svg要素のdata-controller属性で参照されたhtml文書
  • #レイヤー固有ユーザインターフェースと呼ばれる機構です。この方法を用いること推奨します。
• svg要素内のscript子要素 (将来廃止予定)
  • htmlによるUIを伴わない実装の場合はscript要素を用いることができます。ただしsrcは属性には非対応、直接コードを埋め込む必要があります。

この機能を用いるにはSVGMapLevel0.1フレームワークを使用する場合は、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)を更にロードする必要があります。SVGMapLevel0.2フレームワークの場合はデフォルトで機能します。

[編集] レイヤー固有ユーザインターフェース

SVGMap.jsではさらに、個々の地図レイヤー(レイヤーSVGコンテンツ)がそれぞれのレイヤーに特化した固有の演算ロジックだけでなく、ユーザーインターフェースも備えたHTMLを紐づけることができる機能が拡張されています。UIも備えた より完全なwebAppをレイヤーとして実装できるため、カプセル化がより効果的に実現されます。

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ(スライダーバー)や、気象情報の種類を選択するプルダウンメニュー　などのUIやロジックを任意に構築できます。

レイヤー固有ユーザーインターフェースは、グローバル空間(SVGMap.jsをロードしたhtml)のレイヤー選択UIを通してwindowに設置されたiframe中に呼び出されます。詳細は #レイヤー固有のUI を参照してください。

このフレームワークでは、#svgMapLayerUI.で呼び出せるAPIが利用可能です。

[編集] 例

以下に、いくつかのこのような動的な地図コンテンツの例を示しましょう。

検索によって表示スタイルを変更する機能を持ったレイヤー

例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。

CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。

このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。また、これよりはモダンなgeoJsonやKML等のデータをSVG DOMに変換することも容易に可能でしょう。これをより簡単に実現するためのライブラリもsvgMapGIStoolに準備されています。

タイリングされた地図コンテンツ

それは、たとえばOpenStreepMapのTile Serverや、Tile Map Serviceのような、特定のロジックによる数列のような法則性を持ったピラミッド状の地図タイルリソースをタイリングする地図コンテンツのことです。

更新されたSVGMapでは、地図コンテンツに内蔵されたjavascriptによるアプリケーションロジックとしてそれらを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

[編集] タイリングに関するノート

svgMapにおけるタイリングは従来の地図フレームワークより柔軟で汎用的な概念に基づいています。 openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定の固定的なタイリングロジックとパラメータを伴った機能として地図フレームワーク本体にハードコードされて提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用、更には効率の問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。TMSspecs@osgeowiki, tiling@osgeowiki ベクターデータのタイリングにおいては、これらの課題はさらに増幅され、いまだ手法は確立していないといっても良いでしょう。たとえば、我々の研究では、Quad Tree Composite Tiling(スライド、、ペーパー)のような用途によってはもっと優れたタイリングの手法も見いだされています。

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。この程度のコードで多くのタイリングの手法が包含できるのであれば、特定のタイリング手法をフレームワークのコアに内包する・さらにはこれら特定のタイリングの手法にコアが依存する必要はなく、先述のウェブアプリケーションによる動的な地図レイヤーとして実装すれば良いであろうというのがSVGMapにおけるタイリング扱いです。3DマップのフレームワークであるCesiumはこれに似たタイリングポリシーを持っているようです。

[編集] SVG以外のデータサポートに関するノート

前章に記載した方針と同様、他の地図表示フレームワークと異なりSVGMapではSVGとして規定されたコンテンツ(もちろんビットイメージの埋め込みは可能)以外のネイティブサポートは行いません。例えばgeoJsonやKML, WKTなど地図業界でしばしば用いられるデータをSVGMapで表示したい場合は、変換ルーチンを埋め込んだ動的な地図コンテンツ（webAppレイヤー）としてそれらを扱います。SVGMap.jsの拡張モジュールであるSVGMapGIS.jsには、これらのデータをwebAppsで読み込みSVGに変換するためのAPIがあります。

[編集] トポロジースイート(地理空間情報処理)

Rev.13で拡張

SVGMapLevel0.1 Revision 13以降では、SVGMapコンテンツに対してトポロジー演算機能(地理空間情報処理機能)を適用する拡張フレームワークが提供されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_GIS_r*.js)をロードする必要があります。 このフレームワークでは、拡張されたAPIが利用可能です。 フレームワークに内蔵された基本的な演算機能に加え、geoJSONと整合するインターフェースを備え、jstsを組み込み、より高度な機能を実装するための機構も持ちます。

この機能を用いると、特定のレイヤーに登録されているポリゴンの範囲に入っている、特定のレイヤーのポイントをフィルタリングして表示の色を変更する。といったことが可能です。ただし、これらはすべてすでにブラウザ上にロードされている限られた量のコンテンツの中での演算に限定されます。もしもサーバ上にしかないデータに対してこれらの演算を試みたい場合、従来通りサーバサイド技術によってそれは実現すべきです。

また、主題情報を含むウェブマップコンテンツの多くのレイヤーがラスタータイルによって提供されているという現状を考慮し、このスイートはラスターレイヤーをカバレッジとして扱った空間情報処理を行う機能の実装も進められています。現在のところ、カバレッジとポイントとの間での演算が可能です。また、そのために便利なカラーピッカー等の付加的な機能の実装も進められています。

[編集] オーサリングシステム

Rev.14で拡張

SVGMapLevel0.1 Revision 14以降では、SVGMapコンテンツを編集するツール機能が実装された拡張フレームワークが提供されます。フレームワークが提供するAPIを使って、オーサリング機能を持ったレイヤーを作ることが可能です。コンテンツは、SVG DOMとして構築されます。なお編集したオブジェクトを保存したり登録するためには別のサービスやアプリケーションの開発が必要です。

[編集] 3D可視化システム

Rev.15で拡張

Cesium.jsを用いて、SVGMap.jsが表示できるすべてのコンテンツを3D可視化するシステムです。詳細解説はTBD (フレームワークが提供するAPI)

[編集] プログレッシブウェブアプリケーション

Rev.16で拡張

Progressive Web Appsをサポートしたブラウザにおいて、SVGMap.jsをオフラインでも利用可能にする拡張機能です。詳細解説はTBD (フレームワークが提供するAPI)

[編集] SVGMapコンテンツのバックエンドソフトウェア (参考)

本解説書は主にコンテンツ形式とユーザーエージェント側のソフトウェアについて解説していますが、サーバ・バックエンド側についてもここで少し言及します。

shapefileやcsvなどから、静的なSVGMapコンテンツを生成するためのソフトウェアがオープンソースで準備されています。これらのソフトウェアでは、高度なタイリング手法を用いた地図タイルを生成することができます。使用方法などは同リポジトリに用意されているチュートリアルを参照してください。

一方、もちろんSVGMapの仕様に準拠すれば、これらのソフトウェアに頼らず、自由にバックエンドを構築することができます。例えばよく知られた地図タイルサービスを用いたり、古典的なWFS やWMSのような動的地図・地理空間情報サービスをベースにして比較的容易にそれらを構築することもできます。SVGMap.jsのリポジトリのappLayersディレクトリにはそのようなシステムを構築する際のフロントエンド側の動的レイヤーのサンプルが掲載されています。

[編集] 第二章：SVGMap Revsion 0.1フレームワーク

SVGMapは究極的には既存のすべてのウェブブラウザがネイティブの機能としてそれを備えることを目標とし、既存のHTML,CSS,SVGなどのウェブブラウザの標準規格との整合性を備え、且つ既存のWeb Mappingの規格との整合性をも備えた仕様として検討と標準化を進めています。しかし今のところまだその標準化は完遂されていないため、その完全な実装がなされたウェブブラウザは存在しません。一方、既存のウェブブザでSVGMapの機能が実行可能となるような拡張をJavascriptによるフレームワークとして構築することが可能です。SVGMap Revision 0.1フレームワークは、このようなJavascriptによるSVGMapの仕様に基づいた初歩的な制限と拡張がされた実装です。その実装はオープンソースとしてこちらのgitubリポジトリで公開されています。

そのアーキテクチャの特徴は、ブラウザネイティブのSVGレンダラーを使用せず、HTML,CSS,HTMLCanvas2DAPIを用いてSVGMapが実装されている点です。この特徴は主にこのフレームワークの開発が開始された時期に起因しています。当時のウェブブラウザの多くはSVGが実装されていませんでした。また実装されていたとしても、大規模なベクトルデータのレンダリング、および伸縮スクロール・インタラクティブな操作に対する性能面での処理制御に問題がありました。これらの問題のいくつかは現在のブラウザで解消されているものがあるかもしれません。またこれらの問題の解決とともに、SVGMapフレームワークはLevel番号を上げつつよりネイティブの機能に基づいた実装に移行するかもしれません。参考までに、実験的なネイティブのレンダラを用いた実装(2010年)があります。

SVGのベクトル描画機能はcanvgのpathパーサなどを引用することで実装されています。一方、地図としてあまり用いられないと想定された 多くの要素やプロパティ、アトリビュートの実装が省略されています。

[編集] 追加・拡張された機能：

[編集] フレームワークの呼び出し

本フレームワークを用いる場合、SVGMapコンテンツをブラウザに直接読み込ませることはできません。フレームワークを動作させるjavascriptライブラリをロードしたhtmlコンテンツ(WebApps)を準備し、そこでSVGMapコンテンツを読み込み表示させます。利用者には、このhtmlコンテンツのURLを告知します。このhtmlコンテンツを以降ルートhtml文書と呼ぶことにします。

SVGMapのフレームワークはgithubリポジトリ：https://github.com/svgmap/svgmapjs　で公開されています。

htmlコンテンツの<body>要素直下に以下の要素を配置します。

[編集] フレームワークを実装したjavascriptライブラリを読み込むscript要素

これがSVGMap.jsのコアのフレームワークを構成します。

<script type="module">
  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</script>

上のスクリプトで必要なモジュールが読み込まれます。グローバル空間のwindowのメンバには、svgMapオブジェクトを設定しています。

実働サンプル(tutorial5_esm)

もしくは https://github.com/svgmap/svgmapjs の内容を独自のウェブホストにコピーしそれを用いることもできます。(下の例はグローバル空間のhtmlに対して、svgmapサブディレクトリにjsを置いた場合)

<script type="module">
  import { svgMap } from './svgmapjs/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</script>

[編集] GISモジュールを利用する場合

svgMap.jsの地理空間演算機能(GISモジュール)では、jsts.jsを使用しています。そのためGISモジュールを機能させるにはjsts.jsの読み込みが必要です。下記のようになります。もちろん独自のウェブホストにjstsをコピーしてそれを利用することも可能です。

<script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script type="module">
  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</script>

[編集] その他、各種の拡張フレームワークのjavascriptコードを読み込むscript要素(必要に応じて)

ECMA Script Module対応の内容に現在更新中

SVGMapLv0.1_Authoring_r*.js、SVGMapLv0.1_GIS_r*.js他がある。

<script type="text/javascript" src="拡張フレームワークファイル.js"></script>
注記:拡張フレームワークファイル.jsは用いる拡張によって変化する。

[編集] 本解説書でAPIを説明している、現在利用可能な拡張フレームワーク

ECMA Script Module対応の内容に現在更新中

• SVGMapLv0.1_Authoring_r*.js
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/SVGMapLv0.1_Authoring_r7.js
• SVGMapLv0.1_GIS_r*.js
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/SVGMapLv0.1_GIS_r3.js
• SVGMapLv0.1_LayerUI2_r*.js
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/SVGMapLv0.1_LayerUI2_r4.js
• SVGMapLv0.1_CesiumWrapper_r*.js (実験的)
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/Cesium3D/SVGMapLv0.1_CesiumWrapper_r3.js
• SVGMapLv0.1_PWA_r*.js (実験的)
  • https://cdn.jsdelivr.net/gh/svgmap/svgMapLv0.1@latest/experimental/PWA/SVGMapLv0.1_PWA_r5.js

まだ実験的なsvgMapCesiumWrapperは、svgMap cesium visualizerページを参照ください。 SVGMapPWA(ProgressiveWebApp)については、SVGMap PWA Testページを参照ください。

[編集] SVGMapコンテンツを配置するためのdiv要素

id属性に"mapcanvas"を設定し、data-src属性(もしくはtitle属性(to be obsoluted))には、地図フレームワークが最初に読み込む、SVGMap.jsが表示する地図コンテンツの起点となるSVGコンテンツ（以降コンテナsvgコンテンツと呼びます）のパスを指定したdiv要素を設置します。

コンテナsvgコンテンツはまた、ここで記述するレイヤーを持つことができる特別のコンテンツです。

（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）

<div id="mapcanvas" title="Container.svg"></div>

<div id="mapcanvas" data-src="Container.svg"></div>

[編集] 差分データの指定

data-custom-layers-root属性でContainer.svgに対するレイヤーの差分情報のパスを指定することができます。 もしくは、data-custom-layers-root属性に、レイヤーの差分情報が保管されているディレクトリを記述した場合、URLハッシュで差分ファイルを指定することもできます。 差分データは、カスタムレイヤーマネージャで作成することが可能。（データ形式は後述）

<div id="mapcanvas" data-src="Container.svg" data-custom-layers-root="./containerDif/dif0.json"></div>

[編集] 地図中心の照準イメージ。

参照する画像はあらかじめ用意されたもの以外も利用できます。

<img id="centerSight" style="opacity:0.5" src="Xcursor.png" width="15" height="15"/>

[編集] 任意で設置できる要素：

[編集] LayerUIフレームワークを実装したjavascriptコードを読み込むscript要素（本フレームワークについては後述）

下記のレイヤーリストUIおよびレイヤーに特化したUIを設置する場合、このscriptの読み込みは必須です。

<script type="text/javascript" src="SVGMapLv0.1_LayerUI2_r2.js"></script>

[編集] 伸縮ボタン

<img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
<img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />

img要素かつidが上記の値である必要があります。

　伸縮ボタンを一回押すたびに伸縮する比率は、別途svgMap.setZoomRatio(ratio)で設定可能。 　デフォルトの比率はsqrt(3) 　

[編集] 測位ボタン

<img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="gps.png" onclick="svgMap.gps()" width="20" height="20" />

img要素かつidが上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。

[編集] グローバルメッセージ

レイヤー固有UIが任意のメッセージを出力可能にするために設置するエリア　#レイヤー固有のUIのAPI putGlobalMessage 参照

<span id="globalMessage" style="font-size:10px;left:5px;bottom:16px;position:absolute;"></span>

idが上記の値である必要があります。

　styleは任意

[編集] 地図中心の緯度経度値表示

<font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" ></font>

idが上記の値である必要があります。

　styleは任意

[編集] レイヤーリストUI(後述)を設置するdiv要素

<div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>

idが上記の通りである必要があります。

　 styleは任意だが、heightはレイヤリストUIが展開された状態におけるサイズとなります。格納された状態のサイズは、この要素における文字の縦幅となります。 　

[編集] レイヤー固有のUI(後述)を設置するdiv要素

レイヤー固有のUIを使用するために設置するdiv要素です。

<div id="layerSpecificUI" style="right :10px; top: 40px; width:400px;height:400px; position: absolute; background-color: white;opacity:0.8;display:none;">
</div>

idが上記の通りである必要があります。styleは任意だが、heightはレイヤリストUIが展開され得る最大のサイズとなります。

[編集] レジューム機能のためのチェックボックス

<form style="right:10px;top:20px;position:absolute;opacity:0.8" >
<input type="checkBox" id="resumeBox" onChange="svgMap.resumeToggle(event)" autocomplete="off"/>
<label for="resumeBox"/>Keep and Resume view</label>
</form>

checkboxタイプのform要素であり、idが上記の通りである必要があります。レジューム機能とは、(rev16以前ではcookie、rev17以降ではlocalStorage)を用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（view port）を再現する機能です。スタイルおよびlabel要素は任意

[編集] レイヤーリストUIのためのスタイル

<style>
body {
	font-family: Meiryo;
}
#layerTable{
	background:#ffE0E0;
	border: 2px solid #bbb;
}
.layerItem{
	background-color: white;
}
.noGroup{
	background-color: #fff0f0;
}
#layerList{
	background-color: #ffff80;opacity:0.8;
}
</style>

[編集] レイヤーリストUIを用いる場合、例えば上記のようなスタイルの定義が必要です。

• layerList：レイヤーリストUI全体に対するスタイル
• layerTable：レイヤーリストUIの中のテーブルに対するスタイル。
• layerItem：同テーブルに表示される個々のレイヤー表示に対するスタイル
• noGroup：同レイヤー表示のうち、グループに属さないレイヤーに対するスタイル

[編集] レイヤー

SVGMapは古典的な地図情報システムのようなレイヤーの概念を備えていません。一方その上位概念ともみなせる、任意のドキュメントをツリー状に埋め込む機能を備えています。しかしそれでは古典的なユースケースを平易に表現しているとはいえないため、それをラップする古典的なレイヤーの概念と、それに基づくレイヤーユーザインターフェースのフレームワークを持ちます。

フレームワークが最初に読み込む地図コンテンツの起点となるコンテナsvgコンテンツの中で、animationもしくはiframeを用いて（準拠規格に依る）埋め込まれるsvgコンテンツが、自動的にレイヤーとみなされます。いうまでもなくレイヤーの上下順はSVGコンテンツのスクリプト中での埋め込みの順番の逆順になります。

また、このコンテナsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツのことを、レイヤーsvgコンテンツと呼ぶこととします。ここで、各レイヤーsvgコンテンツはさらに別のsvgコンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーSVGコンテンツもしくは単にサブレイヤーと呼ばれることもあります。

なお、Rev12以降のSVGMapLv0.1フレームワークではレイヤーフレームワークは本体と独立した実装となり、拡張や切り離しが可能となりました。以下は、標準で提供されるレイヤーフレームワークのVer2 (SVGMapLv0.1_LayerUI2_r*.js)に関して解説します。

レイヤーUIフレームワークが提供するUIは、先述のレイヤーリストUIを設置するdiv要素によって提供されます。このUIは以下の機能を持ちます。

• 折り畳み可能なレイヤーの一覧を表示する機能
• 各レイヤーの表示非表示を切り替える機能
• グルーピングされたレイヤー(後述)をグループとして表現、折り畳み、一括表示非表示する機能。
• そのレイヤーに紐づけられた#レイヤー固有のUIを出現させる機能。
• 表示されているレイヤーの個数などの情報を表示する機能

[編集] コンテナsvgコンテンツの記述内容とレイヤーフレームワークの振る舞い

• animation要素：　レイヤーとみなされる
  • title属性: レイヤーの名称となる。(必須属性) title属性値は他のレイヤーと重複してはならない(ID(このコンテンツ内でのレイヤーの識別子)として振る舞う)
  • xlink:href属性: レイヤーsvgコンテンツへの参照
  • visibility属性 : レイヤーの初期の表示状態。UIにより変更できる (hidden or visible)
  • opacity属性 : レイヤーの透明度
  • x,y,width,height属性の振る舞いは共通(viewportがこの属性の値とintersectしていただロードされる)
  • class属性: スペース区切りで規定値(複数)と任意値(一つ)を記述できる
    • 詳細は後述の#class属性によるレイヤーのグルーピング・クリッカブル機能の提供を参照
  • data-controller属性: (Optional) #レイヤー固有のUI　の　#詳細参照
• globalCoordinateSystem要素：(1個つだけ必須要素)
  • (コンテナsvgコンテンツにおける)本要素が、このフレームワークによってUser Agentに表示される地図の図法を規定する。
    • なお、それ以外のSVGコンテンツのglobalCoordinateSystem要素は、コンテナsvgコンテンツの図法への変換のために用いられる
    • より詳細は#地理座標系の処理を参照
• svg要素: (documentRoot要素)
  • viewBox属性: 初期の表示範囲を指定。
    • ここに記述する座標値は、SVGの仕様に準ずるが、　拡張記述形式も使用可能　参照：#メルカトル図法のドキュメントルート要素のviewBox属性

[編集] レイヤーsvgコンテンツ

レイヤーsvgコンテンツは、レイヤー固有のUIを紐づけることができます。

[編集] クリッカブルオブジェクト

グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、metadataフレームワークに基づく、メタデータの表示機能を対象とします。

なお、image要素(useによって間接的に設置されたimage要素を含む)は、a要素によるハイパーリンクが加えて実装されています。metadaとa要素の双方が設定されているimage要素では、どちらのインタラクティビティを発動させるかをモーダルダイアログによるユーザへの問い合わせが行われます。

[編集] class属性によるレイヤーのグルーピング・クリッカブル機能の提供

コンテナsvgコンテンツが参照するレイヤー（レイヤーsvgコンテンツ）へのリンクを記述する要素(animationもしくはiframe要素)は、class属性によって、各レイヤーに特性を与えることができます。classはスペース区切りで複数指定することができますが、グループ名は一つしか認識されません。

グルーピング

以下の属性値以外の値を記述すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。グループはレイヤーリストUI上の表現に反映されます。最初に現れたグループ名がこのUIの下に表示されます。ただし地図画面上の描画の順番はこれとは別、SVGの基本的な描画順(Painter Model)に準じます。

batch

グルーピングとともに使用します。そのグループに属するレイヤーを一括で表示非表示するための機能がレイヤーＵＩに付加されます。

switch

グルーピングとともに使用します。そのグループに属するレイヤーは、どれか一つしか表示されません。batchとの併存はできません。（無視されます（要確認））

clickable

Pathなどのベクトル図形要素はデフォルトではインタラクティビティが提供されません。クラス値にclickableを指定することでこのレイヤー（子供のsvgコンテンツを含む）の図形要素においてのみ、インタラクティビティが提供されます。提供されるインタラクティビティは、マウスによって図形をクリックしたとき、そのグラフィックス要素がクリッカブルな要因を備えているかどうかを検索し、備えている場合それに対応するアクションを起こします。

　なお、image要素(useによって間接的に設置されたimage要素を含む)は、このクラスの設定に依らず、a要素によるハイパーリンク、およびmetadataフレームワークを用いたクリッカブルオブジェクトとして機能します。

editable

当該レイヤのレイヤー固有UIにsvgMapAuthoringToolの図形編集オブジェクトを設置する場合、それを有効に機能させるためにはこの属性が必要です。(なお再編集機能を有効にするにはclickableも必要)

[編集] data-nocache

コンテナsvgコンテンツが参照するレイヤー（レイヤーsvgコンテンツ）へのリンクを記述する要素(animationもしくはiframe要素)に、data-nocache属性をつけることによって、クライアントのコンテンツキャッシュを無効にすることができます。なお、無効化手段はunix-timeクエリパートをそのレイヤー下のすべてのリソースへのアクセスに付加させることによります。

[編集] metadataフレームワーク

データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性にメタデータの属性名をカンマ区切りで列挙。同文書の図形要素のproperty属性に同じ順序でメタデータの値を記述します。(なお、xlink:title属性でマウスオーバーで機能する吹き出しを設置できます)

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。（その代わり格納効率が高い）クリックやタッチ等によってデフォルトの状態ではブラウザが備えるモーダルダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張/カスタマイズについては、ウェブアプリケーションの開発の章で別途解説するsetShowPoiProperty()関数を参照してください。

データ自体にカンマが含まれる場合はエスケープが必要です。

[編集] 例：

<svg property="id,type,latitude,longitude,title,address,spec" ... >
...
<use transform="ref(svg,14118.37511,-4524.39994)" x="0" y="0" xlink:href="#syl8"
content="RIS/RJER,地方管理,45.2439994,141.1837511,利尻空港,北海道利尻郡利尻富
士町,1800×45(07/25)" xlink:title="利尻空港"/>
...
</svg>

[編集] 動作の制限・差異

[編集] 再描画の制限

• ブラウザネイティブのSVG描画機能に対して注意すべき点として、このSVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示(refreshScreen関数を使用)したアプリケーションの構築が必要になるケースがあります。
• 関連情報
  • 内部機構解説#Zoom.2FPan_Controller:
  • refreshScreen
  • setPreRenderController
  • preRenderFunction
  • 動的な地図レイヤー
  • レイヤー固有のUI
  • 拡張イベント

[編集] 実装されている機能

多くの機能が実装されていないため、実装されている機能、および拡張された機能をここでは列挙することとします。

[編集] 要素

• path
• globalCoordinateSystem
• circle
• text
• defs
• animation
  • 別のsvgコンテンツを取得して埋め込みます。
  • コンテナsvgコンテンツで使用した場合は埋め込んだコンテンツは「レイヤー」と見做されます。
  • それ以外で使用した場合はタイルやサブレイヤーとして使用できます。
  • x,y,width,height属性は、SVGの仕様に基づき埋め込むコンテンツのtransformに影響を与えるとともに、下記の通り動的なコンテンツの読み込み機構が制御されます。
    • この属性で示された領域がtransform後のviewportと交差・包含した場合、その埋め込みコンテンツは動的に取得され表示されます。lazy loadの機構に相当し、タイリングメカニズムを構成します。
    • ただし、visible-min-zoom およびvisible-max-zoom属性で示された拡大率による表示条件を満たしていない場合は取得されません。level of detailの機構に相当します。（x.y,width,height属性と組み合わせることで、タイルピラミッド（ラスター、ベクターを含む）機構を実現します。詳しくはJISX.7197、Tiling and Layering Moduleサブミッション、もしくはこちらの論文を参照
  • commonQuery属性：#レイヤーsvgコンテンツのanimation要素でこの属性を設置すると、そのレイヤーのコンテンツを取得するすべてのGETリクエストのクエリパートにこの属性で設定した値が共通付加されます。(もしKey=Valueの形のクエリを追加したい場合は文字列として"Key="の部分も含めてこの属性値に設定します。)
• iframe
  • animationと同等
• image
  • 別のビットイメージコンテンツを取得して埋め込みます。
  • animation属性のx,y,width,height属性と同様の追加のlazy loadの振る舞いを持ちます。
  • visible-min-zoom およびvisible-max-zoom属性の振る舞いも同等です。
  • xlink:href属性はspatial fragment をサポートし、(xywhによっ参照されるimageの部分を埋め込む機能をサポートします。)。もしもアスペクト比が異なった場合（ＴＢＤ）
  • style:filterプロパティによる画像処理をサポートします。
  • data-mercator-tile="true"　属性が設定されている場合、そのビットイメージはメルカトル図法で描画されていることを示します。
  • htmlのimg要素のcrossoriginに対応する属性を持つことができます（この場合ビットイメージの埋め込みに際しoriginヘッダが送信）
• view

[編集] 属性

• ref(svg,x,y) ：SVG1.2TのTransformRef属性により、non-scaling objectが設置できます。Pointフィーチャの可視化に効果的です。　

TBD

• fill
• stroke
• arrow
• dasharray
• viewvox
• opacity
• style
  • image-rendering : pixelated / image要素
  • fill
  • stroke
  • opacity
• meta
  • http-equiv="refresh" : レイヤーsvgコンテンツのみ。contentに秒数を設定することで、そのレイヤーを指定秒数ごとに(再読み込み)更新する。script要素はonloadが再実行される。　注：ブラウザのキャッシュが効く可能性を考慮して実装する必要がある。

[編集] 第三章：ウェブアプリケーションの開発

本章はSVGMap Revsion 0.1フレームワークを用いたウェブアプリケーションの開発について解説します。 本フレームワークによる開発部分は以下に分類されます。

• ルートhtml文書によるウェブアプリケーション(SVGMapフレームワーク)
• 動的な地図レイヤー(Layers as WebApps) : SVGコンテンツに以下のいずれかの情報を設定する
  • レイヤーsvgコンテンツのドキュメントルート要素のdata-controller属性　レイヤー固有のUI
  • svgドキュメントに設置されたscript要素 script要素による動的な地図レイヤー

[編集] SVGMapフレームワーク

ルートhtml文書によるウェブアプリケーションはSVGMapLv0.1フレームワークを用いたウェブアプリケーションの基本であり、そのhtml文書と底傘参照されたjavascriptライブラリを読み込んだwindowが持つ'svgMap'という名前のインスタンスを用いてフレームワークのための拡張機能を利用することができます。

[編集] SVGMapが持つ基幹オブジェクト

SVGMapLv0.1フレームワークのインスタンス'svgMap'が持つ基幹のオブジェクトを解説します。これらの基幹オブジェクトはそれぞれゲッター(getSvgImages, getSvgImagesProps)によって取得できます。

[編集] svgImages[]

getSvgImages()により取得できる。svgImages[hashID]は、 現在ローディングされているSVGドキュメント(“XML” DOMツリー(SVG DOMツリーというよりむしろ))が蓄積されているハッシュテーブル

• ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”
• なお、#レイヤー固有のUIのwebAppでは、そのレイヤーに該当するSVGドキュメントがsvgImageで取得できる。

[編集] svgImagesProps[]

getSvgImagesProps()によって取得できる。 同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル。 注記がない限り全てReadonly

• ハッシュID： svgImages同様
• なお、#レイヤー固有のUIのwebAppでは、そのレイヤーに該当するSVGドキュメントが持つ、各種プロパティがsvgImagePropsで取得できる。

[編集] プロパティリスト

• .Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス(クエリパートやフラグメント(ハッシュ)も含む)
• .CRS 地理座標からSVG座標に変換するための変換パラメータ
• .script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、script要素による動的な地図レイヤーの章を参照
• .editable 編集可能レイヤーを示す　レイヤーのclass = editableに対応
• .editing 編集可能レイヤーを編集中
• .isClickable クリッカブルなレイヤーを示す
  • true:設定　レイヤーのclass = clickableに対応
  • 以下をメンバーに持つオブジェクト:ハイライト時のスタイルを設定可能(rev18以降)
    • .hilightFillStyle : ポリゴンオブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
      • .color : 塗りの色 (CSS の color値として解釈される文字列)
      • .lineWidth : 線幅
    • .hilightStrokeStyle : 線オブジェクトのハイライト時スタイル（以下のメンバーが無い場合はハイライトしない）
      • .color : 線の色 (CSS の color値として解釈される文字列)
      • .widthIncrement : 線幅の増加値
• .parentDocId このSVG文書を埋め込んでいる、親のSVG文書のハッシュID
• .childImages[hashID] このSVG文書が読み込んでいる、子のSVG文書(複数)
• .refresh
  • .loadScript
  • .timeout
  • .start
• .controller レイヤー固有のUIへの(web appsのdoc rootに対する)相対パス
• .isSVG2 その文書がSVG2タイプの文書であるかどうか(CRSとembedの仕方がちがう）
• .rootLayer そのSVG文書が属する「レイヤー」を示す文書
• .scale そのSVG文書の現在のスケール。スケールはそのSVG文書の座標系と画面の座標系との間の値（地理座標系ではない）。拡大するとスケール値は大きくなる
• .preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数
• .hash そのレイヤーのURLのフラグメント部（この値は、レイヤ固有WebAppで変更が有効）

[編集] 利用可能API

【TBD】 APIのリストは下記の通りです。

[編集] SVGMap.で呼び出せるAPI

[編集] Geo2SVG

• Geo2SVG( lat , lng , crs ) : 指定された緯度(lat)・経度(lng)・CRSより、SVG座標を計算する

[編集] POIviewSelection

• POIviewSelection( poi ) : 指定されたPOIの属性・リンクの表示選択画面を表示する。また、選択したイベントに従い、属性の表示または、リンク先のページを表示する。

[編集] SVG2Geo

• SVG2Geo ( svgX , svgY , crs , inv ) : 指定されたSVG座標(svgX , svgY)をCRSにより、GEO座標に変換する。または、invにより逆変換する

[編集] addEvent

• addEvent(elm,listener,fn) : 指定された要素(elm)にイベント属性(listener)時の呼び出す関数(fn)を設定する (addEventListenerが実装されていなかったブラウザサポートの名残です)

[編集] callFunction

• callFunction( fname ,p1,p2,p3,p4,p5) : 指定した関数(fname)を引数(p1,p2,p3,p4,p5)を渡してフレームワーク内の任意の関数を実行する。(フレームワークの内部関数も呼び出すことができる)

[編集] captureGISgeometries

• captureGISgeometries( cbFunc , prop1 , prop2 , prop3 , prop4 , prop5 , prop6 , prop7 ): 現在画面上に表示中の地図コンテンツに対応した、GeoJsonのGeometryデータ構造に準拠のGISgeomerry情報をがレイヤ単位でまとまった連想配列の形で取り出す。非同期処理で、cbFuncの最初の引数に返却される。
  • 連想配列のハッシュ値：レイヤID
  • geomeryには、src(そのジオメトリのもととなっているSVGの図形要素), href(ビットイメージの場合のリンク)が付加される
  • geoJsonのgeometryに相当する情報が含まれる（座標は[経度,緯度]）
  • display="none"の図形要素は表示されていないとみなされる。また画面外にある図形要素も表示されていないとみなされる。画面に部分的に表示されている要素は表示されているものとみなされるとともにクリッピングも行われない。
  • captureGISgeometriesOption(true)を設定してから実行すると、ビットイメージもジオメトリとして取得する。（ただし実データは含まれないので必要に応じてgetImagePixelDataで取得する）
    • type : Coverage
    • src : 画像情報のURL
    • coordinates : transformのb,c==0の場合、当該画像の南西、北東端が設定される
    • transform : b,c!=0の場合の、画像の座標(左上隅を0,0、右下隅が画像のw,h)から地理座標([経度,緯度])への一次座標変換情報(a,b,c,d,e,f)が設定される

[編集] captureGISgeometriesOption

• captureGISgeometriesOption(BitImageGeometriesCaptureFlg, TreatRectAsPolygonFlg, SkipVectorRenderingFlg, captureAlsoAsBitImage): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
  • BitImageGeometriesCaptureFlg: ビットイメージタイルをカバレッジとして取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
    • 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
  • TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)
  • SkipVectorRenderingFlg: ベクトル図形の描画をスキップする
  • captureAlsoAsBitImage: polygon/polylineの図形を描画したビットイメージをレイヤー単位でカバレッジデータとして取得
• captureGISgeometriesOption(captureGISgeometriesOptionObject) : オブジェクトでも設定できる(rev18以降)（以下そのメンバー変数：全て値はboolean）
  • .BitImageGeometriesCaptureFlag, .TreatRectAsPolygonFlag, .SkipVectorRendering, .captureAlsoAsBitImage　上と同様

[編集] checkSmartphone

• checkSmartphone() : タッチに対応したスマホブラウザなのかどうかを判別

[編集] childDocOp

• childDocOp(func , docHash , param1, param2 , param3 , param4 , param5) : 指定した文書をルートにして、DOM操作をその子文書に対して実行する。なおこれはlinkedDocOpの直系の子供のみ適用版(自身も適用しない)

[編集] dynamicLoad

• dynamicLoad( docId , parentElem ) : 指定した文書ID(docId)以下の表示に必要な文書を読み込み、指定したdiv要素(parentElem)に表示する

[編集] escape

• escape(str) : 以下の文字をHTMLエスケープする(&:&amp,":&quot;,':&#039;,<:&lt;,>:&gt;)

[編集] geo2Screen

• geo2Screen( lat ,lng ) : 地理座標を指定すると、その画面上のキャンバスの座標(px)を返す

[編集] getBBox

• getBBox( x , y , width , height ) : 指定された値でviewBoxを作成する

[編集] getBasicPermanentLink

• getBasicPermanentLink(copyLinkTextToClipboard) : 現在の表示状態(レイヤーの表示非表示および表示領域)を反映した基本的なパーマリンクを生成する
  • URLオブジェクトが返却される
  • copyLinkTextToClipboardがtrue場合、クリップボードにもURLがコピーされる。
  • 生成されるURLは、#起動URLによるオプション指定の仕様に基づく
  • 参考：#サブレイヤーパーマリンク

[編集] getCentralGeoCoorinates

• getCentralGeoCoorinates() : グローバル変数 rootViewBox,rootCrsから画面中心地理座標を得る

[編集] getConversionMatrixViaGCS

• getConversionMatrixViaGCS( fromCrs , toCrs ) : 元座標変換行列(fromCrs)から先座標変換行列(toCrs)への変換行列を作成する