地図(OpenLayers)

■ コントロール外観

■ 説明

地図を描画するコントロールです。

マーカーがクリックされたときに、WEBページのURLにジャンプ、またはHMIのページとレイヤーにジャンプすることが可能です。また、クリックのイベントによる、マーカーの番号、ラベル、ユーザが設定したデータを通知することが可能です。

■ イベント

このコントロールで使用できるイベントの一覧です。

イベント名	値	説明
!onClickMarker	integer index, string title,string value	マーカーがクリックされた場合に発生するイベントです。 変数リンクに設定された変数に対し、マーカーに設定された値を出力します。
!onClickData	float latitude,float longitude,float radius,string csvdata	マーカー及びクラスタマーカーがクリックされた場合に発生するイベントです。 変数リンクに設定された変数に対し、マーカーの緯度、経度、クラスターマーカーの半径(km)、CSVデータを出力します。CSVデータに出力する内容は、詳細プロパティで設定します。

■ プロパティ

このコントロールで使用できるプロパティの一覧です。

各コントロール共通のプロパティについては、共通項目ページをご参照ください。

プロパティ名	デフォルト値	説明
File		マーカー表示の入力として扱うCSVファイルを設定します。
TriggerRefresh	0	値が変更されるとFileプロパティのCSVファイルを再読み込みします。 値が変更されるとFileプロパティのCSVファイルを再読み込みします。 値が変更されるとFileプロパティのCSVファイルまたはデータベーステーブルを再読み込みします。
FileLine		地図上の線の描画の入力として扱うCSVファイルやKMLファイル、国土地理院の地理院地図で作図したスタイルつきGeoJSON形式ファイルを設定します。
TriggerLineRefresh	0	値が変更されるとFileLineプロパティのファイルを再読み込みします。
linePointX		マーカーから線を引く時に使用するX座標です。画面上端を0としてpx単位で数値を指定します。
linePointY		マーカーから線を引く時に使用するY座標です。画面左端を0としてpx単位で数値を指定します
lineVisible	true	マーカーから指定座標に引いた線の表示非表示を設定します。

■ Fileプロパティに入力するCSVファイルのデータ形式

CSVファイルのデータは、以下のように設定してください。また文字コードはutf-8を使用してください。

行の初めに#を使用するとコメント行として扱います。

・1列目には、マーカーの緯度を設定してください。

・2列目には、マーカーの経度を設定してください。

・3列目には、マーカーのタイトルを設定してください。このタイトルはマウスをマーカーに合わせることで表示されます。

・4列目には、マーカーをクリックした時に遷移するURLを設定してください。

この列の値を、「page_id:任意のページID/layer_id:任意のレイヤーID」とすることで任意のページのレイヤーを設定することができます。

・5列目には、マーカーとして地図上に表示する画像のURLを設定してください。画像のURLが間違っている場合は、デフォルトのマーカーが表示されます。

この列の値が「/viewer/setting」から始まる場合は、プロジェクトにアップロードされているファイルを指定することができます。

・6列目には、遷移するURLの開き方を設定してください。「true」か「TRUE」が設定された場合は、ページをそのまま遷移させ、「false」か「FALSE」が設定された場合は、URLを新しいタブとして開きます。それ以外の場合はURLを開きません。

・7列目には、マーカーのラベルを設定してください。ラベルは地図のマーカーの上に表示されます。

・8列目には、マーカーのラベルのサイズを設定してください。サイズは、px単位の指定と「small」・「medium」・「large」などのキーワード指定が使用できます。

・9列目には、マーカーのラベルの色を設定してください。色は、CSSで使用される「red」「blue」などのキーワード指定と「#ff0000」・「#00ff00」などの16進数での指定が使用できます。

・10列目には、マーカーのイベントで出力するユーザデータを設定してください。(value)

・11列目には、マーカーの画像を切り替える変数リンクを設定してください。リンク変数の値がfalseの場合に5列目に設定したマーカーが表示されます、trueの場合に12列目に設定したマーカーが表示されます。

