2017年5月12日 (金) 04:01時点における版

SVGMapチュートリアル

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

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

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

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

最初に日本の海岸線を表示するチュートリアルです。

• ファイル構成 turial1ディレクトリに以下のファイルがあります。
  • 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で空港を表示するチュートリアルです。

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

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

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

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