解説書

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎第三章：ウェブアプリケーションの開発)
(→‎第三章：ウェブアプリケーションの開発)
207行: 207行:
 
*ルートhtml文書によるウェブアプリケーション
 
*ルートhtml文書によるウェブアプリケーション
 
*ウェブアプリケーションによる動的な地図レイヤー
 
*ウェブアプリケーションによる動的な地図レイヤー
−
*[[#レイヤー固有iframe (ベースのフレームワークrev12以上　且つLayerUI2フレームワークを拡張した時)|レイヤー固有iframe]]
+
*[[#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89iframe_.28.E3.83.99.E3.83.BC.E3.82.B9.E3.81.AE.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AFrev12.E4.BB.A5.E4.B8.8A.E3.80.80.E4.B8.94.E3.81.A4LayerUI2.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.82.92.E6.8B.A1.E5.BC.B5.E3.81.97.E3.81.9F.E6.99.82.29|レイヤー固有iframe]]
 
===動的な地図レイヤー===
 
===動的な地図レイヤー===
 
svgドキュメントにjavascriptを記述することにより動的なデータ生成を実装可能としています。
 
svgドキュメントにjavascriptを記述することにより動的なデータ生成を実装可能としています。

2017年1月13日 (金) 04:51時点における版

目次

SVGMap解説書 2016年

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

第一章：SVGMapの更新部分

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

地理座標系の扱い方

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

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

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

　

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

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

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

例

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

検索によって表示スタイルを変更する機能を持ったレイヤー
例えばコンビニエンスストアのＰＯＩレイヤーを表示したとして、そのメタデータを読み取り、検索条件に基づいて（例えば深夜営業している店舗）の表示スタイルを変更するような検索機能を実装したレイヤー　メタデータは書くレイヤーごとに独特の値を持つため、その検索ロジックはレイヤーに固有のものとなることがあります。このケースではそのような機能をレイヤーに組み込むことを可能にします。
CSVデータなどのレガシーな非SVGデータをHXRで取得し、ブラウザ上でSVG DOMツリーを生成するようなSVG地図コンテンツ。
このケースでは、サーバからクライアントに送信されるデータの実体はSVG形式の地図データではなく、CSVなどのレガシーなデータです。SVG地図コンテンツには、CSVデータをSVGとして描画するためのデータ読み込み・解読・SVG DOMツリー生成機構を備えたjavascriptコードが含まれます。
OpenStreepMapのTile Serverや、Tile Map Serviceのような、特定のロジックによる数列のような法則性を持った地図タイルリソースをタイリングする地図コンテンツ。
更新されたSVGMapでは、地図コンテンツに内蔵されたアプリケーションロジックとしてそれを取り扱うことができます。タイリング規則をそのままウェブアプリケーションとしてで書き下し、スケールやビューポートに応じて適切なタイリング(配置)を行うSVG DOMツリーを生成するSVG地図コンテンツが構築できます。

　 従来の地図フレームワークでは、このようなタイリング機能は特定のタイリングロジックとパラメータを伴った専用の機能として地図フレームワーク本体に作りこまれたうえでしばしば提供されてきました。一方、これらのロジックにはさまざまなバリエーションや最適化のための調整パラメータが存在し、これまで長らくその互換性や相互運用に問題を抱えてきました。TMSspecs@osgeowiki, tiling@osgeowiki

一方、これらのロジックはその多様なバリエーションを含め、javascriptによるプログラムコードとしては容易に記述可能です。多くの場合わずか数十行のロジックで記述できるでしょう。 　

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

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

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

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

追加・拡張された機能：

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

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

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

フレームワークを実装したjavascriptコードを読み込むscript要素 
<script type="text/javascript" src="SVGMapLv0.1_r12.js"></script>
SVGMapコンテンツを配置するためのdiv要素。
id属性に"mapcanvas"を設定し、title属性にはルートとなるSVGコンテンツ（以降ルートSVGコンテンツと呼びます）のパスを指定したdiv要素を設置します。（要確認：地図のサイズ・配置はこのdiv要素のサイズとなります。無指定の場合は全ウィンドサイズ） 
<div id="mapcanvas" title="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が上記の値である必要があります。ボタン押下で測位し、測位点を中心にして地図を表示する機能。表示の範囲は測位制度に応じて適当に設置されます。
地図中心の緯度経度値表示 
<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要素 
<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が上記の通りである必要があります。レジューム機能とは、cookieを用いて、前回最後に表示された状態（レイヤーの表示非表示状態、表示領域（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コンテンツのスクリプト中での埋め込みの順番の逆順になります。

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

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

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

レイヤー固有ＵＩ

レイヤーに固有の情報やユーザインターフェースを地図表現とは別に表示したい場合に用いることができる機能です。 レイヤー固有ＵＩを設けるには、ルートsvgコンテンツが参照し埋め込んでいる、各レイヤーのSVGコンテンツ(このコンテンツをレイヤールートsvgコンテンツと呼ぶこととします（各レイヤーはさらに別のsvgコンテンツを埋め込むことがしばしばあるため"ルート"とさらに呼ぶことにします））のドキュメントルートsvg要素にdata-controller属性を設置、そこにレイヤー固有ＵＩのためのリソースを参照するパスを記述します。参照先はpngもしくはjpg,jpeg,gif拡張子を持つビットイメージもしくは、それ以外の拡張子を持つHTML文書である必要があります。

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

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

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

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

クリッカブルオブジェクト
グラフィックスオブジェクトをクリック（タブレットの場合は、タップもしくは照準アイコンに合わせたうえでタップ）することでそれに紐づけられたインタラクティブ動作を実行する。インタラクティブ動作はフレームワークが独自に提供する、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（一時的廃止）
Rev11までのフレームワークにはPOI（defsで定義されたビットイメージをuseで貼り付ける機能）が内蔵されていました。その機能を発動するためのクラスです。なおRev12からはその実装は外されており、今後編集機能は機能拡充されたうえで周辺ライブラリとして提供される予定です。

metadataフレームワーク

データ格納効率に優れたメタデータのフレームワークが提供されます。このメタデータは先述のクリッカブルオブジェクトとしてインタラクティビティの実装に用いられます。 svgドキュメントルート要素のproperty属性に、メタデータの属性名をカンマ区切りで記述。そのファイルの図形要素にメタデータをproopertyに列挙した順に、メタデータの値を記述していきます。

ひとつの文書に対して一つのスキーマ（メタデータの属性名とその順番）しか与えられないという制約を持ちます。metadataはデフォルトの状態ではブラウザが備えるalertダイアログに属性名と属性値がそれぞれ列挙された形で表示されます。metadata表示機能の拡張については、ウェブアプリケーションの開発の章で別途解説します。

例：
<svg property="Name,Brand,Address,test3" ... >
<path content="セルフニュー小原SS / 木村商店,ENEOS,宮城県白石市小原字中北前田13,37.9551373" ... />

実装されている機能

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

要素

TBD

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


属性

TBD

  • ref(svg,
  • fill,stroke
  • arrow
  • dasharray
  • viewvox


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

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

  • ルートhtml文書によるウェブアプリケーション
  • ウェブアプリケーションによる動的な地図レイヤー
  • レイヤー固有iframe

動的な地図レイヤー

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

拡張API

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

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

レイヤー固有iframe (ベースのフレームワークrev12以上　且つLayerUI2フレームワークを拡張した時)

レイヤーコンテンツ(フレームワークが最初に読み込むルートsvgコンテンツの中で埋め込まれるsvgコンテンツ)に対して、そのレイヤーに固有のユーザインターフェースをhtmlによるウェブアプリとして持たせる機能が提供されます。 レイヤーのsvgコンテンツのルート要素(svg要素)に、data-controller属性を与え、そこにそのレイヤー固有のUIのためのhtml文書のリンク(ただしsame origin)を設置します。またサブセットとして、data-controller属性にビットイメージ(png or jpg)へのリンクを与えることでレイヤーの凡例情報の提示をすることもできます。

サンプル 

<?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">
.....

拡張API

レイヤー固有iframeでは以下のAPIが拡張されています。

  • イベント
    • openFrame : そのiframeが、新たに生成された
    • closeFrame : 同、消滅した
    • hideFrame : 同、隠された
    • appearFrame : 同、隠されていたのが再度現れた
    • zoomPanMap : 地図のズームもしくはパンが発生した
  • svgImageProps : このレイヤー固有UIに紐づいたレイヤーSVGの各種プロパティ
  • svgImage : このレイヤー固有UIに紐づいたレイヤーSVG文書(DOM)
  • svgMap : svgMapフレームワークインスタンス
  • layerID : svgMapフレームワークが管理しているSVG文書ハッシュリスト(svgMap.getSvgImages())における、このレイヤー固有UIに紐づいたレイヤーSVG文書のハッシュキー
  • svgMapGIStool : GIStoolsフレームワークを拡張した時、同インスタンス
  • svgMapAuthoringTool : svgMapAuthoringToolフレームワークを拡張した時、同インスタンス
「https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8&oldid=37」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate