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

工事中

実際の動作はこちらをクリック。

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

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

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

shapefile形式のデータの取得
- 本チュートリアルでは、国土地理院の地球地図　日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。

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>

Coastline.svg

チュートリアル1と同じ日本の海岸線データ。

ソースコードは省略

bitmapImage.svg

重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
ビットマップイメージSVGについては、こちらを参照。

経度緯度とSVGコンテンツのXY座標との関係

globalCoordinateSystem要素のtransform属性（一次変換マトリクスの６つの値）で指定されます

Xsvg = a * 経度 + c * 緯度 + e
Ysvg = b * 緯度 + d * 緯度 + f

一次変換マトリクスa,b,c,d,e,fの値がそれぞれ1,0,0,-1,0,0であることから、

Xsvg = 経度
Ysvg = -緯度

image要素のパラメータ

image要素によってビットイメージを配置しています
- xlink:href="[ビットイメージのURL]" 配置するビットイメージのURL
- x="139.1063918412553" 配置するX原点＝西端の経度（139.10..°）
- y="-35.90355823638255" 配置するX原点＝北端の緯度（35.903..°）をマイナスにした値
- width="0.8140711890480361" 幅（経度で0.81°）
- height="0.41815015611484085" 高さ (緯度で0.41°）
- preserveAspectRatio="none" ビットイメージの実際のサイズのアスペクト比を変えてでも上記指定領域にぴったりと配置する　（参考：SVG spec）

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

</svg>

チュートリアル3b

目次