チュートリアル3
提供: svg2wiki
(版間での差分)
(→チュートリアル3 海岸線地図のタイリングからの表示) |
(→チュートリアル3 海岸線地図のタイリングからの表示) |
||
52行: | 52行: | ||
== Container.svg == | == Container.svg == | ||
+ | |||
*表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)。 | *表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)。 | ||
61行: | 62行: | ||
<!-- 日本の海岸線データのSVGファイルを表示状態として読み込む --> | <!-- 日本の海岸線データのSVGファイルを表示状態として読み込む --> | ||
<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="editable" visibility="visible"/> | <animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="editable" visibility="visible"/> | ||
+ | |||
+ | </svg> | ||
+ | </PRE> | ||
+ | |||
+ | == Coastline.svg == | ||
+ | *4×4(16)に分割したそれぞれのファイルを統合しているSVGファイル。 | ||
+ | |||
+ | <PRE> | ||
+ | <?xml version="1.0" encoding="UTF-8"?> | ||
+ | <svg viewBox="12078.24557, -4750.342539, 2637.1512, 2526.396468" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:go="http://purl.org/svgmap/profile" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" property="id,type,latitude,longitude,title,address,spec" > | ||
+ | <metadata> | ||
+ | <rdf:RDF xmlns:rdf="http://www.w3.og/1999/02/22-rdf-syntax-ns#" xmlns:crs="http://www.ogc.org/crs" xmlns:svg="http://www.w3.org/svg"> | ||
+ | <rdf:Description> | ||
+ | <crs:CoordinateReferenceSystem rdf:resource="http://purl.org/crs/84" svg:transform="matrix(100,0,0,-100,0,0)" /> | ||
+ | </rdf:Description> | ||
+ | </rdf:RDF> | ||
+ | </metadata> | ||
+ | <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" /> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <image load-policy="when-needed" href="0_0.svg" x="12078.24557" y="-4750.342539" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="0_1.svg" x="12078.24557" y="-4118.743422" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="0_2.svg" x="12078.24557" y="-3487.144305" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="0_3.svg" x="12078.24557" y="-2855.545188" width="659.2878" height="631.5991"/> | ||
+ | |||
+ | <image load-policy="when-needed" href="1_0.svg" x="12737.53337" y="-4750.342539" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="1_1.svg" x="12737.53337" y="-4118.743422" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="1_2.svg" x="12737.53337" y="-3487.144305" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="1_3.svg" x="12737.53337" y="-2855.545188" width="659.2878" height="631.5991"/> | ||
+ | |||
+ | <image load-policy="when-needed" href="2_0.svg" x="13396.82117" y="-4750.342539" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="2_1.svg" x="13396.82117" y="-4118.743422" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="2_2.svg" x="13396.82117" y="-3487.144305" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="2_3.svg" x="13396.82117" y="-2855.545188" width="659.2878" height="631.5991"/> | ||
+ | |||
+ | <image load-policy="when-needed" href="3_0.svg" x="14056.10897" y="-4750.342539" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="3_1.svg" x="14056.10897" y="-4118.743422" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="3_2.svg" x="14056.10897" y="-3487.144305" width="659.2878" height="631.5991"/> | ||
+ | <image load-policy="when-needed" href="3_3.svg" x="14056.10897" y="-2855.545188" width="659.2878" height="631.5991"/> | ||
</svg> | </svg> | ||
</PRE> | </PRE> |
2017年5月26日 (金) 02:45時点における版
目次 |
チュートリアル3 海岸線地図のタイリングからの表示
実際の動作はこちらをクリック。
tutorial3.html
基本的に、チュートリアル1で使用したtutorial1.htmlと同様。
- SVGMapのコアプログラムファイル(SVGMapLv0.1_r14.js)を読み込み、SVGMapの各種APIを利用可能にする。
- 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
- ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
- ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。
- ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。
- GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。
- 中心を表す十字マークを表示。
- 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
<!DOCTYPE html> <html> <title>SVGMapLevel0.1-Rev14-Draft Tutorial3 Coastline Tiling</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の読み込み --> <script type="text/javascript" src="../js/SVGMapLv0.1_r14.js"></script> <body bgcolor="#ffffff" style="overflow:hidden;" > <!-- 地図SVGファイルを複数含む(このチュートリアルでは1ファイルのみ)コンテナファイル(Container.svg)の読み込み --> <div id="mapcanvas" data-src="Container.svg"></div> <div id="gui"> <!-- ズームアップボタン --> <img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="../img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" /> <!-- ズームダウンボタン --> <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="../img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" /> <!-- GPSボタン --> <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="../img/gps.png" onclick="svgMap.gps()" width="20" height="20" /> <!-- 画面右上に表示するタイトル --> <font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial3 Coastline Tiling</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> </div> </body> </html>
Container.svg
- 表示する各レイヤ用のSVGファイルを読み込む(Coastline.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" class="editable" visibility="visible"/> </svg>
Coastline.svg
- 4×4(16)に分割したそれぞれのファイルを統合しているSVGファイル。
<?xml version="1.0" encoding="UTF-8"?> <svg viewBox="12078.24557, -4750.342539, 2637.1512, 2526.396468" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:go="http://purl.org/svgmap/profile" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" property="id,type,latitude,longitude,title,address,spec" > <metadata> <rdf:RDF xmlns:rdf="http://www.w3.og/1999/02/22-rdf-syntax-ns#" xmlns:crs="http://www.ogc.org/crs" xmlns:svg="http://www.w3.org/svg"> <rdf:Description> <crs:CoordinateReferenceSystem rdf:resource="http://purl.org/crs/84" svg:transform="matrix(100,0,0,-100,0,0)" /> </rdf:Description> </rdf:RDF> </metadata> <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" /> <script> </script> <image load-policy="when-needed" href="0_0.svg" x="12078.24557" y="-4750.342539" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="0_1.svg" x="12078.24557" y="-4118.743422" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="0_2.svg" x="12078.24557" y="-3487.144305" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="0_3.svg" x="12078.24557" y="-2855.545188" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="1_0.svg" x="12737.53337" y="-4750.342539" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="1_1.svg" x="12737.53337" y="-4118.743422" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="1_2.svg" x="12737.53337" y="-3487.144305" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="1_3.svg" x="12737.53337" y="-2855.545188" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="2_0.svg" x="13396.82117" y="-4750.342539" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="2_1.svg" x="13396.82117" y="-4118.743422" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="2_2.svg" x="13396.82117" y="-3487.144305" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="2_3.svg" x="13396.82117" y="-2855.545188" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="3_0.svg" x="14056.10897" y="-4750.342539" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="3_1.svg" x="14056.10897" y="-4118.743422" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="3_2.svg" x="14056.10897" y="-3487.144305" width="659.2878" height="631.5991"/> <image load-policy="when-needed" href="3_3.svg" x="14056.10897" y="-2855.545188" width="659.2878" height="631.5991"/> </svg>