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

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

実際の動作はこちらをクリック。
使用ファイルのZIPアーカイブファイル

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

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

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

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

[編集] svgMapToolsの設定

svgMapToolsの設定を含むチュートリアルを実施

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

地球地図日本サイトから、全レイヤの入ったzipファイルをダウンロードして解凍

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

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

チュートリアル2bのContainer.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 ...

@@ 1行: / 1行: @@
-= チュートリアル3b SVGMapToolsを用いたタイル作成とその表示 =
+= チュートリアル3b svgMapToolsを用いたタイル作成とその表示 =
-'''工事中'''
+* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip ZIPアーカイブファイル]
-実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3b/tutorial4b.html こちら]をクリック。
 == タイリングされたコンテンツの準備 ==
-* svgMapToolsの設定と基本理解
+* この章では、[https://github.com/svgmap/svgMapTools/ svgMapTools]を用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
-** この章では、[https://github.com/svgmap/svgMapTools/ svgMapTools]を用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
 そのため、svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアルを先ず実施]してください。
-* shapefile形式のデータの取得
+* 本チュートリアルでは、[https://www.gsi.go.jp/kankyochiri/gm_jpn.html 国土地理院の地球地図]　日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。
-** 本チュートリアルでは、[https://www.gsi.go.jp/kankyochiri/gm_jpn.html 国土地理院の地球地図]　日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。
+** 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを　それぞれレイヤーとして表示してみます。
+=== svgMapToolsの設定===
+* svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアル]を実施
+===ソースデータのダウンロード===
+* [https://www.gsi.go.jp/kankyochiri/gm_jpn.html 地球地図日本サイト]から、[https://www1.gsi.go.jp/geowww/globalmap-gsi/download/data/gm-japan/gm-jpn-all_u_2_2.zip 全レイヤの入ったzipファイル]をダウンロードして解凍
+===データを変換してコンテンツを保存===
+Shapefileから、SVGMapのタイリングされたコンテンツを生成します。
+以下はWindowsで実行した例です。
+* <code>cd [PATH_TO_DATA]</code>
+* <code>mkdir roadl</code>
+* <code>mkdir coastl</code>
+* <code>mkdir builtup</code>
+* <code>cd [PATH_TO_TOOLS]</code>
+* <code>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 </code>
+* <code>Shape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2</code>
+* <code>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</code>
+* <code>Shape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2</code>
+* <code>Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svg</code>
+* <code>Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupp_jpn.shp [PATH_TO_DATA]\builtup\builtupp_jpn.svg</code>
+* [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]]で使用した[[チュートリアル2b#tutorial2b.html|tutorial2b.htmlと同様です。
+基本的に、[[チュートリアル2b]]で使用した[[チュートリアル2b#tutorial2b.html|tutorial2b.html]]と同様です。
 == Container.svg ==
-チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む。
+* [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。
+* ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。
+* 各レイヤーを表す'''animation'''要素の参照先は、svgMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。
+* ベクトルデータをクリッカブルにするために、'''class'''属性に、'''clickable'''を加えています。
+* 加えて、OpenStreetMapも非表示状態のレイヤーとして一番下に追加してあります。
 <PRE>
@@ 25行: / 57行: @@
   <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />
-<!-- 日本の海岸線データのSVGファイルを表示状態として読み込む -->
+<!-- 背景地図 OpenStreetMap (非表示状態)-->
-<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" visibility="visible"/>
+<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="hidden"/>
-<!-- ビットマップイメージのSVGファイルを表示状態として読み込む -->
-<animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible"/>
-</svg>
+<!-- 地球地図日本 海岸線-->
-</PRE>
+<animation xlink:href="coastl/coastl_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="海岸線" class="地球地図日本 clickable" visibility="visible"/>
-== Coastline.svg ==
+<!-- 地球地図日本 道路線-->
-*チュートリアル1と同じ日本の海岸線データ。
+<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"/>
-== bitmapImage.svg ==
-*重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
-*ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。
-===経度緯度とSVGコンテンツのXY座標との関係===
-<code>globalCoordinateSystem</code>要素の<code>transform</code>属性（一次変換マトリクスの６つの値）で指定されます
- Xsvg = a * 経度 + c * 緯度 + e
- Ysvg = b * 緯度 + d * 緯度 + f
-一次変換マトリクスa,b,c,d,e,fの値がそれぞれ1,0,0,-1,0,0であることから、
- Xsvg = 経度
- Ysvg = -緯度
-===image要素のパラメータ===
-*image要素によってビットイメージを配置しています
-**<code>xlink:href="[ビットイメージのURL]"</code> 配置するビットイメージのURL
-**<code>x="139.1063918412553"</code> 配置するX原点＝西端の経度（139.10..°）
-**<code>y="-35.90355823638255"</code> 配置するX原点＝北端の緯度（35.903..°）をマイナスにした値
-**<code>width="0.8140711890480361"</code> 幅（経度で0.81°）
-**<code>height="0.41815015611484085"</code> 高さ (緯度で0.41°）
-**<code>preserveAspectRatio="none"</code> ビットイメージの実際のサイズのアスペクト比を変えてでも上記指定領域にぴったりと配置する　（[https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute 参考：SVG spec]）
-<PRE>
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- viewBox="139.1063918412553,-35.90355823638255,0.8140711890480361,0.41815015611484085" about="root">
- <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/>
- <image xlink:href="http://www.toshiseibi.metro.tokyo.jp/bosai/chousa_6/parts/kikendo_map.jpg"
-   x="139.1063918412553"
-   y="-35.90355823638255"
-   width="0.8140711890480361"
-   height="0.41815015611484085"
-   preserveAspectRatio="none"
-   opacity="0.5" />
+<!-- 地球地図日本 市街地(点)-->
+<animation xlink:href="builtup/builtupp_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="市街地(点)" class="地球地図日本 clickable" visibility="visible"/>
 </svg>
 </PRE>
+== svgMapToolsが生成するタイリングされたコンテンツの構造 ==
+* レイヤーのルートとなるコンテンツ(この例では海岸線データで、coastl_jpn.svg)から、階層的に全てのベクトルデータ(.svg形式～大縮尺表示用)とラスターデータ(.png形式～小縮尺表示用)が参照されています。
+* .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 ...

チュートリアル3b

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

目次

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

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

[編集] svgMapToolsの設定

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

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

[編集] tutorial3b.html

[編集] Container.svg

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

個人用ツール

名前空間

変種

表示

操作

検索

案内

ツール

Translate