チュートリアル

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(チュートリアル4 Bitmapイメージ地図表示)
(あらすじ)
 
(1人の利用者による、間の210版が非表示)
1行: 1行:
= SVGMapチュートリアル =
 
  
 
SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。特に自身でSVGMapコンテンツを構築するシステム開発者向けの資料となっています。
 
SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。特に自身でSVGMapコンテンツを構築するシステム開発者向けの資料となっています。
5行: 4行:
 
開発無しに手持ちのデータをツールを使ってSVGMapとして利用したいという利用者には[https://github.com/svgmap/svgMapTools/tree/master/tutorials こちらのチュートリアル]を推奨します。  
 
開発無しに手持ちのデータをツールを使ってSVGMapとして利用したいという利用者には[https://github.com/svgmap/svgMapTools/tree/master/tutorials こちらのチュートリアル]を推奨します。  
  
チュートリアルプログラムのディレクトリ構成
+
*チュートリアルプログラムのディレクトリ構成。
 +
* 各チュートリアル1~Nのディレクトリ下の内容を丸ごとコピーすれば、そのチュートリアルでつくられるコンテンツが動作するようになっています。
 +
** [[チュートリアル1#Note:.E3.80.80.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB.E3.81.A7.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.81.AE.E3.83.80.E3.82.A6.E3.83.B3.E3.83.AD.E3.83.BC.E3.83.89|チュートリアルで使うファイルのダウンロード方法]]
 
   
 
   
  └───devinfo
+
<pre>
      └───devkddi
+
  └─devinfo
          └───tutorials
+
   └─devkddi
              ├───js          Javascriptファイル
+
     └─tutorials
              ├───img        イメージファイル
+
       ├─tutorial1   チュートリアル1
              ├───tutorial1   チュートリアル1
+
        .
                .
+
        .
                .
+
       └─tutorialN   チュートリアルN
              └───tutorialN   チュートリアルN
+
</pre>
 +
 
 +
= 基本編 =
 +
SVGMap.jsを用いた地図コンテンツ(ウェブページ)を構築する 基本的なチュートリアルです。
 +
 
 +
基本編はすべて静的なファイル(コンテンツ)だけで構成されます。javascriptによるWebAppのコーディングも行いません。
 +
 
 +
また、サーバ側にもDBMSやGISサーバエンジンは設置しません。(なお、サーバ側に動的なものを設置しない点は、[[#WebApp_Layer.E7.B7.A8|WebApp Layer編]]も同様)
  
  
21行: 29行:
  
 
最初に日本の海岸線を表示するチュートリアルです。
 
最初に日本の海岸線を表示するチュートリアルです。
実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/tutorial1.html こちら]をクリック。
+
 
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html こちら]をクリック。
  
 
===解説===
 
===解説===
27行: 36行:
  
 
====あらすじ====
 
====あらすじ====
*ファイル構成 tutrial1ディレクトリに以下のファイルがあります。
+
*ファイル構成 [https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/ tutorial1ディレクトリ]に以下のファイルがあります。** [[チュートリアル1#Note:.E3.80.80.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB.E3.81.A7.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.81.AE.E3.83.80.E3.82.A6.E3.83.B3.E3.83.AD.E3.83.BC.E3.83.89|チュートリアルで使うファイルのダウンロード方法]]を解説します。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/tutorial1.html tutrial1.html]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html tutrial1.html]
 
***SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.jsおよびSVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
 
***SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.jsおよびSVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
 
***地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
 
***地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
37行: 46行:
 
***中心を表す十字マークを表示。
 
***中心を表す十字マークを表示。
 
***上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
 
***上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/Container.svg Container.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Container.svg Container.svg]
 
***表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)
 
***表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial1/Coastline.svg Coastline.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Coastline.svg Coastline.svg]
 
***日本の海岸線のデータを多数の線で定義している。
 
***日本の海岸線のデータを多数の線で定義している。
  
== チュートリアル2 海岸線地図とPOI(空港)表示 ==
+
== チュートリアル2a 海岸線地図と空港POI表示 ==
  
チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
+
チュートリアル1の内容に空港のPOI([https://ja.wikipedia.org/wiki/Point_of_interest Point of interest])を表示するチュートリアルです。
 +
 
 +
実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
  
 
===解説===
 
===解説===
* '''詳細は、 [[チュートリアル2]]を参照。'''
+
* '''詳細は、 [[チュートリアル2a]]を参照。'''
  
 
====あらすじ====
 
====あらすじ====
  
*ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2 tutorial2ディレクトリ]に以下のファイルがあります。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html tutrial2.html]
+
**[https://www.svgmap.org/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]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/Container.svg Container.svg]
 
***表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
 
***表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg Coastline_Airport.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg Coastline_Airport.svg]
 
***チュートリアル1のCoastline.svgに空港情報を追加。
 
***チュートリアル1のCoastline.svgに空港情報を追加。
 
***空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。
 
***空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。
65行: 76行:
  
 
== チュートリアル2b 海岸線地図とPOI(空港)表示 (レイヤリング) ==
 
== チュートリアル2b 海岸線地図とPOI(空港)表示 (レイヤリング) ==
チュートリアル2の内容に対して、POI(空港)と海岸線地図を別ファイルに分け、レイヤリング表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2b.html こちら]をクリック。
+
チュートリアル2aの内容に対して、POI(空港)と海岸線地図を別ファイルに分け、レイヤリング表示するチュートリアルです。
 +
 
 +
実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
  
 
===解説===
 
===解説===
72行: 85行:
 
====あらすじ====
 
====あらすじ====
  
*ファイル構成はtutrial2bディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/ tutorial2bディレクトリ]に以下のファイルがあります。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html tutrial2b.html]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html tutrial2b.html]
 
