チュートリアル

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(あらすじ)
(あらすじ)
 
(1人の利用者による、間の43版が非表示)
5行: 5行:
  
 
*チュートリアルプログラムのディレクトリ構成。
 
*チュートリアルプログラムのディレクトリ構成。
** 各チュートリアル1~Nのディレクトリ下の内容を丸ごとコピーすれば、そのチュートリアルでつくられるコンテンツが動作するようになっています。
+
* 各チュートリアル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|チュートリアルで使うファイルのダウンロード方法]]
 
   
 
   
 
<pre>
 
<pre>
35行: 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|チュートリアルで使うファイルのダウンロード方法]]を解説します。
 
**[https://www.svgmap.org/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を利用可能にする。
61行: 62行:
 
====あらすじ====
 
====あらすじ====
  
*ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2 tutorial2ディレクトリ]に以下のファイルがあります。
 
**[https://www.svgmap.org/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と同様の内容。
84行: 85行:
 
====あらすじ====
 
====あらすじ====
  
*ファイル構成はtutrial2bディレクトリに以下のファイルがあります。
+
*ファイル構成は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/ tutorial2bディレクトリ]に以下のファイルがあります。
 
**[https://www.svgmap.org/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要素)
186行: 187行:
 
この機構は他のレイヤーには基本的に影響を与えないため([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 スパゲッティ化]を抑制できます。
 
この機構は他のレイヤーには基本的に影響を与えないため([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をコーディングします。 ただし、サーバ側には基本編と同様に動的な仕組みは構築しません。(サーバにはコンテンツ・ファイルを設置するだけで、DBMSや動的な機構([https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 ウェブサービス])は構築しません。)
+
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|ウェブサービス結合編]]を参照ください。
 
なお、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|ウェブサービス結合編]]を参照ください。
209行: 210行:
 
***外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している)
 
***外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している)
 
**[https://www.svgmap.org/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==
220行: 223行:
  
 
====あらすじ====
 
====あらすじ====
 +
*[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/ tutorial6ディレクトリ]
 
*geojson1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
 
*geojson1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
 
*Container.svg: クリッカブルなレイヤリングの設定
 
*Container.svg: クリッカブルなレイヤリングの設定
 
*geoJsonExample1.svg: UIを持ったレイヤーを操作するwebAppを指定する方法
 
*geoJsonExample1.svg: UIを持ったレイヤーを操作するwebAppを指定する方法
*geoJsonExample1.html: svgMapGIStoolによるGeoJsonデータのSVGMapコンテンツ化
+
*geoJsonExample1.html:
 +
*geoJsonExample1.js: svgMapGIStoolによるGeoJsonデータのSVGMapコンテンツ化
  
 
== チュートリアル7 WebApp Layer ベクトルタイル==
 
== チュートリアル7 WebApp Layer ベクトルタイル==
234行: 239行:
  
 
====あらすじ====
 
====あらすじ====
 +
*[https://svgmap.org/devinfo/devkddi/tutorials/tiling1/ ソースコードのディレクトリ]
 
*tiling1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
 
*tiling1.html: 周辺ライブラリ(SVGMapGIS)の読み込み
 
*Container.svg: クリッカブルなレイヤリングの設定 ([[チュートリアル6]]とほぼ同じ)
 
*Container.svg: クリッカブルなレイヤリングの設定 ([[チュートリアル6]]とほぼ同じ)
 
*simpleTiling.svg: UIを持ったレイヤーを操作するwebApp [[チュートリアル6]]とほぼ同じ
 
*simpleTiling.svg: UIを持ったレイヤーを操作するwebApp [[チュートリアル6]]とほぼ同じ
 
*simpleTiling.html:  
 
*simpleTiling.html:  
 +
*simpleTiling.js:
 
**GeoJsonを読む点は[[チュートリアル6]]と同様
 
**GeoJsonを読む点は[[チュートリアル6]]と同様
 
**表示領域に応じてGeoJsonを動的に読み込む
 
**表示領域に応じてGeoJsonを動的に読み込む
251行: 258行:
  
 
====あらすじ====
 
====あらすじ====
*このチュートリアルで扱うメッシュデータの形式
+
*[https://svgmap.org/devinfo/devkddi/tutorials/mesh1/ ソースコードのディレクトリ]
 +
*このチュートリアルで扱うメッシュデータの形式を決める
 
*Container.svg: クリッカブルなレイヤーを指定
 
*Container.svg: クリッカブルなレイヤーを指定
 
*ArrayMesh.svg: webAppが紐付けられたレイヤー
 
*ArrayMesh.svg: webAppが紐付けられたレイヤー
*ArrayMesh.html: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
+
*ArrayMesh.html:
 
+
*ArrayMesh.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
  
 
== チュートリアル9 WebApp Layer メッシュタイル (タイル分割されたメッシュデータ)==
 
== チュートリアル9 WebApp Layer メッシュタイル (タイル分割されたメッシュデータ)==
269行: 277行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh2/ ソースコードのディレクトリ]
 
*このチュートリアルで扱うメッシュデータの形式
 
*このチュートリアルで扱うメッシュデータの形式
 
*Container.svg: クリッカブルなレイヤーを指定
 
*Container.svg: クリッカブルなレイヤーを指定
 
*meshTileViewer.svg: webAppが紐付けられたレイヤー、webAppsは隠れた状態で起動
 
*meshTileViewer.svg: webAppが紐付けられたレイヤー、webAppsは隠れた状態で起動
*meshTileViewer.html: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
+
*meshTileViewer.html:
 +
*meshTileViewer.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
  
 
== チュートリアル9b WebApp Layer メッシュタイル カスタムダイアログ==
 
== チュートリアル9b WebApp Layer メッシュタイル カスタムダイアログ==
283行: 293行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/ ソースコードのディレクトリ]
 
*meshTileViewerB.html: レイヤーに紐付けられたwebApp。チュートリアル9の内容に加え、オブジェクトをクリックしたときに起動するコールバック関数を設定し、ダイアログをカスタマイズしています。
 
*meshTileViewerB.html: レイヤーに紐付けられたwebApp。チュートリアル9の内容に加え、オブジェクトをクリックしたときに起動するコールバック関数を設定し、ダイアログをカスタマイズしています。
 
  
 
== チュートリアル10 WebApp Layer メッシュデータのビットイメージ化==
 
== チュートリアル10 WebApp Layer メッシュデータのビットイメージ化==
295行: 305行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh3/ ソースコードのディレクトリ]
 
