チュートリアル3b
提供: svg2wiki
(版間での差分)
(→データを変換) |
(→Container.svg) |
||
| 40行: | 40行: | ||
== Container.svg == | == Container.svg == | ||
| − | + | * [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。 | |
| + | * ただし、今回は海岸線レイヤー、および道路レイヤーとも、タイリングされたデータになっています。 | ||
<PRE> | <PRE> | ||
| 47行: | 48行: | ||
<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)" /> | ||
| − | <!-- | + | <!-- 地球地図日本 海岸線--> |
| − | <animation xlink:href=" | + | <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"/> | ||
</svg> | </svg> | ||
</PRE> | </PRE> | ||
2023年4月11日 (火) 10:23時点における版
目次 |
チュートリアル3b SVGMapToolsを用いたタイル作成とその表示
実際の動作はこちらをクリック。
タイリングされたコンテンツの準備
- この章では、svgMapToolsを用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
そのため、svgMapToolsの設定を含むチュートリアルを先ず実施してください。
- 本チュートリアルでは、国土地理院の地球地図 日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。
SVGMapToolsの設定
- svgMapToolsの設定を含むチュートリアルを実施
ソースデータのダウンロード
- 地球地図日本サイトから、全レイヤの入ったzipファイルをダウンロードして解凍
データを変換してコンテンツを保存
Shapefileから、SVGMapのタイリングされたコンテンツを生成します。
以下はWindowsで実行した例です。
-
cd [PATH_TO_DATA] -
mkdir roadl -
mkdir coastl -
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
- [PATH_TO_DATA]\coastl 及び [PATH_TO_DATA]\roadl の内容を、全てホストに転送
Note:
- [PATH_TO_DATA]をダウンロードしたデータを解凍したディレクトリ
- [PATH_TO_TOOLS]はSVGMapToolsのtoolsディレクトリ
tutorial3b.html
基本的に、チュートリアル2bで使用したtutorial2b.htmlと同様です。
Container.svg
- チュートリアル2bのContainer.svgと基本的に違いはありません。
- ただし、今回は海岸線レイヤー、および道路レイヤーとも、タイリングされたデータになっています。
<?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"/> </svg>
