チュートリアル3b
提供: svg2wiki
(版間での差分)
(→Coastline.svg) |
(→タイリングされたコンテンツの準備) |
||
| 7行: | 7行: | ||
== タイリングされたコンテンツの準備 == | == タイリングされたコンテンツの準備 == | ||
| − | + | * この章では、[https://github.com/svgmap/svgMapTools/ svgMapTools]を用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。 | |
| − | + | ||
そのため、svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアルを先ず実施]してください。 | そのため、svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアルを先ず実施]してください。 | ||
| − | + | * 本チュートリアルでは、[https://www.gsi.go.jp/kankyochiri/gm_jpn.html 国土地理院の地球地図] 日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。 | |
| − | + | ||
| + | === 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ファイル]をダウンロードして解凍 | ||
| + | |||
| + | ===データを変換=== | ||
== tutorial3b.html == | == tutorial3b.html == | ||
2023年4月11日 (火) 09:43時点における版
目次 |
チュートリアル3b SVGMapToolsを用いたタイル作成とその表示
工事中
実際の動作はこちらをクリック。
タイリングされたコンテンツの準備
- この章では、svgMapToolsを用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
そのため、svgMapToolsの設定を含むチュートリアルを先ず実施してください。
- 本チュートリアルでは、国土地理院の地球地図 日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。
SVGMapToolsの設定
- svgMapToolsの設定を含むチュートリアルを実施
ソースデータのダウンロード
- 地球地図日本サイトから、全レイヤの入ったzipファイルをダウンロードして解凍
データを変換
tutorial3b.html
基本的に、チュートリアル2bで使用したtutorial2b.htmlと同様です。
Container.svg
チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.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)" /> <!-- 日本の海岸線データのSVGファイルを表示状態として読み込む --> <animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" visibility="visible"/> <!-- ビットマップイメージのSVGファイルを表示状態として読み込む --> <animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible"/> </svg>
