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

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

第一章：SVGMapの更新部分

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

地理座標系の扱い方

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ではルートコンテナを含む任意のSVGMapコンテンツ(レイヤールートコンテナやタイルなど)の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度に対応します。

メルカトル図法での地図表示

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

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

ルートコンテナにおいて、地図の初期表示状態を記述するドキュメントルート要素(<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変化すると、コンテンツの座標系でいくつ変化するのかを表す）

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

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

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

例

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

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

タイリングに関するノート

openLayersやleafletなどの従来の地図フレームワークでは、このようなタイリング機能は特定のタイリングロジックとパラメータを伴った専用の機能として地図フレームワーク本体に作りこまれたうえでしばしば提供されてきました。さらには地図フレームワークがこれらのタイリングロジックに強く依存したアーキテクチャを持っていました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用に問題を抱えてきました。次のリンクでその多くの議論や多様な提案を参照できるでしょう。TMSspecs@osgeowiki, tiling@osgeowiki ベクターデータのタイリングにおいては、その手法は探求中いっても良いでしょう。たとえば、我々の研究では、QuadTreeCompositeTilingのような用途によってはもっと優れたタイリングの手法も見いだされています。

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

SVG以外のデータサポートに関するノート

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

レイヤー固有ユーザインターフェース

Rev.12で拡張

SVGMapLevel0.1 Revision 12以降では、個々の地図レイヤーがそのレイヤーに特化したそれぞれ固有のユーザーインターフェースを備えることができる機能が拡張されました。ユーザーインターフェースはhtmlによる任意のウェブアプリとして構築でき、それは新たに設計されたレイヤー選択UIを通してiframe中に呼び出されます。この機能を用いるにはSVGMapLevel0.1フレームワークに加えて、拡張フレームワーク(SVGMapLv0.1_LayerUI2_r*.js)をロードする必要があります。

詳細は#レイヤー固有のUIを参照してください。

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

たとえば気象情報のレイヤーに対して気象情報の時間変化を表示するアニメーションのコントローラ　などのようなUIを任意に構築できます。

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

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文書と呼ぶことにします。

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

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

<script type="text/javascript" src="SVGMapLv0.1_r*.js"></script>
注記:r*は、フレームワークのリビジョンによって変化する

レイヤーリストを実装した拡張フレームワークのjavascriptコードを読み込むscript要素(必要に応じて)

<script type="text/javascript" src="SVGMapLv0.1_LayerUI2_r*.js"></script>
注記:r*は、フレームワークのリビジョンによって変化する

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

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

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

これらのライブラリは、gitHubリポジトリで取得できます。(svgMapCesiumWrapperを除く) まだ実験的なsvgMapCesiumWrapperは、svgMap cesium visualizerページを参照ください。

SVGMapコンテンツを配置するためのdiv要素。

id属性に"mapcanvas"を設定し、title属性(もしくはdata-src属性(>rev14))にはルートとなるSVGコンテンツ（以降ルートSVGコンテンツと呼びます）のパスを指定したdiv要素を設置します。（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ）

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

<div id="mapcanvas" data-src="Container.svg"></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コンテンツを埋め込むことがあります。これらのコンテンツはよくサブレイヤーもしくは単にレイヤーと呼ばれることもあります。そこで、"ルート"をあえて付記することにします。

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

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

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

クリッカブルオブジェクト

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

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

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

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

グルーピング: 以下の属性値以外の値を指定すると、グループ名として認識され、同じグループ名を持ったレイヤーたちをグルーピングすることができます。グルーピングの効果はレイヤーＵＩにおけるグループ表現と、下記のbatch,switch特性です。
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>

実装されている機能

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

要素

TBD

path
image
- spatial fragment (xywhによっ参照されるimageの部分を埋め込む)。もしもアスペクト比が異なった場合（ＴＢＤ）
circle
text
defs
animation
iframe
globalCoordinateSystem
view

属性

TBD

ref(svg,
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フレームワーク)
動的な地図レイヤー
- script要素 script要素による動的な地図レイヤー
- data-controller　レイヤー固有のUI

SVGMapフレームワーク

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

SVGMapが持つ基幹オブジェクト

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

svgImages[]

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

ハッシュID：フレームワークが任意に付番した文書ID。ただし、最初にロードされるルートのドキュメントのハッシュキーは、”root”

svgImagesProps[]

同、個々のSVGドキュメントが持つ、各種プロパティが蓄積されているハッシュテーブル

ハッシュID： svgImages同様

プロパティリスト

.Path コンテンツのパス（webAppsのdocument(html) rootに対する相対パス。Originが違う場合は絶対パス
.CRS 地理座標からSVG座標に変換するための変換パラメータ
.script SVG文書がscript要素を持つとき、そのscriptへのインターフェースが登録される。同script要素で生成されるオブジェクトに暗黙に登録されるメンバー変数については、script要素による動的な地図レイヤーの章を参照
.editable 編集可能レイヤーを示す　レイヤーのclass = editableに対応
.editing 編集可能レイヤーを編集中
.isClickable クリッカブルなレイヤーを示す　レイヤーのclass = clickableに対応
.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文書の現在のスケール
.preRenderControllerFunction そのSVG文書の再描画(画面更新)シーケンスの直前に実行される関数

利用可能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(ビットイメージの場合のリンク)が付加される

captureGISgeometriesOption

captureGISgeometriesOption(BitImageGeometriesCaptureFlg,TreatRectAsPolygonFlg): captureGISgeometriesでキャプチャするデータの取得条件を設定する。
- BitImageGeometriesCaptureFlg: ビットイメージタイルを取得するか(Default:false)。captureGISgeometriesを呼び出す前に使用する。
  - 2019.5.17アップデートで、transform matrix(非対角要素あり)を持つビットイメージタイルについても必要な情報を得られるようになった。
- TreatRectAsPolygonFlg: rect要素をポリゴンとして扱う(デフォルトは円もrectもPointとして扱われる)

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,":",':',<:<,>:>)

geo2Screen

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

getBBox

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

getCentralGeoCoorinates

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

getConversionMatrixViaGCS

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

getDevicePixelRatio

getDevicePixelRatio( docId ) : seDevicePixelRatioで設定した値を取得できる。 docIdが指定されなかった場合は全ての値が得られる

getElementByImageId

getElementByImageId( XMLNode , searchId ) : 指定されたSVG文書群ノード(XMLNode)以下の属性iidが指定されたID(searchId)と等しいノードを返す

getGeoViewBox

getGeoViewBox() : ルートSVGのviewBoxをgeo変換したgeoのviewBoxを取得

getHashByDocPath

getHashByDocPath ( docPath ) : ターゲットのレイヤーのハッシュをPath名(docPath)から探し出す

getHyperLink

getHyperLink( svgNode ) : 指定されたsvg文書(svgNode)から、親文書をたどり最初に取得できたハイパーリンクを取得

getInverseMatrix

getInverseMatrix(matrix) : 逆行列を求める(matrix.a..f)

getLayer

getLayer(layerID_Numb_Title) : レイヤーのID,title,番号,href(URI)のいずれかで、ルートコンテナSVGDOMにおけるレイヤーの(svg:animation or svg:iframe)要素を取得する。getLayersと似ているが、getLayersのほうは任意のsvg文書(オプションなしではroot container)に対して、内包されるレイヤーのリストを返却。こちらはrootコンテナに対して検索キーに基づいてレイヤーを返却する

getLayerId

getLayerId( layerKey ) : ルートコンテナにおける"レイヤ"概念のレイヤidを検索する。検索に用いることができるのは、getLayerと同じtitle,url,もしくはルートレイヤの要素

getLayers

getLayers( id ) : オプションなしの場合、ルートSVGコンテナのレイヤーに該当する要素をリストアップし、返却する。オプションアリの場合、そのidを持つ要素を返却

getLinearTransformMatrix

getLinearTransformMatrix(x1i,y1i,x2i,y2i,x3i,y3i,x1o,y1o,x2o,y2o,x3o,y3o) : ３つの基準点の変換前後の座標を与えると、それに適合する1次変換行列が得られる。(*i:変換前の座標, *o:変換後の座標)

getMapCanvas

getMapCanvas() : 地図キャンバスとなる、おおもとのdiv要素の取得