*地理院が公開する[https://fgd.gsi.go.jp/download/geoid.php ジオイド高データ](TEXTデータ)をfetchAPIで読み込み変数(Object)に保持する
 
*地理院が公開する[https://fgd.gsi.go.jp/download/geoid.php ジオイド高データ](TEXTデータ)をfetchAPIで読み込み変数(Object)に保持する
 
*canvas要素のAPIを用いてビットイメージを構築
 
*canvas要素のAPIを用いてビットイメージを構築
308行: 319行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/ ソースコードのディレクトリ]
 
*バイリニア補完によるメッシュデータを利用した任意位置の値の計算
 
*バイリニア補完によるメッシュデータを利用した任意位置の値の計算
 
*地図上の任意の点を指定して、その位置のジオイド高を表示
 
*地図上の任意の点を指定して、その位置のジオイド高を表示
314行: 326行:
 
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])
 
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])
  
それでも動的なサービスの結合が必要なケースは多くあるため、ここではその方法を既存の公開ウェブサービスを利用して実装してみます。(依ってこのチュートリアルでは動的なサービス側を構築することには踏み込みません。[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]という 高性能な動的サービスを構築するためのコードを公開しています。)
+
それでも動的なサービスの結合が必要なことは多くあるため、ここではその方法を既存の公開ウェブサービスを利用した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:クロスオリジンアクセス===
 +
外部のウェブサービスを結合する場合、外部サービスによってはクロスオリジンアクセスとなることを理解し対処する必要があります。'''[[クロスオリジンアクセス|こちらに情報を掲載]]'''しましたので参照ください。
  
サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション([[解説書#ウェブアプリケーションによる動的な地図レイヤーと、そのハイパーレイヤリング|Layers as WebApps]])として構成される(疎結合である)ことから、このパターンは地図に適用した一種の[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 マイクロサービス]ということができるでしょう。
 
  
 
== チュートリアル12 WMSの利用==
 
== チュートリアル12 WMSの利用==
331行: 347行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/wms1/ ソースコードのディレクトリ]
 
*WMSのパラメータとSVGMapコンテンツのビットイメージ配置のパラメータの関係を理解します
 
*WMSのパラメータとSVGMapコンテンツのビットイメージ配置のパラメータの関係を理解します
 
*image要素によって、WMSから取得したデータを配置します
 
*image要素によって、WMSから取得したデータを配置します
343行: 360行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [https://svgmap.org/devinfo/devkddi/tutorials/wms2/ ソースコードのディレクトリ]
 
*表示領域のパラメータを伸縮スクロールの度に取得します。
 
*表示領域のパラメータを伸縮スクロールの度に取得します。
 
*このパラメータを用いて、WMSへのクエリURLを構築します。
 
*このパラメータを用いて、WMSへのクエリURLを構築します。
361行: 379行:
 
====あらすじ====
 
====あらすじ====
 
[[#.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]]に対し、以下が相違点です。
 
[[#.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:  
 
*geoJsonExample2.html:  
 
**[https://earthquake.usgs.gov/earthquakes/feed/ USGS Earthquake Hazards Program Feed]の仕様に基づいたGeoJsonリクエスト用URLの生成とそのためのUI
 
**[https://earthquake.usgs.gov/earthquakes/feed/ USGS Earthquake Hazards Program Feed]の仕様に基づいたGeoJsonリクエスト用URLの生成とそのためのUI
378行: 397行:
  
 
====あらすじ====
 
====あらすじ====
 +
* [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を取得します。
 
*このパラメータを用いて、[https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249 仕様に]基づきサービスへのクエリURLを構築、CSVを取得します。
 
*ポイントデータをSVGのuse要素として可視化します。
 
*ポイントデータをSVGのuse要素として可視化します。
 
*1ステップ前のデータは消去します。
 
*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