***チュートリアル2b用のhtml。tutrial1.htmlに対して、レイヤーリスト・On/Off UIを設置している。(id="layerList"のdiv要素)
 
***チュートリアル2b用のhtml。tutrial1.htmlに対して、レイヤーリスト・On/Off UIを設置している。(id="layerList"のdiv要素)
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/Container.svg Container.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Container.svg Container.svg]
 
***表示する各レイヤ用のSVGファイルを読み込む(Airport.svgと、Coastline.svgの2個のファイル(レイヤ)を読み込んでいる)
 
***表示する各レイヤ用のSVGファイルを読み込む(Airport.svgと、Coastline.svgの2個のファイル(レイヤ)を読み込んでいる)
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/Airport.svg Airport.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Airport.svg Airport.svg]
 
***空港情報を別ファイルとして追加。
 
***空港情報を別ファイルとして追加。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/Coastline.svg Coastline.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Coastline.svg Coastline.svg]
 
***チュートリアル1のCoastline.svg
 
***チュートリアル1のCoastline.svg
  
== チュートリアル3 海岸線地図のタイリングからの表示 ==
+
== チュートリアル2c OpenStreetMapとPOI(空港)表示 (レイヤリング) ==
 +
チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。
  
チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
+
実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html こちら]をクリック。
 +
 
 +
===解説===
 +
*'''詳細は、 [[チュートリアル2c]]を参照。'''
 +
 
 +
====あらすじ====
 +
 
 +
*ファイル構成はtutrial2cディレクトリに以下のファイルがあります。
 +
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html tutrial2c.html]
 +
*Container.svgで参照している背景地図を、Coastline.svgからdynamicOSM_r11.svgに置き換えています。
 +
**dynamicOSM_r11.svgはjavascriptコードが紐付けられた動的なコンテンツ(WebAppLayer)になっています。本章ではその内容は割愛し、実用的なレイヤリングを実践してみます。
 +
*** Note: 動的なコンテンツの詳細は[[#WebApp_Layer.E7.B7.A8|WebApp Layer編]]で解説されています。
 +
 
 +
== チュートリアル3 タイリングされた海岸線地図の表示 ==
 +
 
 +
チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。
 +
 
 +
実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
  
 
===解説===
 
===解説===
90行: 121行:
  
 
====あらすじ====
 
====あらすじ====
*ファイル構成はtutrial3ディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/ tutorial3ディレクトリ]に以下のファイルがあります。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/tutorial3.html tutorial3.html]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html tutorial3.html]
 
***チュートリアル3用のhtml。tutrial1.htmlと同様の内容。
 
***チュートリアル3用のhtml。tutrial1.htmlと同様の内容。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/Container.svg Container.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/Container.svg Container.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/Coastline.svg Coastline.svg]
+
**[https://www.svgmap.org//devinfo/devkddi/tutorials/tutorial3/Coastline.svg Coastline.svg]
 
***以下の4×4(全16)分割したファイルを束ねるsvg。
 
***以下の4×4(全16)分割したファイルを束ねるsvg。
 
***タイリングについては、[https://www.slideshare.net/totipalmate/tiling-51301496 SVGMapのタイリングアーキテクチャ]を参照。
 
***タイリングについては、[https://www.slideshare.net/totipalmate/tiling-51301496 SVGMapのタイリングアーキテクチャ]を参照。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_0.svg 0_0.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_0.svg 0_0.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_1.svg 0_1.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_1.svg 0_1.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_2.svg 0_2.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_2.svg 0_2.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/0_3.svg 0_3.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_3.svg 0_3.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_0.svg 1_0.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_0.svg 1_0.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_1.svg 1_1.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_1.svg 1_1.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_2.svg 1_2.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_2.svg 1_2.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/1_3.svg 1_3.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_3.svg 1_3.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_0.svg 2_0.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_0.svg 2_0.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_1.svg 2_1.svg]
+
**[https://www.svgmap.org//devinfo/devkddi/tutorials/tutorial3/2_1.svg 2_1.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_2.svg 2_2.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_2.svg 2_2.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/2_3.svg 2_3.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_3.svg 2_3.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_0.svg 3_0.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_0.svg 3_0.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_1.svg 3_1.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_1.svg 3_1.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_2.svg 3_2.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_2.svg 3_2.svg]
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3/3_3.svg 3_3.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_3.svg 3_3.svg]
 +
 
 +
== チュートリアル3b タイリング (svgMapToolsを用いた静的タイルの作成) ==
 +
 
 +
前章ではすでに作成済みのタイルを用いていましたが、ここでは[https://github.com/svgmap/svgMapTools svgMapTools]を用いて、shapefileからタイルデータを作成し表示してみます。
 +
 
 +
実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
 +
 
 +
===解説===
 +
*'''詳細は、 [[チュートリアル3b]]を参照。'''
 +
 
 +
====あらすじ====
 +
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/ tutorial3bディレクトリ]ディレクトリに以下のファイルがあります。
 +
** https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/
 +
*svgMapToolsを使って、地球地図 日本のデータのうちいくつかをタイリングされたSVGMapコンテンツに変換。
 +
**svgMapToolsが行うタイリング(Quad Tree Composite Tiling)については、[https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese こちらの資料]を参照。
 +
*変換したコンテンツを、レイヤーとして表示
  
 
== チュートリアル4 Bitmapイメージ地図表示 ==
 
== チュートリアル4 Bitmapイメージ地図表示 ==
  
チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
+
チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。
 +
 
 +
実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
  
 
===解説===
 
===解説===
 
*'''詳細は、 [[チュートリアル4]]を参照。'''
 
*'''詳細は、 [[チュートリアル4]]を参照。'''
  
====概要====
+
====あらすじ====
*ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html tutrial4ディレクトリ]に以下のファイルがあります。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html tutorial4.html]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html tutorial4.html]
 