getMapCanvasSize

getMapCanvasSize() : 地図キャンバスのサイズ(画面サイズ)を取得

getMouseXY

getMouseXY( evt ) : 指定されたイベント時のマウスの画面上の座標(px)を返す

getNonScalingOffset

getNonScalingOffset(svgPoiNode) : 拡大縮小しても伸縮しない図形要素のオフセット値を取得する

getObject

getObject( oname ) : 指定されたオブジェクト(oname)を取得

getPoiPos

getPoiPos( svgPoiNode ) : =getNonScalingOffset

getRoot2Geo

getRoot2Geo() : ルートSVGのCRSの逆変換CRS( rootのsvg - > geo )を取得

getRootCrs

getRootCrs() : ルートSVGのCRS ( geo->rootのsvg )を取得

getRootLayersProps

getRootLayersProps() : ルートコンテナの(animetion||iframeで構成される)レイヤー情報を取得する。Arrayが返却、並び順はsvgのルートコンテナと同じ（最初のレイヤーが一番下。selectメニュー創るときはひっくり返して使うこと）レイヤー情報：名称、表示非常時状態、レイヤーグループ、グループのフィーチャ(バッチ||スイッチ||ふつう)、編集可、編集中、対応SVGドキュメント、個別ユーザインターフェース、個別凡例

getRootViewBox

getRootViewBox() : aspectを加味し実際に開いているルートSVGのviewBoxを取得

getSvgImages

getSvgImages() : svg文書群(XML)(arrayのハッシュキーはimageId("root"以外は"i"+連番))を取得

getSvgImagesProps

getSvgImagesProps() : svg文書群のプロパティ( .Path,.CRS,.script,.editable,.editing,.isClickable,.parentDocId,.childImages,.controller)を取得

getSvgTarget

getSvgTarget( htmlImg ) : html文書中のimg要素(POI)を入力すると、対応するSVG文書の文書番号とその要素(use)が出力される。対応するuse要素を持つsvg文書自体を取得したい場合は.ownerDocumentする。idからhtml文書のimg要素を取得するには、Document.gelElementById(id)

getSwLayers

getSwLayers ( cat ) : swLayers[クラス名]に、クラス名ごとのレイヤー(のSVG要素)の全リストを構築する。catがある場合は、catの名称を持つもののリストのみを構築する

getSymbols

getSymbols(svgDoc) : POI編集のsymbol選択を可能にするとともに、defsは、useより前に無いといけないという制約を払った

getTickerMetadata

getTickerMetadata() : 現在Tickerが表示されているグラフィックスオブジェクトのメタデータを取得する

getTransformedBox

getTransformedBox ( inBox , matrix ) : 指定されたviewBox(inBox)を変換行列にてサイズ変更と移動のみでの座標変換する。b=0、c=0の場合のみ利用可能

getUaProp

getUaProp() : ブラウザの種類(isIE：IEかどうか、isSP：スマートフォンかどうか)を取得する

getVerticalScreenScale

getVerticalScreenScale(screenLength) : 垂直(緯度)方向のscreenLengthに対する長さを取得する(input: px, return : Km)

getViewBox

getViewBox( svgDoc ) : 指定したSVG文書のviewBoxを取得

gps

gps() : ブラウザの測位APIによって測位しその点を中心に表示、表示縮尺は測位精度を元に適当に決定

gpsCallback

gpsCallback(position) : GPS測位が成功した後に実行されるコールバック関数で、positionを中心とした場所を表示させる

handleResult

handleResult( docId , docPath , parentElem , httpRes , parentSvgDocId ) : SVG文書を(docPathから)svg文書群とそのプロパティをHTTPXMLRequest(httpRes)から親文書(parentSvgDocId)の子文書(docId)として読込み、指定されたHTML要素(parentElem)に貼り付ける

ignoreMapAspect

ignoreMapAspect() : 地図のアスペクト比を、rootSVGのviewBox( or hashのviewBox)そのものに設定する

initLoad

initLoad() : load時に"一回だけ"呼ばれる初期化関数

isIntersect

isIntersect( rect1, rect2 ): rect1(x,y,width,height)とrect2が交差(包含も含む)しているかどうかを返却

linkedDocOp

linkedDocOp( func , docHash , param1, param2 , param3 , param4 , param5 ) : 再帰実行のルートになる文書のハッシュ(docHash)以下の子・孫・・・文書に対して、同じ処理(func( docHash , param1, param2 , param3 , param4 , param5 ))を再帰実行する関数

loadSVG

loadSVG( path , id , parentElem , parentSvgDocId) : SVG文書を(pathから)svg文書群とそのプロパティを親文書(parentSvgDocId)の子文書(id)として読込み、指定されたHTML要素(parentElem)に貼り付ける

matMul

matMul( m1 , m2 ) : 行列の積 x',y' = m2(m1(x,y)) = m(x,y) となる変換行列を構築

numberFormat

numberFormat( number , digits ) : 指定された数値(number)を小数点以下第digit+1位を四捨五入した値を取得

override

override( mname , mval ) : グローバルオブジェクトの関数プロパティでmnameという変数にmvalの値を代入する

parseEscapedCsvLine

parseEscapedCsvLine(csv) : CSV 1行分文字列データ(csv)をエスケープを考慮して配列にパースする。

refreshScreen

refreshScreen() : 画面の再描画を実行する

registLayerUiSetter

registLayerUiSetter( layerUIinitFunc, layerUIupdateFunc ) : レイヤー選択UI初期化関数と更新用関数を設定する

reLoadLayer

reLoadLayer(layerID_Numb_Title) : 指定したレイヤー(ルートコンテナのレイヤーのみ。小孫レイヤーはNG)をリロードする

resumeToggle

resumeToggle(evt) : 引数のイベント(evt)ターゲットのチェックボックスのチェック状態により、setResumeを実行する

screen2Geo

screen2Geo( screenX , screenY ) : 画面上の座標(px)を指定すると、その地理座標を返す

setCustomModal

setCustomModal( messageHTML , buttonMessages , callback,callbackParam) : モーダル画面を表示し、指定されたメッセージ(messageHTML)、指定されたボタン(buttonMessages(Array))を表示する。ボタンが押された場合、コールバック関数(callback)を引数(クリックしたボタンのインデックス, callbackParam)を渡し呼び出す

setDevicePixelRatio

setDevicePixelRatio( dpr (, layerId) ) : zoom計算時に用いる(たとえば２にするとzoom値が本来の２分の１になる)変数を指定値(dpr)に設定する。ズームに応じた表示制御(visible*zoom属性等)に影響を与える。オプションのlayerIdを指定すると、指定したlayerに対して別個の値を設定する。dprにnullを与えると初期値(1)にクリア。

setGeoCenter

setGeoCenter( lat , lng , radius) : 中心地理座標を指定して地図を移動 (radiusは緯度方向の度1≒110Km) lat,lng:必須 radius:オプション(今の縮尺のまま移動)

setGeoViewPort

setGeoViewPort( lat, lng, latSpan , lngSpan , norefresh) : 地理(グローバル)座標系で指定したエリアを包含する最小のviewportを設定する

setLayerVisibility

setLayerVisibility(layerID_Numb_Title) : 指定したルートコンテナのレイヤーの表示非表示を設定し、layerListUIのアップデートも行う

setMapCanvas :

setMapCanvas : ( mc ) : 地図キャンバスとなる、おおもとのdiv要素を指定した要素(mc)に設定

setMapCanvasCSS

setMapCanvasCSS(mc) : マップキャンバスのCSS(postion、overflow、top、left、width、height)を設定

setMapCanvasSize

setMapCanvasSize( mcs ) : 地図キャンバスのサイズを指定したサイズ(mcs)に設定

setPreRenderController

