日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2

Transcription

1 オープンデータマップ (SVG 地 図 操 作 用 スクリプト) デモ コンテンツ 操 作 ガイド 1

2 日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2

3 目 次 1. デモ コンテンツ 操 作 ガイド... 4 Google Chrome の 設 定... 4 コンテンツのロード... 4 アイコン 等 について... 5 POIの 設 定... 7 POI を CSV ファイルに 保 存... 8 POI を CSV ファイルから 読 み 込 む... 9 POI 用 CSV ファイルのフォーマット 検 索 用 CSV ファイルのフォーマット 特 定 のレイヤの 表 示 非 表 示 を 切 り 替 える 方 法 デモ コンテンツ 作 成 方 法 ファイルの 準 備 テンプレート ディレクトリィ 内 のコンテンツ SVG 地 図 操 作 用 スクリプトが 提 供 する API

4 1. デモ コンテンツ 操 作 ガイド Google Chrome の 設 定 Chrome を 使 用 して ローカルのデモ コンテンツを 閲 覧 する 場 合 には 起 動 オプシ ョンの 設 定 が 必 要 となります デスクトップ 上 の Chrome のショートカットアイコンをマウスで 右 クリックして 表 示 されるメニューより プロパティ を 選 択 します リンク 先 欄 に --allow-file-access-from-files を 追 加 します "C: Program Files (x86) Google Chrome Application chrome.exe" --allow-file-access-from-files のようにリンク 先 欄 を 設 定 します コンテンツのロード 上 記 設 定 を 行 ったアイコンを 使 用 して Chrome を 起 動 します Chrome 上 に エクスプローラからデモ コンテンツの HTML ファイルをドラッグ& ドロップしてコンテンツのロードを 行 います 4

5 アイコン 等 について マウスモードが 水 平 移 動 である 状 態 指 アイコンをクリックして 選 択 します マウス 左 ボタンのドラッグで 水 平 移 動 します また カーソルキーによる 移 動 も 可 能 です マウスモードが 縮 小 拡 大 である 状 態 虫 眼 鏡 アイコンをクリックして 選 択 します マウス 左 ボタンの 上 方 向 のドラッグで 縮 小 下 方 向 のドラッグで 拡 大 をします また カーソル 上 キーによる 拡 大 下 キーによる 縮 小 を 行 うことも 可 能 です 5

6 マウスモードが 回 転 である 状 態 マウス 左 ボタンの 左 右 方 向 のドラッグ カーソル 左 右 キーの 押 下 によって 回 転 を 行 います N アイコン(N キー)の 押 下 で 北 が 真 上 に 戻 ります.マウスモードの 変 更 は スペースバー の 押 下 によって 変 更 することも 可 能 です + アイコンをクリックすると 拡 大 します (.X キーの 押 下 でも 拡 大 を 行 えます ) - アイコンをクリックすると 縮 小 します (.Z キーの 押 下 でも 縮 小 を 行 えます ) 6

7 POIの 設 定 画 面 左 側 のパネルを 使 って POI を 追 加 することが 可 能 です 左 の 図 のように 適 当 なタイトルと 備 考 を 入 力 して [POI を 設 置 します]ボタンを 押 下 します 下 の 図 のように メッセージが 表 示 されましたら 地 図 上 の 適 当 な 場 所 をクリックしてください クリックした 場 所 に 指 定 したアイコン 画 像 が 表 示 されます また アイコンをクリックすると 下 の 図 のようにダイアログが 表 示 され 入 力 し たタイトル 備 考 を 確 認 することができます 7

8 POI を CSV ファイルに 保 存 左 の 図 のように POI が 設 定 されている 状 態 で [ 画 面 上 の POI を 保 存 します]ボタンを 押 下 します ボタンの 下 に CSV ファイル と 書 かれたリンクが 現 れ ます このリンクをクリックしますと temp.csv のファイル 名 で ファイルをディスク 所 に 保 存 することができます Google Chrome ですと 下 の 図 のようにダウンロードフ ォルダにファイルが 現 れますので 適 当 な 名 前 に 変 更 して 別 のフォルダに 移 動 /コピーしてください 8

9 POI を CSV ファイルから 読 み 込 む [ファイルを 選 択 ]ボタンを 押 下 し て 読 み 込 むファイルを 選 択 します 続 いて [ファイルから POI を 読 み 込 みます]ボタンを 押 下 して POI の 読 み 込 みを 実 行 します 読 込 が 成 功 すると 下 の 図 のように 画 面 上 に POI が 表 示 されます 9