***チュートリアル4用のhtml。tutrial1.htmlと同様の内容。
 
***チュートリアル4用のhtml。tutrial1.htmlと同様の内容。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/Container.svg Container.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/Container.svg Container.svg]
 
***チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む
 
***チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/Coastline.svg Coastline.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/dynamicOSM_r11.svg dynamicOSM_r11.svg]
***チュートリアル1と同様の日本の海岸線データ。
+
***チュートリアル2cと同様のOpenStreetMapレイヤー
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/bitmapImage.svg bitmapImage.svg]
+
 
***重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
+
*重ね合わせるビットマップイメージSVGファイル。
***ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。
+
**こちらのツールを使用して作成したもの。 [https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/ ビットイメージの地図画像をSVGMapのレイヤー化するツール]
 +
 
 +
= WebApp Layer編 =
 +
SVGMapでは、レイヤーとして 単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションを紐付けることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に制御・変更できる[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]を用いることができるという特徴があります。([https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3 Web Applicationとは])
 +
 
 +
この機構は他のレイヤーには基本的に影響を与えないため([https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96 カプセル化])、アプリケーションの[https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%91%E3%82%B2%E3%83%86%E3%82%A3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0 スパゲッティ化]を抑制できます。
 +
 
 +
WebApp Layer編はこの機能を使うWebAppをコーディングします。 ただし、サーバ側には基本編と同様に動的な仕組みの構築は不要です。(依然としてサーバには静的なコンテンツ・WebAppのファイル(htmlやjs)を設置するだけで、DBMSや動的な機構([https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 ウェブサービス])をサーバ上に構築しません。)
 +
 
 +
なお、SVGMap.jsはWMSやWFSのような動的に地図・地理情報を配信する仕組みやDBMSを用いた動的なサーバ([https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 ウェブサービス])を接続して動作させることも可能です。[[#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.83.BC.E3.83.93.E3.82.B9.E7.B5.90.E5.90.88.E7.B7.A8|ウェブサービス結合編]]を参照ください。
  
 
== チュートリアル5 WebApp Layer タイルピラミッド==
 
== チュートリアル5 WebApp Layer タイルピラミッド==
SVGMapでは、レイヤーとして単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションが紐づけることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に変更できる[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]を用いることができます。
 
  
これを用いることで、[https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames OpenStreetMapのタイルピラミッド]を用いて、伸縮・スクロールに応じ適切な地図を表示するレイヤーを、SVGMapの[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]によって構成するチュートリアルです。
+
[https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames OpenStreetMapのタイルピラミッド]を用いて、伸縮・スクロールに応じ適切な地図を表示([https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics) Level of Detail])するレイヤーを、SVGMapの[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]によって構成するチュートリアルです。
  
実際の動作は、[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。
+
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html こちら]をクリック。
  
  
'''詳細は、 [[チュートリアル5]]を参照。'''
+
===解説===
 +
*'''詳細は、 [[チュートリアル5]]を参照。'''
  
===概要===
+
====あらすじ====
*ファイル構成はtutrial5ディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5 tutorial5]ディレクトリに以下のファイルがあります。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/tutorial5.html tutorial5.html]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html tutorial5.html]
 
***チュートリアル5用のhtml。tutrial2b.htmlと同様の内容。
 
***チュートリアル5用のhtml。tutrial2b.htmlと同様の内容。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/Container.svg Container.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/Container.svg Container.svg]
 
***外部のOpenStreetMapを表示するためのdynamicOSM_r11.svgを読み込む。
 
***外部のOpenStreetMapを表示するためのdynamicOSM_r11.svgを読み込む。
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.svg dynamicOSM_r11.svg]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.svg dynamicOSM_r11.svg]
 
***外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している)
 
***外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している)
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.html dynamicOSM_r11.html]
+
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.html dynamicOSM_r11.html]
***上記dynamicOSM_r11.svgに紐づいたウェブアプリケーション
+
***上記dynamicOSM_r11.svgに紐づいたウェブアプリケーションのhtml
 +