setPreRenderController( docId, cntFunc ) : 再描画(画面更新)シーケンスの直前に実行する関数(cntFunc)を設定する。　layerIdが指定されていると、そのIDをもつSVG文書に対して設定する。指定されていない場合は、全てのSVG文書に対して指定した関数が描画前に実行される。cnfFuncが無い場合は設定を解除する。また、cntFuncには再描画前制御の際に必要になるかもしれないいくつかの変数が第一引数にオブジェクトの形で渡される。(docId,scale,actualViewBox,geoViewBox,viewChanged(zoom|scroll|false) なお、SVGMapLayerUI.jsが有効化されている場合、レイヤ固有UIのhtml文書中のscript内にpreRenderFunctionという関数がある場合、そのレイヤーを指定したsetPreRenderControllerでの関数設定と同じ振る舞いをする。なお、この処理内容は、動的レイヤー(<script>を持つSVGコンテンツ)のonload関数と同じタイミングで呼び出される関数をレイヤ固有UI等に設置できるものと考えると良い。

setResume

setResume( stat ) : レジュームを実行するかどうかを引数(stat)によって設定し、cookieにレイヤー情報を保存する

setRootLayersProps

setRootLayersProps(layerID_Numb_Title, visible , editing ) : ルートコンテナの(animetion||iframeで構成される)レイヤー情報を設定する。layerID_Numb_Titleは、レイヤー番号(root svg container内での順番)、レイヤーID(svg文書のiid = htmlのid = selectのvalue)、タイトル名(不確実-同じ名前があるかもしれない。最初に当たったものを選択)。変化があるとtrueが返却される。visible , editingはtrue,false,nullのいずれか。nullの場合、その値を変化させないという意味。もしくは不合理の場合はfalseが返却される。この時classで設定されているレイヤーグループの特性(switch)に基づいた制御がかかる　ただしlayerListUIのアップデート(updateLayerListUI())は別途行う必要がある

setRootViewBox

setRootViewBox ( rvb ) : aspectを加味し実際に開いているルートSVGのviewBoxを指定したルートSVGのviewBox(rvg)に設定*setShowPoiProperty( func , docId ) : 特定のレイヤー・svg文書(docId)もしくは、全体に対して別のprop.表示関数(func)を指定する。funcが未指定の場合、設定された関数をクリアする。指定した関数は、帰り値がfalseだった場合、デフォルトprop.表示関数を再度呼び出す

setShowPoiProperty

setShowPoiProperty(func , docId ): 特定のレイヤー・svg文書(いずれもdocIDで指定)もしくは、全体に対してPOIをクリックした時の表示関数をセットする
- セットされていないときは内蔵のデフォルト関数が使用される
- docId: セットされていないときはすべてのレイヤの docIdがルートレイヤに対応するものの場合はそのレイヤー下の子孫文書に対しても
- func: コールバック関数
  - funcがセットされいていないときはクリアする
  - funcの第一引数にはクリックされた要素が入る

setSmoothZoomInterval

setSmoothZoomInterval(zoomInterval) : ズームアニメーションの設定(ズームイン／アウト後のタイル読み込み開始タイマー(ms))(Default:20ms)

setSmoothZoomTransitionTime

setSmoothZoomTransitionTime(zoomTransitionTime) : ズームイン／アウト時の遷移時間(Default:300ms)

setSummarizeCanvas

setSummarizeCanvas( val ) : 2Dベクトル図形描画用に統合キャンバス(レイヤー単位でのキャンバス統合)の使用有無を設定する。デフォルトは統合する

setUpdateCenterPos

setUpdateCenterPos(func) : 中心座標書き換え関数を指定した関数に設定(デフォルト:id="centerPos"要素の文字列を適当に書き換える)

setProxyURLFactory

setProxyURLFactory( documentURLviaProxyFunction, imageURLviaProxyFunction, imageCrossOriginAnonymous, imageURLviaProxyFunctionForNonlinearTransformation, imageCrossOriginAnonymousForNonlinearTransformation ): コンテンツの取得をプロキシ経由にする。
- documentURLviaProxyFunction : svgドキュメント用のプロキシ経由のURLを生成する関数をここに設定する。URLviaProxy = documentURLviaProxyFunction(URL)
- imageURLviaProxyFunction : 同ビットイメージ用
- imageCrossOriginAnonymous : ビットイメージのコンテンツ取得に際しcrossorigin = "anonymous"を設定
- imageURLviaProxyFunctionForNonlinearTransformation: ビットイメージへの非線形図法変換専用のプロキシ経由URL生成関数を設定する。
- imageCrossOriginAnonymousForNonlinearTransformation : 同上のコンテンツ取得に際しcrossorigin = "anonymous"を設定

setZoomRatio

setZoomRatio ( ratio ) : zoomUp、zoomDownボタン押下時のズームレシオを指定した値(ratio)に設定する

showModal

showModal( htm , maxW, maxH) : モーダル表示フレームワークを呼び出し、指定したhtm文字列を最大maxW,H値の中で表示する。closeボタンはフレームワークで設置される

showPage

showPage( hyperLink ) : 指定されたハイパーリンク先のページを表示する。ハッシュだけの場合は viewPort変化をさせる

showUseProperty

showUseProperty( target ) : 指定されたPOI( target )の属性情報を表示する

transform

transform ( x , y , mat , calcSize , nonScaling) : 指定された座標を変換する。

updateLayerListUI

updateLayerListUI() : レイヤーリストのUIの表示を更新させる

zoomdown

zoomdown() : 同ズームダウン

zoomup

zoomup() : 地図をズームアップ：倍率は1.732倍固定

svgMapAuthoringTool.で呼び出せるAPI

以下のAPIは、SVGMapLv0.1_Authoring_r*.jsを用いた場合に使える

initPOItools

initPOItools(targetDiv,poiDocId,cbFunc,cbFuncParam,getPointOnly,returnSvgElement)　: 複数のPOIを編集するツールを初期化する (このツールは一個しか設置できない)
- targetDiv: 編集ツールを設置するDIV要素
- poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
- cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
- cbFuncParam : 同コールバック関数に渡す引数(Optional)
- getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
- returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)

initPOIregistTool

initPOIregistTool(targetDiv,poiDocId,poiId,iconId,title,metaData,cbFunc,cbFuncParam,getPointOnly,returnSvgElement): 一個のPOINTオブジェクトの登録ツール・座標入力ツールを初期化する
- initPOItoolsと異なりこちらのツールは複数個設置できる
- targetDiv: 編集ツールを設置するDIV要素
- poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
- poiId : 登録するPOIのIDを指定
- iconId : 対象文書内のアイコンのIDを指定
- title : アイコンのタイトルを指定
- metaData : アイコンのメタデータ文字列を指定
- cbFunc : 編集完了時に呼び出すコールバック関数(Optional)
- cbFuncParam : 同コールバック関数に渡す引数(Optional)
- getPointOnly : ポイントを取得するのみで、その点にuse要素を設置することはしない(Optional)
- returnSvgElement : trueで編集したSVG要素などがコールバック関数に構造化され返却される(Optional)

initPolygonTools

initPolygonTools(targetDiv,poiDocId,cbFunc,cbFuncParam,isPolylineMode): POLYGONオブジェクトの"編集"ツール新規追加、削除、変更などが可能　ただし一個しか設置できない
- ルートSVGコンテンツでclickable及びeditableを設定したレイヤーで再編集可能
- targetDiv: 編集ツールを設置するDIV要素
- poiDocId : 対象とするDocId　文書にはuse要素でPointを設置するため、defs要素によって少なくとも一個以上のアイコンがあらかじめ定義されている必要がある
- cbFunc : 編集完了時に呼び出すコールバック関数(Optional)　第一引数にはツールの完了状態が文字列で返却される
  - 第一引数に成否、第二引数にcbFuncParam が入る。作成したPOIの情報は、SVGDOMから得るか、指定したdiv内に生成されているフォームから得る（少し使いづらいので、今後もう少し便利にするかもしれません）
- cbFuncParam : 同コールバック関数に渡す引数(Optional)
- isPolylineMode : ポリゴンではなくポリラインの編集ツールとする

setTargetObject

setTargetObject: TBD プログラムから編集対象オブジェクトを指示する（ただし編集中レイヤのオブジェクトに限る）

isEditingGraphicsElement

isEditingGraphicsElement: 編集中のオブジェクトがあるかどうかを確認する

clearTools

clearTools: オーサリングツールを除去する。

cancelPointingPoiRegister

cancelPointingPoiRegister: initPOIregistToolで設置したUIの地図クリック・タッチでの座標入力イベント(click, touchend)をキャンセルする

