チュートリアル3b

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(Container.svg)
(チュートリアル3b svgMapToolsを用いたタイル作成とその表示)
 
(1人の利用者による、間の22版が非表示)
1行: 1行:
= チュートリアル3b SVGMapToolsを用いたタイル作成とその表示 =
+
= チュートリアル3b svgMapToolsを用いたタイル作成とその表示 =
  
実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
+
* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
 +
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip ZIPアーカイブファイル]
  
 
== タイリングされたコンテンツの準備 ==
 
== タイリングされたコンテンツの準備 ==
10行: 11行:
 
** 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを それぞれレイヤーとして表示してみます。
 
** 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを それぞれレイヤーとして表示してみます。
  
=== SVGMapToolsの設定===
+
=== svgMapToolsの設定===
 
* svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアル]を実施
 
* svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアル]を実施
  
36行: 37行:
  
 
Note:
 
Note:
*[PATH_TO_TOOLS]はSVGMapToolsのtoolsディレクトリ
+
*[PATH_TO_TOOLS]はsvgMapToolsのtoolsディレクトリ
 
*[PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ
 
*[PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ
 
*builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。(タイリングも実際には不要です)
 
*builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。(タイリングも実際には不要です)
47行: 48行:
 
* [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。
 
* [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。
 
* ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。
 
* ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。
* 各レイヤーを現すanimation要素の参照先は、SVGMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。
+
* 各レイヤーを表す'''animation'''要素の参照先は、svgMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。
 +
* ベクトルデータをクリッカブルにするために、'''class'''属性に、'''clickable'''を加えています。
 +
* 加えて、OpenStreetMapも非表示状態のレイヤーとして一番下に追加してあります。
  
 
<PRE>
 
<PRE>
53行: 56行:
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 
  <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />
 
  <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />
 +
 +
<!-- 背景地図 OpenStreetMap (非表示状態)-->
 +
<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="hidden"/>
  
 
<!-- 地球地図日本 海岸線-->
 
<!-- 地球地図日本 海岸線-->
68行: 74行:
 
</PRE>
 
</PRE>
  
== Coastline.svg ==
+
== svgMapToolsが生成するタイリングされたコンテンツの構造 ==
 
+
* レイヤーのルートとなるコンテンツ(この例では海岸線データで、coastl_jpn.svg)から、階層的に全てのベクトルデータ(.svg形式~大縮尺表示用)とラスターデータ(.png形式~小縮尺表示用)が参照されています。
== bitmapImage.svg ==
+
* .svg形式のデータのうち、ファイル名が*cont*のものはベクトルグラフィックスデータはなく参照データだけとなっており、子・孫のコンテンツが参照されています。
 +
<pre>
 +
coastl_jpn.svg
 +
|
 +
+-coastl_jpn/lvl3/tile1_0.png
 +
+-coastl_jpn/lvl3/tile0_1.png
 +
+-coastl_jpn/lvl3/tile1_1.png
 +
|
 +
+-coastl_jpn/lvl4/tile1_2.png
 +
+-coastl_jpn/lvl4/tile2_2.png
 +
+-coastl_jpn/lvl4/tile2_3.png
 +
|
 +
+-coastl_jpn_l1_2-3.svg
 +
|
 +
+-coastl_jpn_cont_l1_1-2.svg
 +
|  |
 +
|  +-coastl_jpn/lvl5/tile3_4.png
 +
|  +-*.png ...
 +
|  +-coastl_jpn_l2_2-5.svg
 +
|  +-*.svg ...
 +
|  +-coastl_jpn_cont_l4_14-20.svg
 +
|    |
 +
|    +-*.png ...
 +
|    +-*.svg ...
 +
|
 +
+-coastl_jpn_cont_l1_2-2.svg
 +
    |
 +
    +-*.png ...
 +
    +-*.svg ...

2023年6月23日 (金) 14:12時点における最新版

目次

[編集] チュートリアル3b svgMapToolsを用いたタイル作成とその表示

[編集] タイリングされたコンテンツの準備

  • この章では、svgMapToolsを用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。

そのため、svgMapToolsの設定を含むチュートリアルを先ず実施してください。

  • 本チュートリアルでは、国土地理院の地球地図 日本のデータ(ファイル形式:shapefile、ベクトル地理データ)を表示してみます。
    • 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを それぞれレイヤーとして表示してみます。

[編集] svgMapToolsの設定

[編集] ソースデータのダウンロード

[編集] データを変換してコンテンツを保存

Shapefileから、SVGMapのタイリングされたコンテンツを生成します。

以下はWindowsで実行した例です。

  • cd [PATH_TO_DATA]
  • mkdir roadl
  • mkdir coastl
  • mkdir builtup
  • cd [PATH_TO_TOOLS]
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#000000" [PATH_TO_DATA]\coastl_jpn.shp [PATH_TO_DATA]\coastl\coastl_jpn.svg
  • Shape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#00ff00" [PATH_TO_DATA]\roadl_jpn.shp [PATH_TO_DATA]\roadl\roadl_jpn.svg
  • Shape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svg
  • Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupp_jpn.shp [PATH_TO_DATA]\builtup\builtupp_jpn.svg
  • [PATH_TO_DATA]\coastl, [PATH_TO_DATA]\roadl, [PATH_TO_DATA]\builtupの内容を、全てホストに転送

Note:

  • [PATH_TO_TOOLS]はsvgMapToolsのtoolsディレクトリ
  • [PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ
  • builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。(タイリングも実際には不要です)

[編集] tutorial3b.html

基本的に、チュートリアル2bで使用したtutorial2b.htmlと同様です。

[編集] Container.svg

  • チュートリアル2bContainer.svgと基本的に違いはありません。
  • ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。
  • 各レイヤーを表すanimation要素の参照先は、svgMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。
  • ベクトルデータをクリッカブルにするために、class属性に、clickableを加えています。
  • 加えて、OpenStreetMapも非表示状態のレイヤーとして一番下に追加してあります。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />

<!-- 背景地図 OpenStreetMap (非表示状態)-->
<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="hidden"/>

<!-- 地球地図日本 海岸線-->
<animation xlink:href="coastl/coastl_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="海岸線" class="地球地図日本 clickable" visibility="visible"/>

<!-- 地球地図日本 道路線-->
<animation xlink:href="roadl/roadl_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="道路" class="地球地図日本 clickable" visibility="visible"/>

<!-- 地球地図日本 市街地(面)-->
<animation xlink:href="builtup/builtupa_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="市街地(面)" class="地球地図日本 clickable" visibility="visible"/>

<!-- 地球地図日本 市街地(点)-->
<animation xlink:href="builtup/builtupp_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="市街地(点)" class="地球地図日本 clickable" visibility="visible"/>
</svg>

[編集] svgMapToolsが生成するタイリングされたコンテンツの構造

  • レイヤーのルートとなるコンテンツ(この例では海岸線データで、coastl_jpn.svg)から、階層的に全てのベクトルデータ(.svg形式~大縮尺表示用)とラスターデータ(.png形式~小縮尺表示用)が参照されています。
  • .svg形式のデータのうち、ファイル名が*cont*のものはベクトルグラフィックスデータはなく参照データだけとなっており、子・孫のコンテンツが参照されています。
coastl_jpn.svg
 |
 +-coastl_jpn/lvl3/tile1_0.png
 +-coastl_jpn/lvl3/tile0_1.png
 +-coastl_jpn/lvl3/tile1_1.png
 |
 +-coastl_jpn/lvl4/tile1_2.png
 +-coastl_jpn/lvl4/tile2_2.png
 +-coastl_jpn/lvl4/tile2_3.png
 |
 +-coastl_jpn_l1_2-3.svg
 |
 +-coastl_jpn_cont_l1_1-2.svg
 |  |
 |  +-coastl_jpn/lvl5/tile3_4.png
 |  +-*.png ...
 |  +-coastl_jpn_l2_2-5.svg
 |  +-*.svg ...
 |  +-coastl_jpn_cont_l4_14-20.svg
 |     |
 |     +-*.png ...
 |     +-*.svg ...
 |
 +-coastl_jpn_cont_l1_2-2.svg
    |
    +-*.png ...
    +-*.svg ...
個人用ツール
名前空間

変種
操作
案内
ツール
Translate