チュートリアル4

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(チュートリアル4 Bitmapイメージ地図表示)
(チュートリアル4 Bitmapイメージ地図表示)
50行: 50行:
 
</html>
 
</html>
 
</PRE>
 
</PRE>
 +
 +
== Container.svg ==
 +
 +
 +
== Coastline.svg ==
 +
 +
 +
== bitmapImage.svg ==

2017年5月17日 (水) 02:38時点における版

目次

チュートリアル4 Bitmapイメージ地図表示

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

tutorial4.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 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の読み込み -->
<script type="text/javascript" src="../js/SVGMapLv0.1_r14.js"></script>

<body bgcolor="#ffffff" style="overflow:hidden;" >
<!-- 地図SVGファイルを複数含むコンテナファイル(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 : 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>
 </div>
</body>
</html>

Container.svg

Coastline.svg

bitmapImage.svg

個人用ツール
名前空間

変種
操作
案内
ツール
Translate