svgMapGIStool.で呼び出せるAPI

以下のAPIは、SVGMapLv0.1_GIS_r*.jsを用いた場合に使える。なお本機能拡張はjsts.min.jsの読み込みがさらに必要。

buildDifference

buildDifference( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, getResultAsGeoJsonCallback,getResultAsGeoJsonCallbackParam)
- JSTSのDifferenceを実行
- 引数はbuildIntersectionの該当引数に対応

buildIntersection

buildIntersection( sourceId1, sourceId2, targetId , strokeColor, strokeWidth, fillColor, progrssCallback, addSourceMetadata, getResultAsGeoJsonCallback, getResultAsGeoJsonCallbackParam )
- sourceId1とsourceId2のレイヤーに対してJSTSのIntersectionを実行し、結果をtargetIdレイヤーにコンテンツとして出力する。性能はgetIncludedPointsより低いことが多い intersection処理の振る舞いはJSTSを参照
- sourceId1: sourceId1レイヤーのレイヤーID
- sourceId2: sourceId2レイヤーのレイヤーID
- targetId : targetId レイヤーのレイヤーID
- strokeColor : 線の色 (なお、strokeColor, strokeWidth, fillColor のいずれも指定ない場合は描画しない(getResultAsGeoJsonCallbackがあればそこに結果を変換するのみ))
- strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
- fillColor : 塗りの色
- progrssCallback: 変換途中の状況が返されるコールバック関数。
- addSourceMetadata: sourceId1とsourceId2の各図形要素に付随しているメタデータ(contentアトリビュートの値)を演算結果の該当する図形要素に結合して付加する。
- getResultAsGeoJsonCallback: 演算結果をgeoJsonで返却を受けたい場合にコールバック関数を指定する。第一引数に結果が返る
- getResultAsGeoJsonCallbackParam : 上記コールバック関数に送りたい引数(第二引数に入力される)

captureGeometries

captureGeometries( cbFunc , opt ) : svgMap.captureGISgeometriesの引用

coverageImageXY2LatLng

coverageImageXY2LatLng(pixWidth , pixHeight, px,py,targetCoverage) : ビットイメージカバレッジのピクセル座標から地理座標を算出する関数
- pixWidth, pixHeight : ビットイメージカバレッジのサイズ
- px,py : ビットイメージカバレッジのピクセル座標
- targetCoverage : getInRangePolygonParts で得られた返り値を設定する

drawGeoJson

drawGeoJson( geojson , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm) : geojsonのgeomerty を指定したレイヤーに描画する
- geojson : geojson データのgeopmetry
  - メタデータ : メタデータはgeojsonの本来のメタデータ仕様(type:Featureのオブジェクトにpropertiesを設置する)で設定可能
    - また、連想配列もしくは配列の形で、関数の呼び出し時のmetadataパラメータでデフォルトのメタデータを指定できる。
    - また、geoJSONの任意のデータ階層にmetadataプロパティとしても埋め込める。
    - 加えて、propertiesを同様に任意のデータ階層に設定できる(この場合、上の階層の値は下の階層の値で上書きされる)
  - スタイリング : メタデータ仕様を拡張した、geojsonのmapbox拡張仕様に基づいて、描画スタイルを各Featureに設定可能　上記の拡張properties拡張により、デフォルト描画スタイルを設定することも可能。marker-sizeは未実装。marker-symbolではsvgコンテンツのdefsで登録済みのアイコンのIDを指定する。
- targetSvgDocId : 描画先のレイヤーID
- strokeColor : 線の色
- strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
- fillColor : 塗りの色
- POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
- poiTitle : POIのタイトル
- metadata : POIのメタデータ（連想配列）
- parentElm : (Optional) 指定した要素の子要素として描画
- metaDictionary: (Optional) メタデータとして要素に埋め込みたい属性のリストを配列で指定する(これ以外の属性は無視するようになる

drawKml

drawKml( kml , targetSvgDocId, strokeColor, strokeWidth, fillColor, POIiconId, poiTitle, metadata, parentElm,styleData) : KMLを指定したレイヤーに描画する
- KML : KML 描画するKMLデータのXML DOM
- targetSvgDocId : 描画先のレイヤーID
- strokeColor : 線の色
- strokeWidth : 線幅（ただし、nonScalingStrokeのため px)
- fillColor : 塗りの色
- POIiconId :　Pointの場合のアイコンID(あらかじめ指定した描画先のレイヤーのコンテンツに該当IDのアイコンが定義されている必要がある)
- poiTitle : POIのタイトル
- metadata : POIのメタデータ文字列
- parentElm : (Optional) 指定した要素の子要素として描画
- styleData : TBD

getExcludedPoints