**[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.js dynamicOSM_r11.js]
 +
***上記dynamicOSM_r11.svgに紐づいたウェブアプリケーションのjavascriptコード
  
 
== チュートリアル6 WebApp Layer geoJSON==
 
== チュートリアル6 WebApp Layer geoJSON==
161行: 221行:
 
===解説===
 
===解説===
 
* '''詳細は、 [[チュートリアル6]]を参照。'''
 
* '''詳細は、 [[チュートリアル6]]を参照。'''
 +
 +
====あらすじ====
 +
*[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/ tutorial6ディレクトリ]
 +
*geojson1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
 +
*Container.svg: クリッカブルなレイヤリングの設定
 +
*geoJsonExample1.svg: UIを持ったレイヤーを操作するwebAppを指定する方法
 +
*geoJsonExample1.html:
 +
*geoJsonExample1.js: svgMapGIStoolによるGeoJsonデータのSVGMapコンテンツ化
  
 
== チュートリアル7 WebApp Layer ベクトルタイル==
 
== チュートリアル7 WebApp Layer ベクトルタイル==
169行: 237行:
 
===解説===
 
===解説===
 
*'''詳細は、 [[チュートリアル7]]を参照。'''
 
*'''詳細は、 [[チュートリアル7]]を参照。'''
 +
 +
====あらすじ====
 +
*[https://svgmap.org/devinfo/devkddi/tutorials/tiling1/ ソースコードのディレクトリ]
 +
*tiling1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
 +
*Container.svg: クリッカブルなレイヤリングの設定 ([[チュートリアル6]]とほぼ同じ)
 +
*simpleTiling.svg: UIを持ったレイヤーを操作するwebApp [[チュートリアル6]]とほぼ同じ
 +
*simpleTiling.html:
 +
*simpleTiling.js:
 +
**GeoJsonを読む点は[[チュートリアル6]]と同様
 +
**表示領域に応じてGeoJsonを動的に読み込む
 +
***小縮尺(広いエリア)表示のとき、読み込むタイルが多くなりすぎる場合は読み込みをやめ表示させない
  
 
== チュートリアル8 WebApp Layer メッシュデータ==
 
== チュートリアル8 WebApp Layer メッシュデータ==
177行: 256行:
 
===解説===
 
===解説===
 
* '''詳細は、 [[チュートリアル8]]を参照。'''
 
* '''詳細は、 [[チュートリアル8]]を参照。'''
 +
 +
====あらすじ====
 +
*[https://svgmap.org/devinfo/devkddi/tutorials/mesh1/ ソースコードのディレクトリ]
 +
*このチュートリアルで扱うメッシュデータの形式を決める
 +
*Container.svg: クリッカブルなレイヤーを指定
 +
*ArrayMesh.svg: webAppが紐付けられたレイヤー
 +
*ArrayMesh.html:
 +
*ArrayMesh.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
 +
 +
== チュートリアル9 WebApp Layer メッシュタイル (タイル分割されたメッシュデータ)==
 +
 +
webAppで非同期読み込みにより、タイル分割されたメッシュデータを表示するチュートリアルです。読み込むメッシュデータは地域基準メッシュをベースとした[[チュートリアル8#Gridded_XYZ|Gridded XYZ]]データとし、小縮尺データおよび大縮尺データを用意して簡単なタイルピラミッドを構成し、[https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics) Level of Detail]を実装しています。
 +
 +
可視化に用いるサンプルデータは統計局が公開する[https://www.stat.go.jp/data/mesh/m_itiran.html 3次メッシュの自治体コード]データです。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html mesh2.html] をクリック。
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル9]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh2/ ソースコードのディレクトリ]
 +
*このチュートリアルで扱うメッシュデータの形式
 +
*Container.svg: クリッカブルなレイヤーを指定
 +
*meshTileViewer.svg: webAppが紐付けられたレイヤー、webAppsは隠れた状態で起動
 +
*meshTileViewer.html:
 +
*meshTileViewer.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
 +
 +
== チュートリアル9b WebApp Layer メッシュタイル カスタムダイアログ==
 +
チュートリアル9の内容に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしています。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html mesh2b.html] をクリック。
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル9b]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/ ソースコードのディレクトリ]
 +
*meshTileViewerB.html: レイヤーに紐付けられたwebApp。チュートリアル9の内容に加え、オブジェクトをクリックしたときに起動するコールバック関数を設定し、ダイアログをカスタマイズしています。
 +
 +
== チュートリアル10 WebApp Layer メッシュデータのビットイメージ化==
 +
メッシュデータ(グリッドデータ)は[[チュートリアル8#Raster|ラスターデータとも呼ばれる]]ように、Webコンテンツとして使われるビットイメージデータとほぼ同等です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html mesh3.html] をクリック。
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル10]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh3/ ソースコードのディレクトリ]
 +
*地理院が公開する[https://fgd.gsi.go.jp/download/geoid.php ジオイド高データ](TEXTデータ)をfetchAPIで読み込み変数(Object)に保持する
 +
*canvas要素のAPIを用いてビットイメージを構築
 +
*dataURI化してSVGのimage要素にし、地図上に配置
 +
 +
== チュートリアル11 WebApp Layer 地図を使った位置指定UI==
 +
[[チュートリアル10]]をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html mesh3b.html] をクリック。
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル11]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/ ソースコードのディレクトリ]
 +
