チュートリアル3b

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎チュートリアル3b SVGMapToolsを用いたタイル作成とその表示)
(→‎チュートリアル3b svgMapToolsを用いたタイル作成とその表示)
 
(1人の利用者による、間の48版が非表示)
1行: 1行:
−
= チュートリアル3b SVGMapToolsを用いたタイル作成とその表示 =
+
= チュートリアル3b svgMapToolsを用いたタイル作成とその表示 =
−
実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial3b/tutorial4b.html こちら]をクリック。
+
 
 +
* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。
 +
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip ZIPアーカイブファイル]
  
 
== タイリングされたコンテンツの準備 ==
 
== タイリングされたコンテンツの準備 ==
  
−
この章では、[https://github.com/svgmap/svgMapTools/ svgMapTools]を用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
+
* この章では、[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、ベクトル地理データ）を表示してみます。
 +
** 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを　それぞれレイヤーとして表示してみます。
  
−
== tutorial3b.html ==
+
=== svgMapToolsの設定===
 +
* svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアル]を実施
  
−
基本的に、[[チュートリアル2b]]で使用したtutorial2b.htmlと同様。
+
===ソースデータのダウンロード===
−
*SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.js, SVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
+
* [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ファイル]をダウンロードして解凍
−
*レイヤーリストUI用のCSSを読み込み
+
−
*地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
+
−
*ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
+
−
**ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。
+
−
**ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。
+
−
**GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。
+
−
*中心を表す十字マークを表示。
+
−
*上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
+
−
*レイヤーリストUI用のdiv要素(id="layerList"を設置
+
  
−
<PRE>
+
===データを変換してコンテンツを保存===
−
<!DOCTYPE html>
+
Shapefileから、SVGMapのタイリングされたコンテンツを生成します。
−
<html>
+
−
<title>SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG</title>
+
−
<!-- viewport 知表示領域を画面全体とする定義 -->
+
−
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
+
−
<meta charset="UTF-8">
+
−
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
  
−
<!-- SVGMapのコアAPIの読み込み -->
+
以下はWindowsで実行した例です。
−
<script type="text/javascript" src="../js/SVGMapLv0.1_r17.js"></script>
+
−
<script type="text/javascript" src="../js/SVGMapLv0.1_LayerUI2_r4.js"></script>
+
  
−
<!-- レイヤーリストUIのスタイルシート読み込み -->
+
* <code>cd [PATH_TO_DATA]</code>
−
<link href="../js/layerListStyle.css" rel="stylesheet" type="text/css">
+
* <code>mkdir roadl</code>
 +
* <code>mkdir coastl</code>
 +
* <code>mkdir builtup</code>
 +
* <code>cd [PATH_TO_TOOLS]</code>
 +
* <code>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 </code>
 +
* <code>Shape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2</code>
 +
* <code>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</code>
 +
* <code>Shape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2</code>
 +
* <code>Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svg</code>
 +
* <code>Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupp_jpn.shp [PATH_TO_DATA]\builtup\builtupp_jpn.svg</code>
  
−
<body bgcolor="#ffffff" style="overflow:hidden;" >
+
* [PATH_TO_DATA]\coastl, [PATH_TO_DATA]\roadl, [PATH_TO_DATA]\builtupの内容を、全てホストに転送
−
<!-- 地図SVGファイルを複数含むコンテナファイル(Container.svg)の読み込み -->
+
 
−
<div id="mapcanvas" data-src="Container.svg"></div>
+
Note:
−
<div id="gui">
+
*[PATH_TO_TOOLS]はsvgMapToolsのtoolsディレクトリ
−
<!-- ズームアップボタン -->
+
*[PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ
−
  <img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="../img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
+
*builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。（タイリングも実際には不要です）
−
<!-- ズームダウンボタン -->
+
 
−
  <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="../img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
+
== tutorial3b.html ==
−
<!-- GPSボタン -->
+
 
−
  <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="../img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
+
基本的に、[[チュートリアル2b]]で使用した[[チュートリアル2b#tutorial2b.html|tutorial2b.html]]と同様です。
−
<!-- 画面右上に表示するタイトル -->
+
−
  <font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG</font>
+
−
<!-- 画面右下に表示する -->
+
−
  <font color="blue" style="right: 5px; bottom: 5px; position: absolute;" size="-2" >by SVGMap tech.</font>
+
−
<!-- 中央に表示される十字マーク -->
+
−
  <img id="centerSight" style="opacity:0.5" src="../img/Xcursor.png" width="15" height="15"/>
+
−
<!-- 画面左下に表示される十字マークの緯度・経度(タイトル) -->
+
−
  <font id="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>
+
−
<!-- 画面左下に表示される十字マークの緯度・経度(実際の値の初期表示) -->
+
−
  <font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" >lat , lng</font>
+
−
<!-- レイヤーリストUIの表示 -->
+
−
  <div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>
+
−
</div>
+
−
</body>
+
−
</html>
+
−
</PRE>
+
  
 
== Container.svg ==
 
== Container.svg ==
−
チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む。
+
* [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。
 +
* ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。
 +
* 各レイヤーを表す'''animation'''要素の参照先は、svgMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。
 +
* ベクトルデータをクリッカブルにするために、'''class'''属性に、'''clickable'''を加えています。
 +
* 加えて、OpenStreetMapも非表示状態のレイヤーとして一番下に追加してあります。
  
 
<PRE>
 
<PRE>
72行: 57行:
 
  <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)" />
  
−
<!-- 日本の海岸線データのSVGファイルを表示状態として読み込む -->
+
<!-- 背景地図 OpenStreetMap (非表示状態)-->
−
<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" visibility="visible"/>
+
<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="hidden"/>
−
<!-- ビットマップイメージのSVGファイルを表示状態として読み込む -->
+
−
<animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible"/>
+
  
−
</svg>
+
<!-- 地球地図日本 海岸線-->
−
</PRE>
+
<animation xlink:href="coastl/coastl_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="海岸線" class="地球地図日本 clickable" visibility="visible"/>
  
−
== Coastline.svg ==
+
<!-- 地球地図日本 道路線-->
−
*チュートリアル1と同じ日本の海岸線データ。
+
<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"/>
−
== bitmapImage.svg ==
+
−
*重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
+
−
*ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。
+
−
 
+
−
===経度緯度とSVGコンテンツのXY座標との関係===
+
−
<code>globalCoordinateSystem</code>要素の<code>transform</code>属性（一次変換マトリクスの６つの値）で指定されます
+
−
Xsvg = a * 経度 + c * 緯度 + e
+
−
Ysvg = b * 緯度 + d * 緯度 + f
+
−
一次変換マトリクスa,b,c,d,e,fの値がそれぞれ1,0,0,-1,0,0であることから、
+
−
Xsvg = 経度
+
−
Ysvg = -緯度
+
−
 
+
−
===image要素のパラメータ===
+
−
*image要素によってビットイメージを配置しています
+
−
**<code>xlink:href="[ビットイメージのURL]"</code> 配置するビットイメージのURL
+
−
**<code>x="139.1063918412553"</code> 配置するX原点＝西端の経度（139.10..°）
+
−
**<code>y="-35.90355823638255"</code> 配置するX原点＝北端の緯度（35.903..°）をマイナスにした値
+
−
**<code>width="0.8140711890480361"</code> 幅（経度で0.81°）
+
−
**<code>height="0.41815015611484085"</code> 高さ (緯度で0.41°）
+
−
**<code>preserveAspectRatio="none"</code> ビットイメージの実際のサイズのアスペクト比を変えてでも上記指定領域にぴったりと配置する　（[https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute 参考：SVG spec]）
+
−
 
+
−
<PRE>
+
−
<?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" />
+
  
 +
<!-- 地球地図日本 市街地(点)-->
 +
<animation xlink:href="builtup/builtupp_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="市街地(点)" class="地球地図日本 clickable" visibility="visible"/>
 
</svg>
 
</svg>
 
</PRE>
 
</PRE>
 +
 +
== svgMapToolsが生成するタイリングされたコンテンツの構造 ==
 +
* レイヤーのルートとなるコンテンツ(この例では海岸線データで、coastl_jpn.svg)から、階層的に全てのベクトルデータ(.svg形式～大縮尺表示用)とラスターデータ(.png形式～小縮尺表示用)が参照されています。
 +
* .svg形式のデータのうち、ファイル名が*cont*のものはベクトルグラフィックスデータはなく参照データだけとなっており、子・孫のコンテンツが参照されています。
 +
<pre>
 +
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
 +
|  |
 +
|  +-coastl_jpn/lvl5/tile3_4.png
 +
|  +-*.png ...
 +
|  +-coastl_jpn_l2_2-5.svg
 +
|  +-*.svg ...
 +
|  +-coastl_jpn_cont_l4_14-20.svg
 +
|    |
 +
|    +-*.png ...
 +
|    +-*.svg ...
 +
|
 +
+-coastl_jpn_cont_l1_2-2.svg
 +
    |
 +
    +-*.png ...
 +
    +-*.svg ...

2023年6月23日 (金) 14:12時点における最新版

目次

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

[編集] タイリングされたコンテンツの準備

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

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

  • 本チュートリアルでは、国土地理院の地球地図　日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。
    • 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを　それぞれレイヤーとして表示してみます。

[編集] svgMapToolsの設定

[編集] ソースデータのダウンロード

[編集] データを変換してコンテンツを保存

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を加えています。
  • 加えて、OpenStreetMapも非表示状態のレイヤーとして一番下に追加してあります。 
<?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)" />

<!-- 背景地図 OpenStreetMap (非表示状態)-->
<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="hidden"/>

<!-- 地球地図日本 海岸線-->
<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
 |  |
 |  +-coastl_jpn/lvl5/tile3_4.png
 |  +-*.png ...
 |  +-coastl_jpn_l2_2-5.svg
 |  +-*.svg ...
 |  +-coastl_jpn_cont_l4_14-20.svg
 |     |
 |     +-*.png ...
 |     +-*.svg ...
 |
 +-coastl_jpn_cont_l1_2-2.svg
    |
    +-*.png ...
    +-*.svg ...
「https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB3b&oldid=1747」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate