チュートリアル3b
提供: svg2wiki
目次 |
チュートリアル3b SVGMapToolsを用いたタイル作成とその表示
工事中
実際の動作はこちらをクリック。
タイリングされたコンテンツの準備
- svgMapToolsの設定と基本理解
- この章では、svgMapToolsを用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
そのため、svgMapToolsの設定を含むチュートリアルを先ず実施してください。
- shapefile形式のデータの取得
- 本チュートリアルでは、国土地理院の地球地図 日本のデータ(ファイル形式:shapefile、ベクトル地理データ)を表示してみます。
tutorial3b.html
基本的に、チュートリアル2bで使用した[[チュートリアル2b#tutorial2b.html|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
属性(一次変換マトリクスの6つの値)で指定されます
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]"
配置するビットイメージのURLx="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>