チュートリアル
提供: svg2wiki
(版間での差分)
(→チュートリアル2 海岸線地図とPOI(空港)表示) |
(→SVGMapチュートリアル) |
||
(2人の利用者による、間の28版が非表示) | |||
1行: | 1行: | ||
= SVGMapチュートリアル = | = SVGMapチュートリアル = | ||
− | + | SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。特に自身でSVGMapコンテンツを構築するシステム開発者向けの資料となっています。 | |
+ | |||
+ | 開発無しに手持ちのデータをツールを使ってSVGMapとして利用したいという利用者には[https://github.com/svgmap/svgMapTools/tree/master/tutorials こちらのチュートリアル]を推奨します。 | ||
チュートリアルプログラムのディレクトリ構成 | チュートリアルプログラムのディレクトリ構成 | ||
21行: | 23行: | ||
実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/tutorial1.html こちら]をクリック。 | 実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/tutorial1.html こちら]をクリック。 | ||
+ | '''詳細は、[[チュートリアル1]]を参照。''' | ||
+ | |||
+ | ===あらすじ=== | ||
*ファイル構成 tutrial1ディレクトリに以下のファイルがあります。 | *ファイル構成 tutrial1ディレクトリに以下のファイルがあります。 | ||
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/tutorial1.html tutrial1.html] | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/tutorial1.html tutrial1.html] | ||
− | ***SVGMapのコアプログラムファイル | + | ***SVGMapのコアプログラムファイル(SVGMapLv0.1_r14.js)を読み込み、SVGMapの各種APIを利用可能にする。 |
***地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。 | ***地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。 | ||
***ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。 | ***ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。 | ||
39行: | 44行: | ||
チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。 | チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。 | ||
+ | |||
+ | '''詳細は、 [[チュートリアル2]]を参照。''' | ||
+ | |||
+ | ===あらすじ=== | ||
*ファイル構成はtutrial2ディレクトリに以下のファイルがあります。 | *ファイル構成はtutrial2ディレクトリに以下のファイルがあります。 | ||
− | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/ | + | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html tutrial2.html] |
***チュートリアル2用のhtml。tutrial1.htmlと同様の内容。 | ***チュートリアル2用のhtml。tutrial1.htmlと同様の内容。 | ||
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/Container.svg Container.svg] | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/Container.svg Container.svg] | ||
48行: | 57行: | ||
***チュートリアル1のCoastline.svgに空港情報を追加。 | ***チュートリアル1のCoastline.svgに空港情報を追加。 | ||
***空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。 | ***空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。 | ||
+ | ***空港情報以外にhttpリンクも記述できる。この場合、以下の内容が実行可能になる。 | ||
+ | ****空港イメージをクリックすると他のWebページに遷移する。 | ||
+ | ****現在のURLに対してハッシュを付加することで、地図の表示位置を変更できる。 | ||
+ | ****上記の内容を1つの空港に対して、設定することができる(クリック後に、空港情報表示かURL遷移かを選択するダイアログが表示される) | ||
== チュートリアル3 海岸線地図のタイリングからの表示 == | == チュートリアル3 海岸線地図のタイリングからの表示 == | ||
− | + | チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。 | |
+ | '''詳細は、 [[チュートリアル3]]を参照。''' | ||
+ | |||
+ | ===あらすじ=== | ||
+ | *ファイル構成はtutrial3ディレクトリに以下のファイルがあります。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html tutorial3.html] | ||
+ | ***チュートリアル3用のhtml。tutrial1.htmlと同様の内容。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/Container.svg Container.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/Coastline.svg Coastline.svg] | ||
+ | ***以下の4×4(全16)分割したファイルを束ねるsvg。 | ||
+ | ***タイリングについては、[https://www.slideshare.net/totipalmate/tiling-51301496 SVGMapのタイリングアーキテクチャ]を参照。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_0.svg 0_0.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_1.svg 0_1.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_2.svg 0_2.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_3.svg 0_3.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_0.svg 1_0.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_1.svg 1_1.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_2.svg 1_2.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_3.svg 1_3.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_0.svg 2_0.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_1.svg 2_1.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_2.svg 2_2.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_3.svg 2_3.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_0.svg 3_0.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_1.svg 3_1.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_2.svg 3_2.svg] | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_3.svg 3_3.svg] | ||
== チュートリアル4 Bitmapイメージ地図表示 == | == チュートリアル4 Bitmapイメージ地図表示 == | ||
− | + | チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。 | |
+ | |||
+ | '''詳細は、 [[チュートリアル4]]を参照。''' | ||
+ | |||
+ | ===概要=== | ||
+ | *ファイル構成はtutrial4ディレクトリに以下のファイルがあります。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html tutorial4.html] | ||
+ | ***チュートリアル4用のhtml。tutrial1.htmlと同様の内容。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/Container.svg Container.svg] | ||
+ | ***チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/Coastline.svg Coastline.svg] | ||
+ | ***チュートリアル1と同様の日本の海岸線データ。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/bitmapImage.svg bitmapImage.svg] | ||
+ | ***重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。 | ||
+ | ***ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。 | ||
+ | |||
+ | == チュートリアル5 Dynamic Contents == | ||
+ | |||
+ | 外部のOpenStreetMapを表示するチュートリアルです。OpenStreetMapが256×256ピクセルのタイルに分割されたイメージを使用しているので、画面に表示される部分・ズーム率などから最適なタイルを取得表示するJavaScriptをSVGファイルに埋め込んであります。 | ||
+ | 実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。 | ||
+ | |||
+ | '''詳細は、 [[チュートリアル5]]を参照。''' | ||
+ | |||
+ | ===概要=== | ||
+ | *ファイル構成はtutrial5ディレクトリに以下のファイルがあります。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html tutorial5.html] | ||
+ | ***チュートリアル5用のhtml。tutrial1.htmlと同様の内容。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/Container.svg Container.svg] | ||
+ | ***外部のOpenStreetMapを表示するためのdynamicOSM_r10.svgを読み込む。 | ||
+ | **[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r10.svg dynamicOSM_r10.svg] | ||
+ | ***外部のOpenStreetMapを表示するためのJavaScriptを含むSVGファイル。 |
2018年9月4日 (火) 05:14時点における版
目次 |
SVGMapチュートリアル
SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。特に自身でSVGMapコンテンツを構築するシステム開発者向けの資料となっています。
開発無しに手持ちのデータをツールを使ってSVGMapとして利用したいという利用者にはこちらのチュートリアルを推奨します。
チュートリアルプログラムのディレクトリ構成
└───devinfo └───devkddi └───tutorials ├───js Javascriptファイル ├───img イメージファイル ├───tutorial1 チュートリアル1 . . └───tutorialN チュートリアルN
チュートリアル1 海岸線地図表示
最初に日本の海岸線を表示するチュートリアルです。 実際の動作は、こちらをクリック。
詳細は、チュートリアル1を参照。
あらすじ
- ファイル構成 tutrial1ディレクトリに以下のファイルがあります。
- tutrial1.html
- SVGMapのコアプログラムファイル(SVGMapLv0.1_r14.js)を読み込み、SVGMapの各種APIを利用可能にする。
- 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
- ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
- ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。
- ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。
- GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。
- 中心を表す十字マークを表示。
- 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
- Container.svg
- 表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)
- Coastline.svg
- 日本の海岸線のデータを多数の線で定義している。
- tutrial1.html
チュートリアル2 海岸線地図とPOI(空港)表示
チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作はこちらをクリック。
詳細は、 チュートリアル2を参照。
あらすじ
- ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
- tutrial2.html
- チュートリアル2用のhtml。tutrial1.htmlと同様の内容。
- Container.svg
- 表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
- Coastline_Airport.svg
- チュートリアル1のCoastline.svgに空港情報を追加。
- 空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。
- 空港情報以外にhttpリンクも記述できる。この場合、以下の内容が実行可能になる。
- 空港イメージをクリックすると他のWebページに遷移する。
- 現在のURLに対してハッシュを付加することで、地図の表示位置を変更できる。
- 上記の内容を1つの空港に対して、設定することができる(クリック後に、空港情報表示かURL遷移かを選択するダイアログが表示される)
- tutrial2.html
チュートリアル3 海岸線地図のタイリングからの表示
チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作はこちらをクリック。
詳細は、 チュートリアル3を参照。
あらすじ
- ファイル構成はtutrial3ディレクトリに以下のファイルがあります。
- tutorial3.html
- チュートリアル3用のhtml。tutrial1.htmlと同様の内容。
- Container.svg
- Coastline.svg
- 以下の4×4(全16)分割したファイルを束ねるsvg。
- タイリングについては、SVGMapのタイリングアーキテクチャを参照。
- 0_0.svg
- 0_1.svg
- 0_2.svg
- 0_3.svg
- 1_0.svg
- 1_1.svg
- 1_2.svg
- 1_3.svg
- 2_0.svg
- 2_1.svg
- 2_2.svg
- 2_3.svg
- 3_0.svg
- 3_1.svg
- 3_2.svg
- 3_3.svg
- tutorial3.html
チュートリアル4 Bitmapイメージ地図表示
チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作はこちらをクリック。
詳細は、 チュートリアル4を参照。
概要
- ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
- tutorial4.html
- チュートリアル4用のhtml。tutrial1.htmlと同様の内容。
- Container.svg
- チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む
- Coastline.svg
- チュートリアル1と同様の日本の海岸線データ。
- bitmapImage.svg
- 重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
- ビットマップイメージSVGについては、こちらを参照。
- tutorial4.html
チュートリアル5 Dynamic Contents
外部のOpenStreetMapを表示するチュートリアルです。OpenStreetMapが256×256ピクセルのタイルに分割されたイメージを使用しているので、画面に表示される部分・ズーム率などから最適なタイルを取得表示するJavaScriptをSVGファイルに埋め込んであります。 実際の動作は、こちらをクリック。
詳細は、 チュートリアル5を参照。
概要
- ファイル構成はtutrial5ディレクトリに以下のファイルがあります。
- tutorial5.html
- チュートリアル5用のhtml。tutrial1.htmlと同様の内容。
- Container.svg
- 外部のOpenStreetMapを表示するためのdynamicOSM_r10.svgを読み込む。
- dynamicOSM_r10.svg
- 外部のOpenStreetMapを表示するためのJavaScriptを含むSVGファイル。
- tutorial5.html