10 POI 用 CSV ファイルのフォーマット POI 用 CSV ファイルは 下 記 のフォーマットで 作 成 してください 緯 度, 経 度, 名 称,アイコンID, 表 示 範 囲 : 小 縮 尺, 表 示 範 囲 : 大 縮 尺, 備 考 緯 度 : 度 の 10 進 表 記 で 記 載 してください 経 度 : 同 上 名 称 :POI の 名 称 です アイコンID: pin_red pin_green pin_blue pin_yellow の 4 種 類 が デフォルトで 利 用 可 能 です 表 示 範 囲 : アイコンが 表 示 される 範 囲 を 縮 尺 の 分 母 で 指 定 します 常 に 表 示 する 場 合 には -1 を 指 定 します 1/50,000 から 1/2,500 の 間 で 表 示 する 場 合 には 50000,2500 を 指 定 します 備 考 :POI に 関 する 備 考 を 記 載 してください アイコンをクリックした 際 に 表 示 されます 記 載 例 , ,お 台 場 海 浜 公 園 駅,pin_green,25000,1000,ゆりかもめ , , 台 場 駅,pin_green,25000,1000,ゆりかもめ , , 船 の 科 学 館 駅,pin_green,25000,1000,ゆりかもめ , ,テレコムセンター 駅,pin_green,25000,1000,ゆりかもめ , , 青 海 駅,pin_green,25000,1000,ゆりかもめ 10

11 検 索 用 CSV ファイルのフォーマット 検 索 用 CSV ファイルは 下 記 のフォーマットで 作 成 してください 住 所 コード, 地 名, 緯 度, 経 度 住 所 コード:( 使 用 していませんので 適 当 な 値 で 結 構 です ) 地 名 : 住 所 の 名 称 です 緯 度 : 度 の 10 進 表 記 で 記 載 してください 経 度 : 同 上.CSV ファイルには ヘッダ 行 は 含 めないでください onload のイベントハンドラ 内 で loadaddrcsv( "Urayasu_Address.csv" ); のように loadaddrcsv 関 数 を 使 用 して 読 み 込 んでください 画 面 上 部 のテキストボックスに CSV に 記 載 の 住 所 を 入 力 して 指 定 の 住 所 にジャンプ ボタンを 押 すと 画 面 中 心 が 移 動 します 記 載 例 , 海 楽 一 丁 目, , , 海 楽 二 丁 目, , , 港, , , 高 洲 一 丁 目, , , 高 洲 二 丁 目, , , 高 洲 三 丁 目, , , 高 洲 四 丁 目, , , 高 洲 五 丁 目, , , 高 洲 六 丁 目, , , 高 洲 七 丁 目, , , 高 洲 八 丁 目, , , 高 洲 九 丁 目, , , 今 川 一 丁 目, , , 今 川 二 丁 目, , , 今 川 三 丁 目, , , 今 川 四 丁 目, , , 千 鳥, ,

12 特 定 のレイヤの 表 示 非 表 示 を 切 り 替 える 方 法 方 法 としては DOM の API で 要 素 にアクセスして その visibility を 変 更 するという ものになります ここでは その 一 例 として 要 素 に 特 定 の ID を 付 与 しておくという 方 法 をご 説 明 致 しま す 他 にも レイヤに 与 えられたクラスで 要 素 を 検 索 する 等 々の 方 法 が 考 えられます まず 表 示 / 非 表 示 を 切 り 替 えたいレイヤをインポートする<animation> 要 素 を <g> 要 素 で 括 り その<g> 要 素 に 一 意 となる ID を 付 与 します 記 載 例 <g id="elevpt"> <animation xlink:href="elevpt_02_cont_2500.svg" x="23" y="92" width="35123" height="35870" /> </g> 上 記 のようにコンテンツを 設 定 しておいた 後 JavaScript を 利 用 して 表 示 非 表 示 を 設 定 します レイヤ ElevPt を 非 表 示 にする 場 合 には 以 下 を 実 行 します g_svgmap.setlayervisiblebyid("elevpt", false); レイヤ ElevPt を 表 示 状 態 にする 場 合 には 以 下 を 実 行 します g_svgmap.setlayervisiblebyid("elevpt", true); 今 回 のデモコンテンツにおいては demo.js スクリプトの ElvPt_02() 関 数 を チェック ボックスがクリックされた 時 点 で 実 行 し 前 述 の 処 理 を 行 っています また このために 修 正 したコンテナファイルは 2500/cont.svg( 名 古 屋 は 3125/cont.svg) となります 12

