2023年4月11日 (火) 11:38時点における版

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

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

タイリングされたコンテンツの準備

この章では、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を加えています。

<?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)" />

<!-- 地球地図日本 海岸線-->
<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
 |  |
 |  +-*.png
 |  +-*.svg
 |  +-coastl_jpn_cont_l4_14-20.svg
 |     |
 |     +-
 |     +-
 |
 +-coastl_jpn_cont_l1_2-2.svg
 |  |
 |  +-*.png
 |  +-*.svg

チュートリアル3b