getExcludedPoints(poiID, polyID, cbFunc, param , progrssCallback , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されないものを抽出する。
- パラメータはinverseを除きgetIncludedPointsと同じ。

getImage

getImage(sourceData, renderingOptions ) : メッシュデータからビットイメージを生成
- sourceData : 以下のデータ構造を持つオブジェクト
  - width, height メッシュのピクセル数
  - rasterData[py][px] 以下のデータ構造を持つオブジェクト
    - color 以下のデータ構造を持つオブジェクト
      - r,g,b,a
    - inRange : boolean
- renderingOptions : 以下のデータ構造を持つオブジェクト
  - drawOutOfRange : boolean レンジ内ではなくレンジ外を描画する
  - fillColor : boolean 上記条件のピクセルを指定した色で描画する
  - useCoverageColor 上記条件のピクセルをカバレッジの色で描画する

getIncludedPoints

getIncludedPoints(poiID, polyID, cbFunc, param , progrssCallback , inverse , pointOnly ) : 指定したpoiID検索対象レイヤーのうち、指定したpolyIDポリゴンコンテンツレイヤーのポリゴンに内包されるものを抽出する。
- poiID : 検索対象コンテンツレイヤーのレイヤID
- polyID : ポリゴンコンテンツレイヤーのレイヤID
- cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
- param : cbFuncに渡す任意パラメータ(第三引数に入る)
- progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
- inverse : trueで getExcludedPoints
- pointOnly : trueの場合検索対象コンテンツレイヤーのジオメトリがPoint以外の物は無視、false(もしくは未設定)の場合はPolygonやMultiLineStringのデータの場合中心点をPointと見立てて検索なお、ポリゴンやポリラインのしっかりした処理を期待する場合は下記のbuildIntersectionを使用すべき。

getInRangePoints

getInRangePoints(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : 検索対象のPointジオメトリが、検索条件としてのラスターデータ(カバレッジ)の特定色域に入っているものを検索する（ラスターGIS機能）
- poiID_or_points : 検索対象のPointジオメトリのあるレイヤIDもしくは、geoJsonのPointジオメトリ自体
- coverIDラスターデータ(カバレッジ)のレイヤーID
- rangeData : 色域 .hue, .satulation, .value, .alphaをそれぞれ指定する
  - hue: 0..360
  - satulation, value, alpha : 0..100
  - .hue, .satulation, .value, .alphaそれぞれのレンジは[[range1Min,Max],[range2Min,Max],...[rangenMin,Max]]の形で指定する。
  - データがない場合のデフォルトは{hue:[[0,360]],satulation: [[10,100]],value:[[10,100]],alpha:[[10,100]]} : アルファが10以上の全ての色
  - .outOfBoundsColor : TBD {r:255,g:0,b:0} の形で色を指定するとその色のピクセルは領域外(存在しないもの)として評価をスキップする
- cbFunc : 検索完了後の結果を返却するコールバック関数　第一引数にポイントがGeoJasonのGeometry形式で返却され、第二引数にその個数、第三引数に(あれば)下記paramが返却される
- param : cbFuncに渡す任意パラメータ(第三引数に入る)
- progrssCallback : 変換途中の状況が返されるコールバック関数。　変換中　時々呼び出され、変換状態[%]が第一引数に渡される。
- preCapturedGeometry : svgMap.captureGISgeometries()であらかじめ取得したgeometryがある場合、それを投入するとそれを用いて処理する
- computingOptions : getInRangeGeometriesOnCoverageを参照

getInRangeLineParts

getInRangeLineParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ラインストリングジオメトリ用のラスターGIS機能パラメータはgetInRangePoints()と同じ

getInRangePolygonParts

getInRangePolygonParts(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry , computingOptions ) : ポリゴンジオメトリ用のラスターGIS機能 getInRangePoints()と同じ

getInRangeGeometriesOnCoverage

getInRangeGeometriesOnCoverage(poiID_or_points, coverID, rangeData, cbFunc, param , progrssCallback , preCapturedGeometry, computingOptions ) : getInRange*を包含する関数
- computingOptions.targetVectorTypeで以下を設定することでそれぞれの機能を動かすことができる
  - 0:point,1:polyline(multiLineString),2:polygon
- computingOptions:
  - overlappingCoverage : "or"
  - splitByCoverage : boolean カバレッジが複数のビットイメージ(タイル)で構成されている場合、タイルごとに分割した答えを返す

haltComputing

haltComputing() : getIncludedPoints, getExcludedPoints, buildIntersectionを中断する

imageUrlEncoder

imageUrlEncoder : オリジナルのURLから、setImageProxyの設定を加味したURLを生成する関数

latLng2coverageImageXY

latLng2coverageImageXY(pixWidth , pixHeight, lng,lat,targetCoverage) : 地理座標からビットイメージカバレッジのピクセル座標を算出する関数
- pixWidth, pixHeight : ビットイメージカバレッジのサイズ
- lng,lat : 地理座標
- targetCoverage : getInRangePolygonParts で得られた返り値を設定する

latLng2GeoJsonPoint

latLng2GeoJsonPoint(lat , lng ) : 緯度経度をGeoJsonのPointジオメトリに変換する
renderImages

setImageProxy

setImageProxy( url , directURLls , useAnonProxy): getInRangePointsは、canvasを使った処理のため、CORSの制約にかかる場合、proxyを設定して回避できる。
- url : encodeURIComponent()でエンコードしたカバレッジのレイヤーのビットイメージのURLを付加すると、proxyとしてimageを返却してくれるURL文字列を指定
- directURLls : proxyを使わず直接アクセスするコンテンツを判定するための文字列の配列（この文字列のどれかが含まれていたら直接アクセス）
- useAnonProxy : Image.crossOrigin = "anonymous"を指定してアクセスする

svgMapLayerUI.で呼び出せるAPI

以下のAPIは、SVGMapLv0.1_LayerUI2_r*.jsを用いた場合に使える。

assignLayerSpecificUiElement

>r4
assignLayerSpecificUiElement( targetElement , isInline , autoSizing) : レイヤ固有UIを出力する先のDOM要素を指定する
- この関数は、レイヤーUIの初期化前～ルートコンテナ読み込み前に呼ばれる必要がある（すなわち、load時のみ有効）
- targetElement : 出力先要素：出力先はsvgMapオブジェクトを持つwindowでなくても良い
- isInline : boolean 指定した要素をインライン要素として扱い、UIが存在しえない場合は消える。レイヤ固有UIを消すボタンも付与される
- autoSizing : boolean 自動リサイズを有効化

customEvents

customEvents() : サポートしているイベントを返却

launchController

>r4
launchController(layerID, cbf) : レイヤ固有UIを出現させる。ただしそのレイヤーがレイヤー固有UIを持っており、且つ表示状態になっている必要がある。
- layerID : レイヤーのID
- cbf (optional) : レイヤー固有UIが生成されたとき、第一引数にレイヤー固有UIのwindowオブジェクトが返却される。

layerSpecificUIhide

layerSpecificUIhide() : レイヤ固有UIを隠す

setLayerListmessage

setLayerListmessage( head , foot ) : head 及び footで指定した文字列を　レイヤリストUIのトップのメッセージに設定する。[head]numberOfVisibleLayers[foot] : デフォルトはhead :"Layer List: ", foot :" layers visible"

svgMapCesiumWrapper.で呼び出せるAPI

実験的機能段階 :

- 以下のAPIは、SVGMapLv0.1_CesiumWrapper_r*.jsを用いた場合に使える。

- また、ここから呼び出されるCesiumビジュアライザーは、それ専用のwebApps(cesiumWindow*.jsを読み込んだもの)を備えた別のブラウジングコンテキストで起動される。

- 詳細はサンプルページを参照。(TBD)

- CESIUM起動用のボタンやパラメータ設定用UIはライブラリが

- svgMapCesiumWrapper.setCesiumWindowHtmlLocationで連携用WebAppsを指定

- <img id="3DviewButton" .../>で3D可視化アイコンを設置することで3D可視化機能が起動

openCesium(callBackFunc)
cesiumのオブジェクトが構築されるのを待ちつつcesiumのwindowをオープンする。 callBackFuncがある場合は、cesiumWindowが準備されたらそれを実行する
visualizeCurrentSvgMap(complex)
3D可視化ボタンを押したときに最初に呼び出される関数 complex:"true"の場合POIのバーグラフ化を行う
getCesiumWindow()
連携用CesiumビジュアライザーのWindowオブジェクトを取得
setCesiumWindowHtmlLocation(path)
pathで連携Cesiumビジュアライザーを指定する
- 連携用Cesiumビジュアライザーの説明
  連携用ライブラリcesiumWindow*.jsが読み込まれた、WebApps(htmlコンテンツ)
  reldir2imageUrlグローバル変数に、SVGMapコンテンツのルートコンテナのあるディレクトリを指定
  directURLlistでプロキシへ接続しなくて良いデータのURLのキーワードを指定
  cesiumProxyURLでプロキシ―サーバの相対パスを指定(cesiumはビットイメージデータもCORに則ったコンテンツでないと読み込めないため)
  cesiumWindow*.jsは上記のパスの後に、取得すべきコンテンツのURLを単純に文字列として追加してプロキシにリクエストを出す

svgMapPWA.で呼び出せるAPI

実験的機能段階 :

以下のAPIは、SVGMapLv0.1_PWA_r*.jsを用いた場合に使える。

- SVGMap.jsをPrpgressiveWebApps(PWA)として動作させ、オフラインでも利用できるウェブアプリを構築することができる。

- Progressive Web Appsが機能するブラウザで有効。Chrome,Edge(PC,Android), Safari(Apple製品)

- iOS SafariのPWAネイティブキャッシュの50MB制限を回避するIndexedDBによる実装がなされており、そのクォータが許す限りの(iOSでも数百MB以上の)オフライン地図コンテンツを利用できる

- 同じく、iOS Safariが持たないsyncの一部を代替する機能(オンラインになったらポストする機能)が利用できる

- zip圧縮されたオフラインコンテンツパッケージ読み込み機構を使う場合はzip.jsおよびそれが利用するArrayBufferReader.js,deflate.js,inflate.jsの読み込みが必要。

- serviceWorkerPathグローバル変数で、専用のサービスワーカープログラムsvgMapServiceWorker_r*.jsのパスを指定する必要がある。

- サービスワーカー～svgMapServiceWorker_r*.jsは、同jsと同じディレクトリにあるbaseResources.jsonを読み込み初期設定を行う

- baseResources.json：　srcにサービスワーカーネイティブのキャッシュに読み込むべきリソースのリストを記載、mapCacheTargetに、SVGMapのコンテンツキャッシュを稼働させるターゲットとなるパスを記載

-baseResources.jsonの例

{
"src": [
"index.html",
"Container_mercator_org.svg",
"SVGMapLv0.1_PWA_r5.js",
"js/SVGMapLv0.1_r16.js",
"js/SVGMapLv0.1_LayerUI2_r3.js",
"js/SVGMapLv0.1_GIS_r2.js",
"js/SVGMapLv0.1_Authoring_r7.js",
"js/jsts.min.js",
"imgs/gps.png",
"imgs/gps_s.png",
"imgs/Xcursor.png",
"imgs/zoomdown.png",
"imgs/zoomdown_s.png",
"imgs/zoomup.png",
"imgs/zoomup_s.png",
"imgs/mappin.png"
],
"mapCacheTarget":"localMaps/"
}

autoPilotDownloader
エリアと縮尺を指定し、オートパイロットで地図画面をスクロールさせることで、オフラインキャッシュに地図を保存する動作を自動的に行う機能のオブジェクト。レイヤー固有UIでの利用などを想定しており、以下のメンバー関数を持つ
- halt()
  オートパイロット動作を中断させる
- searchAll(initialViewBox, minScale, maxScale)
  - initialViewBoxで指定したエリアを、minScale、maxScaleの間でオートパイロットをかけキャッシュに保存させる
  - minScale, maxScaleは、ルートコンテナの座標系におけるscale値(getRootScale()で取れるもの)
- setProgressCallBack(cbf)
  オートパイロット動作中の進行状況をcbfの第一引数に返却する
async clearOfflineContents()
SVGMapのオフラインコンテンツを全消去する。SVGMapのオフラインコンテンツはserviceWorkerのネイティブキャッシュ機構とは別の独自キャッシュ機構(indexedDBを使用した機構)として構築される
clearCache()
（未実装）serviceWorkerのネイティブキャッシュを全消去する
cacheDB
SVGMapのオフラインコンテンツデータベースのオブジェクト。IndexedDBをpromise化した簡略的APIをメンバ関数として持つ。
- clear()
  データベースをクリア
- async connect()
  データベースに接続
- async delete(path)
  pathで指定したコンテンツを削除
- async get(path)
  pathで指定したコンテンツ(blob)を取得
- async getAll()
  全コンテンツを取得
- async getAllKeys()
  全Key(コンテンツのpath)を取得
- async put({idCol:path,contentBlob:blobdata})
  コンテンツ(blobdata)をpathをキーにして格納(上書き)
deleteCachedLayerMeta()
async disableCache()
serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て無効化する
async enableCache()
serviceWorkerのネイティブのキャッシュ機構とSVGMapの独自キャッシュ機構を全て有効化する
getCachedLayerMeta
async getPostQueue()
postMessageWhenConnectedでポストをリクエストし、未完了のリクエストを取得する
getRootScale()
svgMapのルートコンテナ座標系における現在の表示のscaleを取得
getScales()
読み込み済み文書全てのscaleを連想配列で返す(hashKeyはdocID)
getVisibleLayers
getStorageUsage
async loadOfflineContents(contentUrlList, overwrite, progressCallBack)
-contentUrlListで指定したコンテンツをオフラインキャッシュに読み込む(自ドメイン内のコンテンツ限定)
-overwriteをtrueにすると上書きする。progressCallBackは指定した関数の第一引数に進捗状況を返却
async loadZippedOfflineContents(zip_url,progressCallBack)
保存してあるディレクトリに対して、そのzipファイルの中のディレクトリ構造で、コンテンツがあるものと見做したURLもつキャッシュを形成する
async postMessageWhenConnected(URL, postData, postCompleteCBF)
-postDataデータをURLにポストする　オンライン時は即座にポスト、オフライン時はいったんindexedDBにポストデータを格納後オンラインになったらポストする。
-postDataは、文字列(この場合form-data決め打ちのリクエスト)、もしくは .bodyメンバー変数を持ったオブジェクト
-この場合は .bodyはFormDataタイプのインスタンスもしくは任意のデータ、そしてfetchAPIに準じた.headers, .methodをメンバー変数に持たせることができる。(methodでGETを指定すればGETリクエストも可能)またserviceWorkerが管理する
async setCachedLayerMeta
setScaleTrim
async updateCacheIndex()

svgMapCustomLayersManager.で呼び出せるAPI

実験的機能段階 :

基本的なフレームワークで提供されているレジューム機能を更に強化し、レイヤーの表示非表示状態、初期表示エリア(viewPort)等をユースケースなどに応じて複数登録、切り替えを可能とする機能を提供します。更にルートコンテナをさらに積極的に編集し、ルートコンテナファイルに無いレイヤーを追加したり、削除したりした、カスタマイズされたルートコンテナを差分情報の形でlocalStorageに保存・利用する機能を提供します。

- 以下のAPIは、SVGMapLv0.1_CustomLayersManager_r*.jsを用いた場合に使用できます。

- SVGMapLv0.1_CustomLayersManager_r*.jsは、svgMapオブジェクトもつwindowで使用するとともに、svgMapオブジェクト用のカスタムレイヤーセットを構築するための別ページのwebAppsにおいても使用することができます。

- 上記svgMapオブジェクト用のカスタムレイヤーセットを構築するためのwebApps用としてSVGMapCustomLayersManagerApp_r*.js、SVGMapCustomLayersManager.htmlが用意されています。

registCustomLayer(customLayerObject, applyImmediately, customLayerMetadata)
applyCustomLayers(customLayersObject, baseLayersPropertySet)
getDetailedLayersPropertySet(rootContainerDoc, ignoreIid)
getDetailedLayersPropertySetFromPath(rootContainerUrl, ignoreIid)
getDif( edit, orig )
originalLayersProperty
deepCopy(obj)
deleteAllCustomLayerSettings()
deleteCustomLayerSetting( key )
setCustomLayerSettingIndex(key)
buildCustomLayersSetting(difObj, editedLayersProperty, originalLayersProperty)
loadCustomLayerSettings()
storeCustomLayerSettings( settings )
getElementByAttr( XMLNode , searchId , atName )
applyCustomLayersSettingsToCurrentMapView(lpEdit, svgMapWin)
loadCustomGeoViewboxes()
storeCustomGeoViewboxes(customViewBoxes)
buildCustomGeoViewboxSettingObject(key, title, geoViewBoxX, geoViewBoxY, geoViewBoxWidth, geoViewBoxHeight)

起動URLによるオプション指定（内容チェック前）

svgMapフレームワークを導入したhtmlコンテンツは、URLの"#"以降であるフラグメント識別子によってフレームワークにいくつかの起動時オプションを提示することができます。通常、これらのオプションは、ルートコンテナにおける記述で示されています。フラグメント識別子による指示はそれをオーバーライドします。一般的な"&"による区切りで複数の複数のパラメータを指定できます。

表示範囲の指定

global座標系によって表示範囲を指示することができます。　標準のフラグメント記述に対してそれぞれ"global"文字列の追加が必要です。なおglobal座標系におけるxは一般的に経度、yは一般的に緯度に対応することに留意してください。

メディアフラグメントによる指定 : xywh=global:<xmin>,<ymin>,<width>,<height>
svgViewフラグメントによる指定 : svgView(viewbox(global,<xmin>,<ymin>,<width>,<height>))

表示・非表示レイヤーの指定

表示すべきレイヤー: visibleLayer=<layer title>,<layer title>...
非表示すべきレイヤー: hiddenLayer=<layer title>,<layer title>...
個々のレイヤーに対するフラグメントの提示 : それぞれのレイヤーに対しては、さらにフラグメントを追加することができます。ただし"="は"%3D",&は"%26"でURLエンコードしてください。<layer title>#fragment1=val1&fragment2=val2　⇒<layer title>#fragment1%3Dval1%26fragment2%3Dval2

動的な地図レイヤー

svgドキュメントにjavascriptを記述することにより動的なデータ生成を実装可能としています。本フレームワークでは、ドキュメント中に<script>要素を一つだけ記述することができ、その要素の中にjavascriptコードを入れることができます。

ブラウザネイティブのSVG描画機能に対して注意すべき点が、SVGDOMの描画は、基本的に伸縮スクロールのタイミングでしか行われない点です。（ネイティブのSVG描画機能は60fpsで再描画する努力を行っている) そのため、再描画タイミングを意識・明示(refreshScreen関数を使用)したアプリケーションの構築が必要になるケースがあります。

動的SVGMapコンテンツで利用可能な拡張API

一般のjavascriptAPIに加えて、動的な地図レイヤーを実装するために以下のAPIが提供されます。（既存のものでも注記があるものも列挙）

document: このsvgMapドキュメント自身
READ ONLY変数
- CRS:このドキュメントのCRS : CRS.a....fに、地理座標からこのドキュメントのSVGユーザ座標への変換係数が提供される
- docId:このSVGドキュメントのdocId
- scale：倍率：このドキュメントの座標系と、画面の(px座標系)との間の倍率(この値は等倍が1.0だが、svgMapコンテンツのvisibleMin/MaxZoom値は%(等倍は100)なので注意)
- actualViewBox：このドキュメントの座標系でのviewBox
- geoViewBox：地理座標におけるviewBox
- geoViewport
- viewport
- this.location:相対パス
- (this.verIE)
refreshScreen(): 描画の更新を明示: refreshScreenを用いていない場合、そのレイヤーのDOMを編集してもそれが即座に表示に反映(更新)するとは限りません。文書のロード、ズーム、スクロールのときが表示のDOMの内容を反映した画面の自動更新のタイミングです。それ以外、多くの場合反映されません（性能確保のための本フレームワークの制限）。DOMO編集をそれ以外のタイミングで表示に反映したい場合、この関数の呼び出しを行うひつようがあります。一方不必要にこの関数を呼び出すとシステム全体の性能が低下するかもしれません。
transform()
getCanvasSize()
linkedDocOp()
isIntersect()
drawGeoJson()
childDocOp()
onload:この関数を設定すると、ロードされると呼ばれる(ドキュメントロード後、描画前のタイミング。)
- この関数は、DOMトラバース前に同期処理される。
- したがってonloadで実行される処理はその中が非同期でない限り、refreshScreen()しなくてもonload時のDOM編集は直後の描画に反映される。
onscroll:この関数を設定すると、スクロールされるとき呼ばれる（ほかにズーム以外で画面更新時も）(スクロール後の描画前のタイミング。)
- 同上
onzoom:この関数を設定すると、ズーミングが発生するとき呼ばれる(同上)

拡張イベント

document -> zoomPanMap イベント addEventHandlerすると、ズームパンが起き(viewPortが変化したとき)地図システム全体の描画が完了(含タイムアウト)後に発行される。SVGMap*.jsが地図をウェブアプリ起動後、最初に描画完了した時にもこのイベントが発生する。
- これをイベントリスナに設定した関数は、非同期に実行される。onscroll()と異なり、もしその関数でDOM編集を行った場合は、直後の描画にそれが反映される保証がない。refreshScren()による再描画が必要。
document -> screenRefreshed イベント addEventHandlerすると、ズームパン以外で地図システム全体の描画が完了(含タイムアウト)後に発行される。主にrefreshScreen()など。このイベントをフックにして、SVGMapコンテンツのDOM操作・再描画（refreshScreen()）を行うと無限ループに陥るので使用方法に注意が必要。

レイヤー固有のUI

概要

レイヤールートsvgコンテンツ(フレームワークが最初に読み込むルートsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、動的な地図レイヤーの一種として、そのレイヤーに固有のユーザインターフェースをhtmlによるウェブアプリとして持たせる機能が提供されます。この機能は情報やユーザインターフェースを地図表現とは別に表示したい場合に用いることができるものです。

従来のアーキテクチャでは、もしもこのようなレイヤーに固有のUIが必要だった場合でも、地図アプリケーション全体の処理や表示を司るグローバルな空間(ルートhtmlコンテンツのwindowオブジェクト直下)に、サイドエフェクトを考慮しながらコードを組み込む必要があり、結果としてコードのスパゲッティ化が懸念されました。SVGMapのレイヤー固有UIは、レイヤーごとにUIとそのロジックをカプセル化可能にし、これを排除することが可能です。(カプセル化はiframeによって行われます。)さらに、レイヤー固有UIによるウェブアプリは自律分散的な配置にも対応し、UIを備えた地図レイヤーにまでハイパーレイヤリングアーキテクチャを拡張します。なお、#動的な地図レイヤーにも同種のカプセル化の効果があります。

このＵＩには主に二つの用途が考えられます。

凡例: 各レイヤーはその地図表現の意味を示すための固有の凡例を持つことがあります。その凡例を表示するために利用できます。
ウェブアプリケーションによる動的な地図レイヤー: 先述のように、ウェブアプリケーションによる動的な地図レイヤーは独自のロジックによってそのレイヤーの地図表現を動的に変化させる機能を備えることができます。この場合、例えばエンドユーザがFORMで入力したフィルター条件ををもとに表現を変更するようなケースも考えられます。

これらケースでは、そのフォームや凡例は、ルートhtml文書に設置することは可能ですが、もしも多くのレイヤーを表示するアプリケーションであり、それらのレイヤーがそれぞれ固有のフィルタ条件を持つような場合、ルートhtml文書は、それぞれのレイヤーをフィルタリングするためのFORMとそのフィルタリングロジックをすべて埋め込む必要があり、画面のデザイン、およびロジックのコーディングの双方がスパゲッティ化する可能性があります。さらに、もしもこのアプリケーションに後日さらにレイヤーが追加される場合、スパゲッティ化の問題はより深刻になるかもしれません。凡例の表示についても同様の問題が考えられます。本レイヤー固有ＵＩはこのような問題に対するソリューションを提供しています。

この機能は、ベースのフレームワークrev12以上　且つLayerUI2フレームワークを読み込み、id="layerSpecificUI"のdiv要素がルートhtml文書に設置されているときに使用できます。

レイヤールートsvgコンテンツの設定

レイヤー固有UIの設置には、レイヤールートsvgコンテンツ(のルート要素(svg要素))に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(pngもしくはjpg,jpeg,gif拡張子を持つビットイメージ)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

レイヤー固有ＵＩの表示部位に、このように指定されたリソース(ビットイメージもしくはhtml)がレイヤーの選択の状況に応じて、切り替わり表示されます。htmlの場合iframeとして埋め込まれ、ウェブアプリケーションを持つことも可能です。

サンプル

<?xml version="1.0" encoding="UTF-8"?>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="9000.0 -9000.0 9000.0 9000.0" go:dataArea="9000.0 -9000.0 9000.0 9000.0"
  data-controller="../Self-GS-POI_controller.html">
.....

詳細

レイヤー固有UIは、SVGMapのグローバルなwindowに設置されたiframeの中で動作します。このiframeではデフォルトで組み込まれる下記APIを通して、そのレイヤーのSVG DOMをはじめとしたSVGMapの各種リソースへのアクセスが可能です。
ルートコンテナが設置されたSVGMapのグローバルなwindowと異なるドメインにレイヤーを設置し、そのレイヤーがレイヤー固有UIを持つこともできます。ただし適切なCORS設定が必要であるとともに、一部のAPIの使用に注意が必要になります。(下記cotrollerSrc参照)
レイヤールートsvgコンテンツのドキュメントルート要素へdata-controller属性を設定する代わりに、ルートsvgコンテンツにおけるレイヤールートsvgコンテンツへの参照要素にdata-controller属性を設定することもできます。
data-controller属性の代わりに、data-controller-src属性の値に、適切にエスケープすることで直接htmlを記述することもできます。
data-controller属性によって参照されるhtmlコンテンツでは、次節#拡張APIで説明する値や関数が使用できます。
data-controller属性のURLには以下のオプションをフラグメント識別子として指定することができます。
- #exec=appearOnLayerLoad||hiddenOnLayerLoad||onClick
  - appearOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIが出現
  - hiddenOnLayerLoad : レイヤーを表示状態にすると即座にレイヤ固有UIがhidden状態で起動(そのレイヤ固有UIに含まれるscriptが起動)
  - onClick : レイヤー固有UI起動ボタン">"を押したときにレイヤ固有UIが出現(デフォルト)
- #requiredHeight=hhh&requiredWidth=www
  - id="layerSpecificUI"のdiv要素のcss値に関わらず、requiredHeight、requiredWidthでiframeの表示を指示
下記APIはレイヤー固有UIのiframeが生成された直後はアクセスできません。(アクセス可能になるまでタイムラグがあります)　ただし、2021/6/24のリリースから、onload(load)段階でアクセス可能になりました。
- 初期化時には、addEventListener("load",初期化関数)　もしくは onload=function(){初期化処理}　等として利用してください。

拡張API

レイヤー固有UI(iframeのwindowオブジェクトのjavascriptコード)では以下のAPIが拡張されています。

イベント
- openFrame : そのiframeが、新たに生成された
- closeFrame : 同、消滅した
- hideFrame : 同、隠された
- appearFrame : 同、隠されていたのが再度現れた
- zoomPanMap : SVGMapフレームワークと同じ
- zoomPanMapCompleted : 同上
- refreshScreen : 同上
svgImageProps : このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティ
- svgImageProps.scriptで、動的地図レイヤーのscript要素によって生成されたオブジェクトにもアクセスできます。
svgImage : このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM)
svgMap : svgMapフレームワークインスタンス
layerID : svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー
svgMapGIStool : GIStoolsフレームワークを拡張した時、同インスタンス
svgMapAuthoringTool : svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
controllerSrc : レイヤー固有UIのiframeの起動に使われたsrc属性(レイヤー固有UIのパス・URL)が読み出せます。特にレイヤーが異なるドメインから配信されたものの場合、レイヤー固有UIのwindowのlocation属性(及びそれによるURL解決を行うAPI)からは適切な情報が得られません。これ代えてこの値が使用できるケースがあるでしょう。
putGlobalMessage(messageText) : messageTextを#グローバルメッセージエリアに表示する　レイヤーが消滅したら自動でメッセージも消滅します。
preRenderFunction : この関数を定義すると、そのSVG文書の再描画(画面更新)シーケンスの直前にこの関数の内容が実行される。詳細は#SVGMap.で呼び出せるAPIのsetPreRenderControllerを参照

SVGMapの埋め込み

実験的機能段階 :

SVGMapフレームワークはwindow全体に地図コンテンツが占有される形で表示する設計です。ウェブページはwebAppsとしてカプセル化されたレイヤーをsvgMapオブジェクトに差し込む形でアプリケーションが構築されます。すなわち、基本的にwindowグローバル空間にはsvgMapオブジェクトだけが単独で存在し、その他のアプリケーションをwindow上に実装する場合は、その開発者がsvgMapオブジェクトとのグローバル空間でのスパゲッティ化に注意を払いながら開発していく必要があります。

それに対して、SVGMapLv0.1_Frame*.jsが提供する機能は、window内の指定した領域にsvgMapによる地図を埋め込むことを可能にします。さらにこの埋め込まれたsvgMapオブジェクトを　外部からより簡単に操作できるようカプセル化されたインターフェースを提供します。

ライブラリ

SVGMapを埋め込むウェブページではSVGMapLv0.1_Frame*.jsを導入します。

<!doctype html>
<html>
 <script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
</html>

svg-map要素

svg-mapカスタム要素を使用してsvgMapオブジェクトを任意の場所に埋め込むことができます。

 <!doctype html>
 <html>
  <script type="text/javascript" src="SVGMapLv0.1_Frame_r4.js"></script>
  <body>
   <table>
    <tr>
     <td>
      説明用地図
     </td>
     <td>
      <svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">
      </svg-map>
     </td>
    </tr>
   </table>
  </body>
 </html>

属性

svgMapAppPage

必須属性: 起動するSVGMapLv0.1*.jsが組み込まれたhtmlを指定。 svg-map要素はshadow domとなっており、内部はひとつのiframeとして構成されます。このiframe内のwindowで通常のsvgMapオブジェクトが稼働する形となります。svgMapAppPage属性はこのiframe内で起動するsvgMapオブジェクトを持ったhtmlを指定するものです。

latitude, longitude

オプション: 表示領域を下記の属性と組み合わせて指定します。DOMを操作することによって動的に表示領域を変更することが可能です。

zoom

オプション: 表示位置の中心点を上の2属性で、ズームレベルをこの属性で指定します。ズームレベルの定義はwebMercatorタイルピラミッドのレベル番号（ただし小数点指定も可能）

latitude2, longitude2

オプション: latitude, longitudeと組み合わせて対角線を指定し表示領域を設定します。

customjson

オプション: 任意のJSON文字列を(エスケープしたうえで)与えることができます。 SVGMap.jsのあるiframeのwindow.rootMessage.customJsonに、JSON.parseされたうえでその値が反映されます。この値もDOM操作により動的に反映されます。window.rootMessage.customJsonの変化を監視できるようsetterを設けることで動的な変化に対応する実装が可能です。

var rootMessage={
 set customJson(json){
  ...
 }
}

layerui

オプション: レイヤーUIの出力要素をxlinkで指定します。　この値はmutationをobserveしていません（svg-mapオブジェクトが生成された、最初の一回のみ有効です）

<svg-map svgMapAppPage="SVGMapper_r16_layerUICustom.html" id="svgMapTag" latitude="37" longitude="135" zoom="4" layerui="#layerUIarea">

DOM API

setCenter

setCenter( longitude, latitude, zoom ) : 緯度経度ズームレベルで地図を表示させる

addLayer

addLayer(url,title,visibility) : URLで指定したリソースのレイヤーをtitleを付けて追加する

svgMapObject

getter svgMapObject : この要素に紐付いたsvgMapオブジェクトを得る

layer要素

svg-map要素の子要素として、任意の個数のlayer要素を設置できます。

属性

title

iframeで起動されるsvgMapオブジェクトのルートコンテナファイルにある、レイヤー名(title)を指定し、そのレイヤーとlayer要素を紐付ける。該当するレイヤーが無く、且つ下記のsrcが指定されている場合は新しいレイヤーを追加する。なお、任意の属性や子ノードが与えられている場合は、下記の通りレイヤーの読み込み後にそれらの値が該当するレイヤーのdata-controllerの window.rootMessageに設定される。

src

iframeで起動されるsvgMapオブジェクトのルートコンテナファイルにある、レイヤーをURLを使って指定する

任意の属性

任意の属性を設定できる。設定した属性名と属性値は、対応するレイヤーのdata-controllerで指定されたレイヤーのコントローラのwindowにおけるwindow.rootMessageの対応するメンバ変数に反映される。setterを設定することで変化に応じて動作させることが可能になる。

子ノード(TEXT CONTENTやXML要素)

任意のテキスト(textContent)や、XML要素(xmlContent)を子ノードに入れることができる。入れられた情報は、同様に対応するレイヤーのdata-controllerの window.rootMessage.textContent、もしくはwindow.rootMessage.xmlContentメンバ変数に反映される。 XMLに関しては任意の階層化がされていても良い。DOM操作による変化があれば更新されるので、同様にsetterを用いて変化を反映させることが可能。

DOMAPI

layerId

layerId : このレイヤーのレイヤーIDを得る

svgImage

svgImage : このレイヤーに紐付いたsvgMapコンテンツ(document)を得る

svgImageProps

svgImageProps : このレイヤーに紐づいたsvgMapコンテンツのsvgImagePropsオブジェクト(各種プロパティを格納したオブジェクト)を得る

controllerWindow

controllerWindow : (もしあれば)このレイヤーに紐づいたsvgMapコンテンツのレイヤー固有UIを得る

第四章：内部機構解説

別ページを参照してください。

解説書

目次

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

第一章：SVGMapの更新部分

地理座標系の扱い方

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

メルカトル図法での地図表示

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

プロキシの設定

多様な図法の定義と利用

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

例

タイリングに関するノート

SVG以外のデータサポートに関するノート

レイヤー固有ユーザインターフェース

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

オーサリングシステム

3D可視化システム

プログレッシブウェブアプリケーション

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

第二章：SVGMap Revsion 0.1フレームワーク

追加・拡張された機能：

フレームワークの呼び出し

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

レイヤーリストを実装した拡張フレームワークのjavascriptコードを読み込むscript要素(必要に応じて)

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

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

SVGMapコンテンツを配置するためのdiv要素。

地図中心の照準イメージ。

任意で設置できる要素：

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

伸縮ボタン

測位ボタン

グローバルメッセージ

地図中心の緯度経度値表示

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

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

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

レイヤーリストUIのためのスタイル

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

レイヤー

クリッカブルオブジェクト

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

data-nocache

metadataフレームワーク

例：

実装されている機能

要素

属性

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

SVGMapフレームワーク

SVGMapが持つ基幹オブジェクト

svgImages[]

svgImagesProps[]

プロパティリスト

利用可能API

SVGMap.で呼び出せるAPI

Geo2SVG

POIviewSelection

SVG2Geo

addEvent

callFunction

captureGISgeometries

captureGISgeometriesOption

checkSmartphone

childDocOp

dynamicLoad

escape

geo2Screen

getBBox

getCentralGeoCoorinates

getConversionMatrixViaGCS

getDevicePixelRatio

getElementByImageId

getGeoViewBox

getHashByDocPath

getHyperLink

getInverseMatrix

getLayer

getLayerId