チュートリアル

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(チュートリアル3 海岸線地図のタイリングからの表示)
(SVGMapチュートリアル)
(1人の利用者による、間の13版が非表示)
1行: 1行:
 
= SVGMapチュートリアル =
 
= 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]]を参照。'''
[[チュートリアル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]
43行: 45行:
 
チュートリアル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]]を参照。
+
'''詳細は、 [[チュートリアル2]]を参照。'''
 +
 
 +
===あらすじ===
  
 
*ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
 
*ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
62行: 66行:
 
チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
 
チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
  
SVGMapのタイリングは他のフレームワークとは本質的に考え方が異なっています。
+
'''詳細は、 [[チュートリアル3]]を参照。'''
他のフレームワークではあらかじめ規定されたタイリング規則([https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 TMS]など)を前提とし、その規則で構築されたサーバへのアクセスのためのパラメータだけを指定する仕組みとなっています。一方、SVGMapのタイリングはよりプリミティブなもので、タイリングに対する規則を備えておらず(それは後述のダイナミックな地図として実装可能です)、タイルデータをインラインで展開したコンテナを用意し、ビューアはビューポートとそのコンテナを照合して必要なタイルを取得することでタイリングの動作を実現します。
+
 
+
この仕組みの図解は、[https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese こちらのより高度な資料]
+
の[https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese#14
+
14ページ]から[https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese#20
+
20ページ]までを参照してください。
+
  
 
+
===あらすじ===
詳細は、 [[チュートリアル3]]を参照。
+
 
*ファイル構成はtutrial3ディレクトリに以下のファイルがあります。
 
*ファイル構成はtutrial3ディレクトリに以下のファイルがあります。
 
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html tutorial3.html]
 
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html tutorial3.html]
100行: 97行:
 
チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
 
チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
  
詳細は、 [[チュートリアル4]]を参照。
+
'''詳細は、 [[チュートリアル4]]を参照。'''
  
 +
===概要===
 
*ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
 
*ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
 
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html tutorial4.html]
 
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html tutorial4.html]
112行: 110行:
 
***重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
 
***重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
 
***ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。
 
***ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。
 
  
 
== チュートリアル5 Dynamic Contents ==
 
== チュートリアル5 Dynamic Contents ==
119行: 116行:
 
実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。
 
実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。
  
詳細は、 [[チュートリアル5]]を参照。
+
'''詳細は、 [[チュートリアル5]]を参照。'''
  
 +
===概要===
 
*ファイル構成はtutrial5ディレクトリに以下のファイルがあります。
 
*ファイル構成はtutrial5ディレクトリに以下のファイルがあります。
 
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html tutorial5.html]
 
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html tutorial5.html]

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
      • 日本の海岸線のデータを多数の線で定義している。

チュートリアル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遷移かを選択するダイアログが表示される)

チュートリアル3 海岸線地図のタイリングからの表示

チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作はこちらをクリック。

詳細は、 チュートリアル3を参照。

あらすじ

チュートリアル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については、こちらを参照。

チュートリアル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ファイル。
個人用ツール
名前空間

変種
操作
案内
ツール
Translate