「チュートリアル3b」の版間の差分
(→Container.svg) |
|||
| 1行目: | 1行目: | ||
| − | = チュートリアル3b | + | = チュートリアル3b svgMapToolsを用いたタイル作成とその表示 = |
* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。 | * 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html こちら]をクリック。 | ||
| 11行目: | 11行目: | ||
** 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを それぞれレイヤーとして表示してみます。 | ** 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを それぞれレイヤーとして表示してみます。 | ||
| − | === | + | === svgMapToolsの設定=== |
* svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアル]を実施 | * svgMapToolsの設定を含む[https://github.com/svgmap/svgMapTools/tree/master/tutorials チュートリアル]を実施 | ||
| 37行目: | 37行目: | ||
Note: | Note: | ||
| − | *[PATH_TO_TOOLS] | + | *[PATH_TO_TOOLS]はsvgMapToolsのtoolsディレクトリ |
*[PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ | *[PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ | ||
*builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。（タイリングも実際には不要です） | *builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。（タイリングも実際には不要です） | ||
| 48行目: | 48行目: | ||
* [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。 | * [[チュートリアル2b]]の[[チュートリアル2b#Container.svg|Container.svg]]と基本的に違いはありません。 | ||
* ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。 | * ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。 | ||
| − | * 各レイヤーを表す'''animation''' | + | * 各レイヤーを表す'''animation'''要素の参照先は、svgMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。 |
* ベクトルデータをクリッカブルにするために、'''class'''属性に、'''clickable'''を加えています。 | * ベクトルデータをクリッカブルにするために、'''class'''属性に、'''clickable'''を加えています。 | ||
2023年4月11日 (火) 11:19時点における版
目次
チュートリアル3b svgMapToolsを用いたタイル作成とその表示
タイリングされたコンテンツの準備
- この章では、svgMapToolsを用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。
そのため、svgMapToolsの設定を含むチュートリアルを先ず実施してください。
- 本チュートリアルでは、国土地理院の地球地図 日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。
- 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを それぞれレイヤーとして表示してみます。
svgMapToolsの設定
- svgMapToolsの設定を含むチュートリアルを実施
ソースデータのダウンロード
- 地球地図日本サイトから、全レイヤの入ったzipファイルをダウンロードして解凍
データを変換してコンテンツを保存
Shapefileから、SVGMapのタイリングされたコンテンツを生成します。
以下はWindowsで実行した例です。
cd [PATH_TO_DATA]mkdir roadlmkdir coastlmkdir builtupcd [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.svgShape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2Shape2SVGMap.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.svgShape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svgShape2SVGMap.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を加えています。
<?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"/> <!-- 地球地図日本 市街地(面)--> <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>