*バイリニア補完によるメッシュデータを利用した任意位置の値の計算
 +
*地図上の任意の点を指定して、その位置のジオイド高を表示
 +
 +
=ウェブサービス結合編=
 +
SVGMap.jsは[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html 高度で柔軟なタイリング機構]により[https://en.wikipedia.org/wiki/Jamstack Jamstackのパターン]を幅広く活用できるため、サーバのオーバヘッドが大きい動的なウェブサービスが必要なケースを従来のフレームワークと比べて大幅に減らすことができます。(参考:[https://github.com/svgmap/svgMapTools/tree/master/tutorials SVGMapToolsを使ったチュートリアル]、[https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html Quad Tree Composite Tiling and the standardization of tiling])
 +
 +
それでも動的なサービスの結合が必要なことは多くあるため、ここではその方法を既存の公開ウェブサービスを利用したwebAppレイヤーとして実装してみます。(依ってこのチュートリアルでは動的なサービスの利用に留まり、動的なサービス側を構築することには踏み込みません。[https://ja.wikipedia.org/wiki/GeoServer GeoServer], [https://ja.wikipedia.org/wiki/MapServer MapServer], [https://gis-ops.com/postgrest-postgis-api-tutorial-geospatial-api-in-5-minutes/ PostgREST + PostGIS ] 等はその実装に利用できるでしょう。SVGMap.orgでも [https://github.com/svgmap/redisSvgMap redisSvgMap]という 高性能な動的サービスを構築するためのコードを公開しています。)
 +
 +
サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション([[解説書#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|Layers as WebApps]])として構成される(疎結合である)ことから、このパターンは地図に適用した[https://learn.microsoft.com/ja-jp/dotnet/architecture/microservices/architect-microservice-container-applications/microservice-based-composite-ui-shape-layout コンポジットUI]タイプの[https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 マイクロサービス]の一種といえるでしょう。
 +
 +
=== Note:クロスオリジンアクセス===
 +
外部のウェブサービスを結合する場合、外部サービスによってはクロスオリジンアクセスとなることを理解し対処する必要があります。'''[[クロスオリジンアクセス|こちらに情報を掲載]]'''しましたので参照ください。
 +
 +
 +
== チュートリアル12 WMSの利用==
 +
指定したパラーメータに従ってビットイメージの地図データを出力するウェブサービス仕様[https://ja.wikipedia.org/wiki/Web_Map_Service Web Map Service (WMS)]のサービスをSVGMapのレイヤーとして表示させてみます。
 +
 +
[https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/ GEBCO Web Service]([https://ja.wikipedia.org/wiki/%E5%A4%A7%E6%B4%8B%E6%B0%B4%E6%B7%B1%E7%B7%8F%E5%9B%B3 海底を含む全球地形図])を使ってみます。
 +
 +
まずは伸縮スクロールとは関係なく、地図コンテンツを単に表示させてみます。これは[[チュートリアル4]]と行っていることは基本的に同じです。WMSのスペックに従ってURLのクエリパートを設定するだけです。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html wms1.html] をクリック。(Note: WMSが地図を生成配信するまでに少々時間がかかります)
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル12]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/wms1/ ソースコードのディレクトリ]
 +
*WMSのパラメータとSVGMapコンテンツのビットイメージ配置のパラメータの関係を理解します
 +
*image要素によって、WMSから取得したデータを配置します
 +
 +
== チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示==
 +
[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer機構]]を用いれば、ウェブサービスに接続し表示領域に応じた地図コンテンツを動的に表示することができます。チュートリアル12と同じ[https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/ GEBCO Web Service]を使ってみます。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html wms2.html] をクリック。(Note: WMSが地図を生成配信するまでに少々時間がかかります)
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル13]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/wms2/ ソースコードのディレクトリ]
 +
*表示領域のパラメータを伸縮スクロールの度に取得します。
 +
*このパラメータを用いて、WMSへのクエリURLを構築します。
 +
*image要素によって、WMSから取得したデータを配置します
 +
*1ステップ前のimage要素は消去します。
 +
 +
==チュートリアル14 WebApp Layer ベクトル地理情報サービスの結合==
 +
 +
動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、[https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php 世界の地震発生状況データ](GeoJSON版)を結合してみます。
 +
 +
動的なサービスと接続してはいますが、基本的には[[#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON|チュートリアル6]]との違いはありません。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html geojson2.html] をクリック。
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル14]]を参照。'''
 +
 +
====あらすじ====
 +
[[#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON|チュートリアル6]]に対し、以下が相違点です。
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/geojson2/ ソースコードのディレクトリ]
 +
*geoJsonExample2.html:
 +
**[https://earthquake.usgs.gov/earthquakes/feed/ USGS Earthquake Hazards Program Feed]の仕様に基づいたGeoJsonリクエスト用URLの生成とそのためのUI
 +
**同仕様に基づいたメタデータ表示設定
 +
**10分に一回更新
 +
 +
==チュートリアル15 WebApp Layer 伸縮スクロールに応じたベクトル地理情報サービス結合==
 +
 +
動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。前章と異なり、伸縮スクロールする度にその表示領域に応じたデータをサービスから取得して表示します。
 +
 +
ここではNatural Resources Canadaが提供している、[https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249 Geoname Service API](カナダの地名データサービス)を結合してみます。
 +
 +
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html vectorService1.html] をクリック。(Note: サービスがデータを生成配信するまでに少々時間がかかります)
 +
 +
===解説===
 +
* '''詳細は、 [[チュートリアル15]]を参照。'''
 +
 +
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/ ソースコードのディレクトリ]
 +
*表示領域のパラメータを伸縮スクロールの度に取得します。
 +
*このパラメータを用いて、[https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249 仕様に]基づきサービスへのクエリURLを構築、CSVを取得します。
 +
*ポイントデータをSVGのuse要素として可視化します。
 +
*1ステップ前のデータは消去します。

2024年7月19日 (金) 10:20時点における最新版

SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。特に自身でSVGMapコンテンツを構築するシステム開発者向けの資料となっています。

開発無しに手持ちのデータをツールを使ってSVGMapとして利用したいという利用者にはこちらのチュートリアルを推奨します。

 └─devinfo
   └─devkddi
     └─tutorials
       ├─tutorial1   チュートリアル1
        .
        .
       └─tutorialN   チュートリアルN

目次

[編集] 基本編

SVGMap.jsを用いた地図コンテンツ(ウェブページ)を構築する 基本的なチュートリアルです。

基本編はすべて静的なファイル(コンテンツ)だけで構成されます。javascriptによるWebAppのコーディングも行いません。

また、サーバ側にもDBMSやGISサーバエンジンは設置しません。(なお、サーバ側に動的なものを設置しない点は、WebApp Layer編も同様)


[編集] チュートリアル1 海岸線地図表示

最初に日本の海岸線を表示するチュートリアルです。

実際の動作は、こちらをクリック。

[編集] 解説

[編集] あらすじ

  • ファイル構成 tutorial1ディレクトリに以下のファイルがあります。** チュートリアルで使うファイルのダウンロード方法を解説します。
    • tutrial1.html
      • SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.jsおよびSVGMapLv0.1_LayerUI2_r4.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
      • 日本の海岸線のデータを多数の線で定義している。

[編集] チュートリアル2a 海岸線地図と空港POI表示

チュートリアル1の内容に空港のPOI(Point of interest)を表示するチュートリアルです。

実際の動作はこちらをクリック。

[編集] 解説

[編集] あらすじ

  • ファイル構成はtutorial2ディレクトリに以下のファイルがあります。
    • tutrial2.html
      • チュートリアル2用のhtml。tutrial1.htmlと同様の内容。
    • Container.svg
      • 表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
    • Coastline_Airport.svg
      • チュートリアル1のCoastline.svgに空港情報を追加。
      • 空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。
      • 空港情報以外にhttpリンクも記述できる。この場合、以下の内容が実行可能になる。
        • 空港イメージをクリックすると他のWebページに遷移する。
        • 現在のURLに対してハッシュを付加することで、地図の表示位置を変更できる。
        • 上記の内容を1つの空港に対して、設定することができる(クリック後に、空港情報表示かURL遷移かを選択するダイアログが表示される)

[編集] チュートリアル2b 海岸線地図とPOI(空港)表示 (レイヤリング)

チュートリアル2aの内容に対して、POI(空港)と海岸線地図を別ファイルに分け、レイヤリング表示するチュートリアルです。

実際の動作はこちらをクリック。

[編集] 解説

[編集] あらすじ

  • ファイル構成はtutorial2bディレクトリに以下のファイルがあります。
    • tutrial2b.html
      • チュートリアル2b用のhtml。tutrial1.htmlに対して、レイヤーリスト・On/Off UIを設置している。(id="layerList"のdiv要素)
    • Container.svg
      • 表示する各レイヤ用のSVGファイルを読み込む(Airport.svgと、Coastline.svgの2個のファイル(レイヤ)を読み込んでいる)
    • Airport.svg
      • 空港情報を別ファイルとして追加。
    • Coastline.svg
      • チュートリアル1のCoastline.svg

[編集] チュートリアル2c OpenStreetMapとPOI(空港)表示 (レイヤリング)

チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。

実際の動作はこちらをクリック。

[編集] 解説

[編集] あらすじ

  • ファイル構成はtutrial2cディレクトリに以下のファイルがあります。
  • Container.svgで参照している背景地図を、Coastline.svgからdynamicOSM_r11.svgに置き換えています。
    • dynamicOSM_r11.svgはjavascriptコードが紐付けられた動的なコンテンツ(WebAppLayer)になっています。本章ではその内容は割愛し、実用的なレイヤリングを実践してみます。
      • Note: 動的なコンテンツの詳細はWebApp Layer編で解説されています。

[編集] チュートリアル3 タイリングされた海岸線地図の表示

チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。

実際の動作はこちらをクリック。

[編集] 解説

[編集] あらすじ

[編集] チュートリアル3b タイリング (svgMapToolsを用いた静的タイルの作成)

前章ではすでに作成済みのタイルを用いていましたが、ここではsvgMapToolsを用いて、shapefileからタイルデータを作成し表示してみます。

実際の動作はこちらをクリック。

[編集] 解説

[編集] あらすじ

[編集] チュートリアル4 Bitmapイメージ地図表示

チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。

実際の動作はこちらをクリック。

[編集] 解説

[編集] あらすじ

  • ファイル構成はtutrial4ディレクトリに以下のファイルがあります。
    • tutorial4.html
      • チュートリアル4用のhtml。tutrial1.htmlと同様の内容。
    • Container.svg
      • チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む
    • dynamicOSM_r11.svg
      • チュートリアル2cと同様のOpenStreetMapレイヤー

[編集] WebApp Layer編

SVGMapでは、レイヤーとして 単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションを紐付けることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に制御・変更できるWebApp Layer機構を用いることができるという特徴があります。(Web Applicationとは)

この機構は他のレイヤーには基本的に影響を与えないため(カプセル化)、アプリケーションのスパゲッティ化を抑制できます。

WebApp Layer編はこの機能を使うWebAppをコーディングします。 ただし、サーバ側には基本編と同様に動的な仕組みの構築は不要です。(依然としてサーバには静的なコンテンツ・WebAppのファイル(htmlやjs)を設置するだけで、DBMSや動的な機構(ウェブサービス)をサーバ上に構築しません。)

なお、SVGMap.jsはWMSやWFSのような動的に地図・地理情報を配信する仕組みやDBMSを用いた動的なサーバ(ウェブサービス)を接続して動作させることも可能です。ウェブサービス結合編を参照ください。

[編集] チュートリアル5 WebApp Layer タイルピラミッド

OpenStreetMapのタイルピラミッドを用いて、伸縮・スクロールに応じ適切な地図を表示(Level of Detail)するレイヤーを、SVGMapのWebApp Layer機構によって構成するチュートリアルです。

実際の動作は、こちらをクリック。


[編集] 解説

[編集] あらすじ

  • ファイル構成はtutorial5ディレクトリに以下のファイルがあります。
    • tutorial5.html
      • チュートリアル5用のhtml。tutrial2b.htmlと同様の内容。
    • Container.svg
      • 外部のOpenStreetMapを表示するためのdynamicOSM_r11.svgを読み込む。
    • dynamicOSM_r11.svg
      • 外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している)
    • dynamicOSM_r11.html
      • 上記dynamicOSM_r11.svgに紐づいたウェブアプリケーションのhtml
    • dynamicOSM_r11.js
      • 上記dynamicOSM_r11.svgに紐づいたウェブアプリケーションのjavascriptコード

[編集] チュートリアル6 WebApp Layer geoJSON

webAppで非同期読み込みによりGeoJSONデータを読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。

実際の動作は、geojson1.html をクリック。

[編集] 解説

[編集] あらすじ

  • tutorial6ディレクトリ
  • geojson1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
  • Container.svg: クリッカブルなレイヤリングの設定
  • geoJsonExample1.svg: UIを持ったレイヤーを操作するwebAppを指定する方法
  • geoJsonExample1.html:
  • geoJsonExample1.js: svgMapGIStoolによるGeoJsonデータのSVGMapコンテンツ化

[編集] チュートリアル7 WebApp Layer ベクトルタイル

webAppで非同期読み込みによりタイル分割されたCSVのPointジオメトリファイルを読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。

実際の動作は、tiling1.html をクリック。

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • tiling1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
  • Container.svg: クリッカブルなレイヤリングの設定 (チュートリアル6とほぼ同じ)
  • simpleTiling.svg: UIを持ったレイヤーを操作するwebApp チュートリアル6とほぼ同じ
  • simpleTiling.html:
  • simpleTiling.js:
    • GeoJsonを読む点はチュートリアル6と同様
    • 表示領域に応じてGeoJsonを動的に読み込む
      • 小縮尺(広いエリア)表示のとき、読み込むタイルが多くなりすぎる場合は読み込みをやめ表示させない

[編集] チュートリアル8 WebApp Layer メッシュデータ

webAppで非同期読み込みにより、2次元配列形式のメッシュデータ(グリッドデータ、ラスターデータなどとも呼ばれます)のCSVファイルを読み込み、SVGMapコンテンツのDOMに変換し表示するチュートリアルです。

実際の動作は、mesh1.html をクリック。

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • このチュートリアルで扱うメッシュデータの形式を決める
  • Container.svg: クリッカブルなレイヤーを指定
  • ArrayMesh.svg: webAppが紐付けられたレイヤー
  • ArrayMesh.html:
  • ArrayMesh.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。

[編集] チュートリアル9 WebApp Layer メッシュタイル (タイル分割されたメッシュデータ)

webAppで非同期読み込みにより、タイル分割されたメッシュデータを表示するチュートリアルです。読み込むメッシュデータは地域基準メッシュをベースとしたGridded XYZデータとし、小縮尺データおよび大縮尺データを用意して簡単なタイルピラミッドを構成し、Level of Detailを実装しています。

可視化に用いるサンプルデータは統計局が公開する3次メッシュの自治体コードデータです。

実際の動作は、mesh2.html をクリック。

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • このチュートリアルで扱うメッシュデータの形式
  • Container.svg: クリッカブルなレイヤーを指定
  • meshTileViewer.svg: webAppが紐付けられたレイヤー、webAppsは隠れた状態で起動
  • meshTileViewer.html:
  • meshTileViewer.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。

[編集] チュートリアル9b WebApp Layer メッシュタイル カスタムダイアログ

チュートリアル9の内容に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしています。

実際の動作は、mesh2b.html をクリック。

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • meshTileViewerB.html: レイヤーに紐付けられたwebApp。チュートリアル9の内容に加え、オブジェクトをクリックしたときに起動するコールバック関数を設定し、ダイアログをカスタマイズしています。

[編集] チュートリアル10 WebApp Layer メッシュデータのビットイメージ化

メッシュデータ(グリッドデータ)はラスターデータとも呼ばれるように、Webコンテンツとして使われるビットイメージデータとほぼ同等です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。

実際の動作は、mesh3.html をクリック。

[編集] 解説

[編集] あらすじ

[編集] チュートリアル11 WebApp Layer 地図を使った位置指定UI

チュートリアル10をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。

実際の動作は、mesh3b.html をクリック。

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • バイリニア補完によるメッシュデータを利用した任意位置の値の計算
  • 地図上の任意の点を指定して、その位置のジオイド高を表示

[編集] ウェブサービス結合編

SVGMap.jsは高度で柔軟なタイリング機構によりJamstackのパターンを幅広く活用できるため、サーバのオーバヘッドが大きい動的なウェブサービスが必要なケースを従来のフレームワークと比べて大幅に減らすことができます。(参考:SVGMapToolsを使ったチュートリアルQuad Tree Composite Tiling and the standardization of tiling

それでも動的なサービスの結合が必要なことは多くあるため、ここではその方法を既存の公開ウェブサービスを利用したwebAppレイヤーとして実装してみます。(依ってこのチュートリアルでは動的なサービスの利用に留まり、動的なサービス側を構築することには踏み込みません。GeoServer, MapServer, PostgREST + PostGIS 等はその実装に利用できるでしょう。SVGMap.orgでも redisSvgMapという 高性能な動的サービスを構築するためのコードを公開しています。)

サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション(Layers as WebApps)として構成される(疎結合である)ことから、このパターンは地図に適用したコンポジットUIタイプのマイクロサービスの一種といえるでしょう。

[編集] Note:クロスオリジンアクセス

外部のウェブサービスを結合する場合、外部サービスによってはクロスオリジンアクセスとなることを理解し対処する必要があります。こちらに情報を掲載しましたので参照ください。


[編集] チュートリアル12 WMSの利用

指定したパラーメータに従ってビットイメージの地図データを出力するウェブサービス仕様Web Map Service (WMS)のサービスをSVGMapのレイヤーとして表示させてみます。

GEBCO Web Service(海底を含む全球地形図)を使ってみます。

まずは伸縮スクロールとは関係なく、地図コンテンツを単に表示させてみます。これはチュートリアル4と行っていることは基本的に同じです。WMSのスペックに従ってURLのクエリパートを設定するだけです。

実際の動作は、wms1.html をクリック。(Note: WMSが地図を生成配信するまでに少々時間がかかります)

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • WMSのパラメータとSVGMapコンテンツのビットイメージ配置のパラメータの関係を理解します
  • image要素によって、WMSから取得したデータを配置します

[編集] チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示

WebApp Layer機構を用いれば、ウェブサービスに接続し表示領域に応じた地図コンテンツを動的に表示することができます。チュートリアル12と同じGEBCO Web Serviceを使ってみます。

実際の動作は、wms2.html をクリック。(Note: WMSが地図を生成配信するまでに少々時間がかかります)

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • 表示領域のパラメータを伸縮スクロールの度に取得します。
  • このパラメータを用いて、WMSへのクエリURLを構築します。
  • image要素によって、WMSから取得したデータを配置します
  • 1ステップ前のimage要素は消去します。

[編集] チュートリアル14 WebApp Layer ベクトル地理情報サービスの結合

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、世界の地震発生状況データ(GeoJSON版)を結合してみます。

動的なサービスと接続してはいますが、基本的にはチュートリアル6との違いはありません。

実際の動作は、geojson2.html をクリック。

[編集] 解説

[編集] あらすじ

チュートリアル6に対し、以下が相違点です。

[編集] チュートリアル15 WebApp Layer 伸縮スクロールに応じたベクトル地理情報サービス結合

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。前章と異なり、伸縮スクロールする度にその表示領域に応じたデータをサービスから取得して表示します。

ここではNatural Resources Canadaが提供している、Geoname Service API(カナダの地名データサービス)を結合してみます。

実際の動作は、vectorService1.html をクリック。(Note: サービスがデータを生成配信するまでに少々時間がかかります)

[編集] 解説

[編集] あらすじ

  • ソースコードのディレクトリ
  • 表示領域のパラメータを伸縮スクロールの度に取得します。
  • このパラメータを用いて、仕様に基づきサービスへのクエリURLを構築、CSVを取得します。
  • ポイントデータをSVGのuse要素として可視化します。
  • 1ステップ前のデータは消去します。
個人用ツール
名前空間

変種
操作
案内
ツール
Translate