チュートリアル

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(チュートリアル1 海岸線地図表示)
(チュートリアル2 海岸線地図とPOI(空港)表示)
38行: 38行:
 
== チュートリアル2 海岸線地図とPOI(空港)表示 ==
 
== チュートリアル2 海岸線地図とPOI(空港)表示 ==
  
チュートリアル1の内容にPOIで空港を表示するチュートリアルです。
+
チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
  
 +
 +
*ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
 +
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutrial2.html tutrial2.html]:チュートリアル2用のhtml(SVGMapLv0.1_r14.js、Containers.svgを読み込んでいる)
 +
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/Container.svg Container.svg]:表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
 +
**[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg Coastline_Airport.svg]:日本の海岸線と空港データ
 +
 +
 +
tutrial2.html
 +
*tutrial1.htmlと同様の内容です。
 +
 +
Coastline_Airport.svg
 +
*チュートリアル1のCoastline.svgに空港情報が追加されています。
 +
*空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)が記述されています。
  
 
== チュートリアル3 海岸線地図のタイリングからの表示 ==
 
== チュートリアル3 海岸線地図のタイリングからの表示 ==

2017年5月16日 (火) 01:07時点における版

目次

SVGMapチュートリアル

SVGMapのチュートリアルです。簡単なものから応用的なものまで少しずつ紹介いたします。

チュートリアルプログラムのディレクトリ構成

└───devinfo
     └───devkddi
          └───tutorials
              ├───js          Javascriptファイル
              ├───img         イメージファイル
              ├───tutorial1   チュートリアル1
               .
               .
              └───tutorialN   チュートリアルN


チュートリアル1 海岸線地図表示

最初に日本の海岸線を表示するチュートリアルです。 実際の動作は、こちらをクリック。

  • ファイル構成 tutrial1ディレクトリに以下のファイルがあります。
    • tutrial1.html : チュートリアル1用のhtml(SVGMapLv0.1_r14.js、Containers.svgを読み込んでいる)
    • Container.svg : 表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)
    • Coastline.svg : 日本の海岸線のデータ

tutrial1.html

  • SVGMapのコアプログラムファイルの読み込み。これで、SVGMapの各種APIが利用可能。
  • 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
  • ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
    • ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。
    • ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。
    • GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。
  • 中心を表す十字マークを表示。
  • 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。

チュートリアル2 海岸線地図とPOI(空港)表示

チュートリアル1の内容にPOIで空港を表示するチュートリアルです。実際の動作はこちらをクリック。


  • ファイル構成はtutrial2ディレクトリに以下のファイルがあります。
    • tutrial2.html:チュートリアル2用のhtml(SVGMapLv0.1_r14.js、Containers.svgを読み込んでいる)
    • Container.svg:表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる)
    • Coastline_Airport.svg:日本の海岸線と空港データ


tutrial2.html

  • tutrial1.htmlと同様の内容です。

Coastline_Airport.svg

  • チュートリアル1のCoastline.svgに空港情報が追加されています。
  • 空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)が記述されています。

チュートリアル3 海岸線地図のタイリングからの表示

チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。


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

チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。

個人用ツール
名前空間

変種
操作
案内
ツール
Translate