・12列目には、マーカーの画像を切り替えた時に表示する画像のURLを設定してください。画像のURLが間違っている場合は、デフォルトのマーカーが表示されます。

この列の値が「/viewer/setting」から始まる場合は、プロジェクトにアップロードされているファイルを指定することができます。

実際のCSVの例を以下に示します。

35.65858,139.7454,東京タワー,https://www.tokyotower.co.jp/,/viewer/setting/image/tower.png,false,tower,10px,white,テストパラメータ,link,/viewer/setting/image/tower2.png

■ FileLineプロパティに入力するCSVファイルのデータ形式

CSVファイルのデータは、以下のように設定してください。また文字コードはutf-8を使用してください。

行の初めに#を使用するとコメント行として扱います。

・1列目には、線の幅(ピクセル単位)を設定してください。

・2列目には、線の色を設定してください。色は、CSSで使用される「red」「blue」などのキーワード指定と「#ff0000」・「#00ff00」などの16進数での指定が使用できます。

・3列目には、線の種類を選択してください。この値を「Arrows」と設定した場合は線の先端が矢印になります。また値を「Dash」に設定すると線が破線になります。それ以外の値に設定すると実線になります。

・4列目以降の偶数列には、座標の緯度を設定してください。この座標を結んで線を描画するため、座標は2つ以上設定してください。

・5列目以降の奇数列には、座標の経度を設定してください。この座標を結んで線を描画するため、座標は2つ以上設定してください。

実際のCSVの例を以下に示します。

2,#ff0000,Arrows,34.68401215,135.5059125,34.73142753,135.423515,34.66820098,135.1790692,34.6523868,135.0170209,34.79009462,134.6709515,34.51187376,133.9435612

■ 詳細プロパティ

地図の詳細プロパティでは、 以下の設定を設定できます。

■ 全般

全般タブでは、地図の表示に対する設定を行えます。

□ 緯度

開始地点の緯度を入力します。

□ 経度

開始地点の経度を入力します。

□ ズーム

ズームの倍率を設定します。

□ 中心座標を取得

現在の地図の中心座標とズームの値を取得して、緯度・経度・ズームの欄に表示します。

□ 地図の種類

表示する地図の種類を設定します。

□ TriggerRefreshの動作条件

□ TriggerLineRefreshの動作条件

プロパティのTriggerLineRefreshの値が増加した場合のみ、ファイルを再読み込みするかどうかを設定します。

□ ズームレベルに応じて、マーカーサイズを変更する

有効の場合、現在のズームレベルに応じて、マーカー画像のサイズを変更します。

□ 基準ズームレベル

ズームレベルに応じてマーカーサイズを変更する基準となるズームレベルを設定します。

基準ズームレベルを現在のズームレベルより大きくすると、マーカーの画像サイズが小さくなります。基準ズームレベルを現在のズームレベルより小さくすると、マーカーの画像サイズが大きくなります。

□ ズームレベルに応じて、マーカーをクラスタ化する

有効の場合、ズームレベルによってマーカーがクラスタ化されます。マップは、ズームレベルに応じて特定の半径内のマーカーをクラスターマーカーに縮小し、クラスターマーカーはクラスター化されたマーカーの数を示します。

□ 背景色

クラスタマーカーの背景色を設定します。

□ 文字色

クラスタマーカーの文字色を設定します。

□ クラスタ半径(px)

クラスタマーカーのサイズを半径(px)で設定します。

□　マーカーから座標に対して線を引く

有効の時、プロパティで設定した座標に対して、クリックしたマーカーから線を引きます。

□　線の色

マーカーから引く線の色を設定します。

□　線の幅

マーカーから引く線の幅を設定します。

□ 座標とズームを適用

入力した緯度・経度・ズームを適用し、地図の表示位置を変更します。

■ マーカーデータ

□ 項目

地図に設定できる項目が表示されます。

□ 通知

有効の場合、この列のデータをイベント(!onClickData)のcsvdataに内容に出力します。