この付録では、SVGマップ用のMapViewer JavaScript Application Program Interface (API)について説明します。このAPIには、SVGマップ外(通常はSVGマップが埋め込まれたHTML文書)からコールできる事前定義済関数が含まれます。また、特定のマウスクリック操作が発生したときにコールされるJavaScript関数も作成できます。事前定義済関数およびユーザー定義関数を使用して、カスタマイズされたナビゲーション機能など、クライアント側の高度な対話機能を実装できます。
この付録で説明するJavaScript関数を使用する場合、エンド・ユーザーはMicrosoft Internet Explorerを使用してSVGマップを表示し、使用するシステムにAdobe SVG Viewer 3.0以上がインストールされている必要があります。
この付録の主な項目は、次のとおりです。
ナビゲーションをコントロールするMapViewer JavaScript関数には、次のようなものがあります。
recenter(x, y)
は、現在のSVGマップの中心点を設定します。
入力するx
およびy
の値は、新しい中心点の座標(ピクセル単位)を指定します。これは、SVGビューア・ウィンドウの中心に表示されるSVGマップ内のポイントです。SVGビューア・ウィンドウは、SVGビューアで表示されたWebブラウザ内のグラフィック領域です。中心点の座標はSVGマップ画面の座標系で定義され、マップの左上角の(0, 0)から、右下角の(幅, 高さ)の間の値です。
setZoomRatio(zratio)
は、現在のマップの表示ズーム比を設定します。
この関数は、SVGマップのズームインまたはズームアウトに使用できます。(マップの中心点は変更されません。)ズームする前の元のマップのズーム比は1で、ズーム比の値が大きい場合、SVGマップは拡大表示されます。マップのズーム比は、事前定義済のズーム・レベルに合わせた値に設定する必要があります。たとえば、zoomlevels
の値が4で、zoomfactor
の値が2の場合、ズーム・レベル0、1、2および3でのマップのズーム比はそれぞれ1、2、4および8となるため、この例ではzratio
パラメータの値を1、2、4または8に設定します。事前定義済ズーム・レベルの詳細は、3.1.2.1.1項のzoomlevels
属性、zoomfactor
属性およびzoomratio
属性の説明を参照してください。
MapViewerには、情報を提供するヒント、マップ凡例、非表示のテーマおよびアニメーション・ロード・バーの表示を有効および無効にする関数があります。こうした表示コントロール関数には、次のようなものがあります。
switchInfoStatus()
は、情報を提供するヒントの表示を有効または無効にします。(コールするたびに前の設定が無効になります。)
テーマのスタイリング・ルール定義(A.7項を参照)の<hidden_info>
要素およびマップ・リクエスト(3.1.2.1.1項を参照)のinfoon
属性を使用すると、情報を提供するヒントの初期表示を制御できます。switchInfoStatus()
関数は、情報を提供するヒント表示の現在の設定を切り替えます(無効化します)。
switchLegendStatus()
は、マップ凡例の表示を有効または無効にします。(コールするたびに前の設定が無効になります。)マップを表示しても、最初は凡例が表示されません。
showTheme(theme)
は指定したテーマがマップに表示されるように設定し、hideTheme(theme)
は指定したテーマがマップに表示されないように設定します。
showLoadingBar()
は、アニメーション・ロード・バーを表示します。アニメーション・ロード・バーは、新しいマップのロードが進行中であることを視覚的に示します。ロードが完了すると、バーはなくなります。
MapViewerには、事前定義済のマウスクリック・イベント・コントロール関数があります。これらの関数をB.3.1項で説明します。ユーザー定義のマウス・イベント・コントロール関数も作成できます。詳細は、B.3.2項を参照してください。
MapViewerには、SVGマップでのテーマ地物、矩形およびポリゴンの選択を有効および無効にする関数があります。また、選択についての情報を取得する関数や、選択状態をオンおよびオフにする関数もあります。SVGマップのマウスクリック・イベント・コントロールをカスタマイズする関数には、次のようなものがあります。
enableFeatureSelect(
)
はテーマ地物の選択を有効にし、disableFeatureSelect()
はテーマ地物の選択を無効にします。
マップ・リクエスト(3.1.2.20項を参照)またはベース・マップ(A.8項を参照)定義のいずれかで、<theme>
要素のselectable_in_svg
属性がTRUE
の場合、テーマ地物の選択を有効にできます。テーマが選択可能で、テーマ地物の選択が有効な場合、SVGマップに表示されたテーマの各地物は、クリックして選択できます。地物を選択すると、その色が変わり、ID(デフォルトではROWID)が記録されます。すでに選択済の地物をクリックすると、その地物の選択が解除されます。この項で説明するgetSelectedIdList()
関数をコールすると、選択したすべての地物のIDのリストを取得できます。
テーマ地物の選択を有効にすると、ポリゴンの選択および矩形の選択が自動的に無効になります。
enablePolygonSelect()
はポリゴンの選択を有効にし、disablePolygonSelect()
はポリゴンの選択を無効にします。
ポリゴンの選択が有効な場合、SVGマップでマウスをクリックして移動すると、ポリゴンの選択領域を定義できます。クリックするたびに、ポリゴンの形状ポイントが作成されます。ポリゴンの座標は記録され、この項で説明するgetSelectPolygon()
関数をコールするとその座標を取得できます。
ポリゴンの選択を有効にすると、テーマ地物の選択および矩形の選択が自動的に無効になります。
enableRectangleSelect()
は矩形の選択を有効にし、disableRectangleSelect()
は矩形の選択を無効にします。
矩形の選択が有効な場合、SVGマップでマウスをクリックしてドラッグすると、矩形の選択ウィンドウを定義できます。矩形の座標は記録され、この項で説明するgetSelectRectangle()
関数をコールするとその座標を取得できます。
矩形の選択を有効にすると、テーマ地物の選択およびポリゴンの選択が自動的に無効になります。
getInfo(theme, key)
は、テーマ名およびキーによって識別される地物の情報メモまたはヒント文字列を返します。
getSelectPolygon()
は、元のユーザー・データと関連付けられた座標系を使用して、選択ポリゴンのすべての形状ポイントの座標配列を返します。
getSelectRectangle()
は、元のユーザー・データと関連付けられた座標系を使用して、選択矩形の左上角および右下角の座標配列を返します。
selectFeature(theme, key)
は、指定されたテーマ内の地物(キー値で識別)の選択状態を切り替えます。
setSelectPolygon(poly)
は、元のユーザー・データと関連付けられた座標系を使用して、選択ポリゴンのすべての形状ポイントの座標を設定します。座標は、配列poly
に格納されます。enablePolygonSelect()
の後にこの関数をコールすると、SVGマップ上にポリゴンが描画されます。
setSelectRectangle(rect)
は、元のユーザー・データと関連付けられた座標系を使用して、選択矩形の左上角および右下角の座標を設定します。座標は、配列rect
に格納されます。enableRectangleSelect()
の後にこの関数をコールすると、SVGマップ上に矩形が描画されます。
ユーザー定義のJavaScriptマウス・イベント・コントロール関数を事前定義済JavaScript関数(B.3.1項を参照)と組み合せて、より対話型なカスタマイズ関数を実装できます。マップレベルの関数、テーマレベルの関数および選択イベント・コントロール関数を作成できます。
マウスクリック・イベントおよびマウス移動イベントに対して、マップレベルのマウス・イベント・コントロール関数を定義できます。
マウスクリック・イベント関数は、テーマ地物の選択およびウィンドウの選択の両方が無効の場合に、SVGマップの任意の場所をクリックするとコールされます。関数の名前は、マップ・リクエストのonclick
属性(3.1.2.1.1項を参照)で定義します。
マウス移動イベント関数は、SVGマップ内のどこかでマウスを移動するたびにコールされます。関数の名前は、マップ・リクエストのonmousemove
属性(3.1.2.1.1項を参照)で定義します。
これらのJavaScript関数は、SVGマップが埋め込まれたWebページに定義する必要があります。マウスクリックおよびマウス移動イベント関数には、2つのパラメータx
およびy
(マウスのクリックまたは移動が発生したSVGビューア・ウィンドウ内の座標を指定)を使用する必要があります。座標はローカルのSVGビューア・ウィンドウの座標系で定義され、左上角の(0, 0)から右下角の(幅, 高さ)の間です。
マウスクリック、マウス移動、マウスオーバー、マウスアウトの各イベントに対して、テーマレベルのマウス・イベント・コントロール関数を定義できます。
マウスクリック・イベント・コントロール関数は、テーマ地物の選択が有効な場合にテーマ地物をクリックするとコールされます。マップ内の各テーマに、独自のマウスクリック・イベント・コントロール関数を指定できます。テーマレベルのマウスクリック・イベント・コントロール関数は、マップ・リクエストまたはベース・マップ定義の<theme>
要素のonclick
属性で指定します。
マウス移動イベント・コントロール関数は、テーマ地物の内部でマウスを移動するたびにコールされます。マップ内の各テーマに、独自のマウス移動イベント・コントロール関数を指定できます。テーマレベルのマウス移動イベント・コントロール関数は、マップ・リクエストまたはベース・マップ定義の<theme>
要素のonmousemove
属性で指定します。
マウスオーバー・イベント・コントロール関数は、テーマ地物の外部からテーマ地物の内部にマウスを移動するたびにコールされます。マップ内の各テーマに、独自のマウスオーバー・イベント・コントロール関数を指定できます。テーマレベルのマウスオーバー・イベント・コントロール関数は、マップ・リクエストまたはベース・マップ定義の<theme>
要素のonmouseover
属性で指定します。
マウスアウト・イベント・コントロール関数は、テーマ地物から外にマウスを移動するたびにコールされます。マップ内の各テーマに、独自のマウスアウト・イベント・コントロール関数を指定できます。テーマレベルのマウスアウト・イベント・コントロール関数は、マップ・リクエストまたはベース・マップ定義の<theme>
要素のonmouseout
属性で指定します。
これらのJavaScript関数は、SVGマップが埋め込まれたWebページに定義する必要があります。次のパラメータを使用します。
テーマ名
地物のキー
SVGビューア・ウィンドウ内のマウスをクリックしたポイントのX軸値
SVGビューア・ウィンドウ内のマウスをクリックしたポイントのY軸値
地物のキーは実表のキー列の値であり、マップ・リクエストまたはベース・マップ定義の<theme>
要素のkey_column
属性によって指定されます。ROWIDがデフォルトのキー列として使用されます。たとえば、COUNTYテーマのonclick
属性がselectCounty
に設定されている場合、ROWIDがAAAHQDAABAAALk6AbmであるCOUNTYテーマの地物をSVGマップの(100,120)でクリックすると、JavaScript関数selectCounty('COUNTY', 'AAAHQDAABAAALk6Abm', 100, 120)
がコールされます。
X軸およびY軸の値は、SVGビューア・ウィンドウ内のマウス・イベントが発生した座標を指定します。座標はローカルのSVGビューア・ウィンドウの座標系で定義され、左上角の(0, 0)から右下角の(幅, 高さ)の間です。
矩形の選択またはポリゴンの選択、あるいはその両方で、選択イベント・コントロール関数を定義できます。
矩形の選択イベント・コントロール関数は、矩形の選択が有効な場合に、SVGマップ上でマウスをクリックおよびドラッグして(対角線上で向かい合う2つの角を示して)、矩形の選択領域を作成するとコールされます。矩形の選択が完了し、マウス・キーを解放すると、すぐにこの関数がコールされます。関数の名前は、マップ・リクエストのonrectselect
属性(3.1.2.1.1項を参照)で指定します。
ポリゴンの選択イベント・コントロール関数は、ポリゴンの選択が有効な場合に、SVGマップ上でマウスを4回以上クリックおよびドラッグして多角形の選択領域を作成したときにコールされます。最初にクリックしたのと同じ場所を最後にクリックするとポリゴンが完成します。ポリゴンの選択が完了すると、すぐにこの関数がコールされます。関数の名前は、マップ・リクエストのonpolyselect
属性(3.1.2.1.1項を参照)で指定します。