13 2. デモ コンテンツ 作 成 方 法 ファイルの 準 備 オープンデータマップ(SVG 地 図 )を 表 示 するコンテンツを 作 成 するためには 最 低 以 下 の3つのリソースが 必 要 となります HTML ファイル SVG 変 換 ツールによって 出 力 された 地 図 データ(SVG ファイル CSS ファイル) SVG 地 図 操 作 用 スクリプトファイル テンプレート ディレクトリィ 内 の map_data ディレクトリィが 上 記 の 地 図 データに 相 当 し また svgtools ディレクトリィが 上 記 の 操 作 用 スクリプトに 相 当 します SVG 地 図 を 表 示 するためには HTML に 以 下 を 記 述 する 必 要 があります 1 操 作 用 スクリプトをインポートするための<script>タグ <script type="text/javascript" src="svgtools/svgmap.js"></script> 2 地 図 を 表 示 する 領 域 を 指 定 するための<svg>タグ <div id="map" style="outline:none;" tabindex="1"> <!-- ここに 地 図 を 表 示 します --> <svg id="mainmap" xmlns=" xmlns:xlink=" <g id="maproot" transform="translate(0,0)" fill="none"> <animation id="rootcontainer" x="-180" y="-90" width="360" height="360" xlink:href="about:blank"style="visibility:hidden;"> </animation> </g> </svg> </div> 上 記 の mainmap maproot という 名 称 の ID は 操 作 用 スクリプトより 参 照 していますので 変 更 しないようにしてください 3 ロード 時 に 実 行 する SVG 地 図 操 作 用 スクリプト svgtools/svgmap.js をインポートすると g_svgmap グローバル 変 数 に SVG 地 図 操 作 用 クラスのインスタンスが 設 定 されますので API の 実 行 は この 変 数 を 用 いて 実 行 します 13

14 テンプレートディレクトリィ 内 の sample.html にありますように SVG 地 図 を 表 示 するために 以 下 を 実 行 します var mapdiv = document.getelementbyid("map"); // SVG 機 能 を 初 期 化 します g_svgmap.initsvg( mapdiv ); // デフォルト UI を 有 効 にします g_svgmap.enabledefaultui(); // ズーム アイコンを 有 効 にします g_svgmap.enablezoomicons(); // 左 下 のメートル 表 示 g_svgmap.enablescaletext(); // ルートコンテナを 設 定 します // 状 況 に 応 じて 以 下 の URL を 変 更 してください var url = "map_data/cont.svg"; g_svgmap.setrootcontainer( url ); // 地 図 の 中 心 座 標 を 設 定 // SetInitCenter( , ); // 縮 尺 を 設 定 g_svgmap.setinitscale( ); // ルートコンテナを 読 み 込 みます g_svgmap.initialload( null ); 上 記 の 関 数 の 内 実 行 が 必 須 となるのは 以 下 となります g_svgmap.initsvg( mapdiv ); g_svgmap.setrootcontainer( url ); g_svgmap.initialload( null ); 他 の 関 数 は デフォルトのUIを 使 用 するための または 初 期 表 示 時 に 意 図 し た 地 点 を 意 図 した 縮 尺 で 表 示 するためのオプション 指 定 となります 14

15 テンプレート ディレクトリィ 内 のコンテンツ テンプレート ディレクトリィ 内 の sample.html をブラウザにロードすると 以 下 の 表 示 を 確 認 することができます map_data ディレクトリィ 内 の 地 図 コンテンツを 別 のデータと 置 き 換 えれば 表 示 内 容 を 変 更 することができます この 時 別 のディレクトリィに 置 いたデータを 読 みたい もしくは ルートのコンテ ナ の 名 称 が cont.svg で は な い と い う 場 合 に は 前 述 し た g_svgmap.setrootcontainer( url );のパラメータを 調 整 する 必 要 がありますので ご 注 意 ください 15

16 SVG 地 図 操 作 用 スクリプトが 提 供 する API SVG 地 図 操 作 用 スクリプトは 各 種 API 関 数 を 提 供 しています API ドキュメント ディレクトリィにオンラインのドキュメントがありますので ご 参 照 ください また 前 章 のデモ コンテンツは それらの API の 使 用 例 となっております 16