TileViewerjQuery Plugin

概要

Webページにタイル化された画像をスケーラブルに表示する機能を簡単に組み込む事が出来るjqueryプラグインです。
サンプルはこちら

変更履歴

ライセンス

BSD2

主な機能

導入方法

1.下記ライブラリをダウンロードする。

jquery-k2go-tile-viewer.js
ダウンロード
jquery-k2go-tile-viewer.css
ダウンロード
License.txt
ダウンロード

2.jquery（Ver3.4.1以上）とダウンロードしたライブラリをHTMLファイルへ組み込む。

例 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="jquery-3.4.1.min.js"       ></script>
  <script type="text/javascript" src="jquery-k2go-tile-viewer.js"></script>
  <link   type="text/css"       href="jquery-k2go-tile-viewer.css" rel="stylesheet">
</head>
<body>
  ・・・
</body>
</html>

3.windowオブジェクトのload完了後、タイル画像を組み込みたい要素へ実装する。

例 
$(window).on("load", function()
{
  $(セレクタ).k2goTileViewer(オプション);
  $(セレクタ).k2goTileViewer("create");
});

オプション

名前 型 初期値 説明
foregroundImages Array undefined タイル画像URL（文字列）の配列
同じ構造の異なるタイル画像を重ねて表示したい場合は複数指定します。複数指定した場合は、配列先頭のURLが最背面に配置され、以降は順に上へ重なるよう配置され、配列末尾のURLが最前面に配置されます。URLには以下の書式が使用出来ます。
書式 置き換わる値
%x タイル座標（X）
%y タイル座標（Y）
%z ズームレベル
%w タイル画像サイズ（幅）
%h タイル画像サイズ（高さ）
%ws タイル画像サイズ（幅）× 表示倍率　※表示倍率はscalesオプションを参照
%hs タイル画像サイズ（高さ）× 表示倍率　※表示倍率はscalesオプションを参照
%c タイル分割値（タイル座標XYの最大値）
backgroundImage String undefined タイル画像の背面に下絵として表示する画像のURL
通常、最もズームアウトしたレイヤ（タイル数が1枚のレイヤ）のタイル画像のURLを指定します。ズームインやズームアウトの際にタイル画像の読み込みに時間が掛かっている場合、backgroundImageが指定されていると、タイル画像が読み込まれる迄の見栄えが良くなる効果が期待されます。
scales Array - 各レイヤにおいてタイル要素をどの様な縮尺で表示するかを指定したオブジェクトの配列
foregroundImagesのURLで指定された書式は、この情報を元に置き換えられ、ズームインおよびズームアウトも、この情報も元に行われます。各オブジェクトには以下の情報を指定します。
名前 型 説明
width Number タイル画像サイズ（幅）
height Number タイル画像サイズ（高さ）
size Number タイル要素の表示倍率。通常は1
タイル要素は幅がwidth × size、高さがheight × sizeの大きさで表示されます。
count Number タイル分割値（タイル座標XYの最大値）
zoom Number タイル画像のズームレベル
国土地理院やオープンストリートマップ等の標準的な地図画像を使用する際は地図の表示倍率（ズームレベル）を指定します。
それ以外のタイル画像を使用する際は指定不要です。
geodeticSystem String undefined 座標系の種類
タイル画像が座標系に基づく地図画像等の場合、その種類を指定します。タイル画像が座標系に基づく画像では無い場合は指定不要です。座標系の種類は以下が指定出来ます。
値 説明
standard 国土地理院やオープンストリートマップ等の標準的な地図画像。
himawari8.jp 情報通信研究機構（NICT）が提供している気象衛星ひまわり8号の日本域画像。
himawari8.fd 情報通信研究機構（NICT）が提供している気象衛星ひまわり8号の全球画像。
drawingSize Number 1 描画領域に対するタイル要素を読み込む領域の倍率
1を指定すると描画領域を埋める分だけのタイル要素が生成されます。
2を指定すると描画領域の2倍の領域を埋める分のタイル要素が生成されるようになります。
1より大きい値を指定すると、描画領域からはみ出した領域（隠れている領域）にもタイル画像が読み込まれるようになるため、ドラッグ操作等で上下左右に移動した際に隠れていた領域のタイル画像が既に読み込まれている状態を得る事が出来ます。ただし、読み込まれるタイル画像の量（ファイル数）も多くなるので、あまり大きな倍率にするとcreateメソッドやズームイン・アウト等のレスポンスにも影響を与えます。
timeout Number 1000 タイル画像の読み込みが完了するまでの待ち時間のタイムアウト値 (単位はミリ秒)
createメソッドやズームイン・アウトを行った際、タイル画像の読み込みが全て完了してから当該レイヤの再描画が行われますが、タイル画像の読み込みが完了していなくても指定した値の時間が経過した場合は再描画が行われるようになります。
大きな値（長い時間）を指定すると、タイル画像の読み込みが完了してから再描画される可能性が高くなるので、画像の切り替わりがシームレスになり見栄えが良くなる事が期待されますが、その分、レスポンスが悪くなります。
小さな値（短い時間）を指定すると、タイル画像の読み込みが完了していなくても再描画される可能性が高くなるので、画像の切り替わりの見栄えが悪くなる可能性が高くなりますが、レスポンスは良くなります。
disableMove Boolean false trueに設定すると上下左右への移動機能が無効になります。
disableZoom Boolean false trueに設定するとズーム機能が無効になります。
limitZoomEffect Boolean false trueに設定するとマウスホイールやピンチでの操作中に最大または最小のズーム率を超えてタイル画像が拡縮しなくなります。
zoomStart Function undefined ズームが開始された際に呼び出されるコールバック関数です。引数のオブジェクトよりズームの基点となるオフセット座標（x、y）が取得出来ます。
zoomEnd Function undefined ズームが完了した際に呼び出されるコールバック関数です。引数のオブジェクトよりズーム前とズーム後のスケール値（scalesオプションのindex値（beforeScale、afterScale））が取得出来ます。
moveStart Function undefined ドラッグ（スワイプ）が開始された際に呼び出されるコールバック関数です。引数のオブジェクトよりクリック（タップ）した位置のオフセット座標（x、y）が取得出来ます。
move Function undefined 上下左右の移動が行われる度に呼び出されるコールバック関数です。引数のオブジェクトよりピクセル移動量（left、top）が取得出来ます。
moveEnd Function undefined ドラッグ（スワイプ）が終了した際に呼び出されるコールバック関数です。
tapHold Function undefined 描画領域上の任意の位置を長押しした際に呼び出されるコールバック関数です。引数のオブジェクトより長押しした位置のオフセット座標（x、y）が取得出来ます。
doubleTap Function undefined 描画領域上の任意の位置をダブルクリック（ダブルタップ）した際に呼び出されるコールバック関数です。引数のオブジェクトよりダブルクリック（ダブルタップ）した位置のオフセット座標（x、y）が取得出来ます。
また、ダブルクリックの場合は引数のオブジェクトよりマウスボタン情報（which）が取得出来ます。値は左ボタンの場合が1、右ボタンの場合が-1となります（ダブルタップの場合は常に1）。
※注意※
ダブルクリック（ダブルタップ）のデフォルト動作はズームですが、このdoubleTapオプションを指定するとダブルクリック（ダブルタップ）ではズームされなくなります。
addTile Function undefined タイル要素が生成される度に呼び出されるコールバック関数です。引数のオブジェクトよりタイル要素（jqueryオブジェクト）およびタイル情報（タイル座標（x,y）、タイルサイズ（width,height））が取得出来ます。
コンストラクタの例 
$(セレクタ).k2goTileViewer(
{
  foregroundImages :
  [
    "https://cyberjapandata.gsi.go.jp/xyz/std/%z/%x/%y.png"                // 国土地理院の地図画像URL
  ],
  backgroundImage  : "https://cyberjapandata.gsi.go.jp/xyz/std/0/0/0.png", // 国土地理院の地図画像URL
  scales :
  [
    { width : 256, height : 256, size : 1.0, count :     32, zoom :  5 },  // 国土地理院の地図画像は256×256ピクセル。ズームレベルは5～18。
    { width : 256, height : 256, size : 1.0, count :     64, zoom :  6 },
    { width : 256, height : 256, size : 1.0, count :    128, zoom :  7 },
    { width : 256, height : 256, size : 1.0, count :    256, zoom :  8 },
    { width : 256, height : 256, size : 1.0, count :    512, zoom :  9 },
    { width : 256, height : 256, size : 1.0, count :   1024, zoom : 10 },
    { width : 256, height : 256, size : 1.0, count :   2048, zoom : 11 },
    { width : 256, height : 256, size : 1.0, count :   4096, zoom : 12 },
    { width : 256, height : 256, size : 1.0, count :   8192, zoom : 13 },
    { width : 256, height : 256, size : 1.0, count :  16384, zoom : 14 },
    { width : 256, height : 256, size : 1.0, count :  32768, zoom : 15 },
    { width : 256, height : 256, size : 1.0, count :  65536, zoom : 16 },
    { width : 256, height : 256, size : 1.0, count : 131072, zoom : 17 },
    { width : 256, height : 256, size : 1.0, count : 262144, zoom : 18 }
  ],
  geodeticSystem : "standard",                                             // 標準地図画像の座標系を指定
  drawingSize    : 1.5,                                                    // 描画領域の1.5倍の領域サイズ分、タイル要素を生成
  timeout        : 2000,                                                   // タイル画像読込完了までの待ち時間は2秒まで
  zoomStart      : function(pOffset)
  {
    console.log("x=" + pOffset.x + " y=" + pOffset.y);
  },
  zoomEnd : function(pZoomInfo)
  {
    console.log("before=" + pZoomInfo.beforeScale + " after=" + pZoomInfo.afterScale);
  },
  moveStart : function(pOffset)
  {
    console.log("x=" + pOffset.x + " y=" + pOffset.y);
  },
  move : function(pDifference)
  {
    console.log("left=" + pDifference.left + " top=" + pDifference.top);
  },
  moveEnd : function()
  {
    console.log("move end");
  },
  tapHold : function(pOffset)
  {
    console.log("x=" + pOffset.x + " y=" + pOffset.y);
  },
  doubleTap : function(pDblTapInfo)
  {
    console.log("x=" + pDblTapInfo.x + " y=" + pDblTapInfo.y + " which=" + pDblTapInfo.which);
  },
  addTile : function(pTileElement, pTileInfo)
  {
    console.log("x=" + pTileInfo.x + " y=" + pTileInfo.y + " width=" + pTileInfo.width + " height=" + pTileInfo.height);
  }
});

メソッド

create

説明 設定されたオプション値と引数で指定された位置情報に基づきタイル要素を描画します。
構文 $(セレクタ).k2goTileViewer("create"[, 位置情報[, コールバック関数]]);
引数 位置情報 nullまたは指定無し
描画領域のサイズに対して、画像全体がちょうど納まる最適なスケールおよび位置に調整されます。

中心座標、スケール、表示サイズ（幅、高さ）を含むObjectを指定する場合
名前 型 説明
center Object 中心座標（left、top）を含むObject。値はabsolute（絶対値）、relative（相対値）、degrees（緯度経度）のいずれかで指定可能。
名前 型 説明
absolute Object scaleで指定したレイヤのタイル座標 X:0 Y:0 の左上隅を基点（left:0, top:0）とし、そこからのピクセル座標を指定。
relative Object 画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置を指定。
degrees Object 緯度経度を10進法で指定。ただしdegreesでの指定は、geodeticSystemオプション値を設定している場合のみ利用可能。
scale Number 表示したいスケールのレイヤ（scalesオプションのindex値）。
width Number scaleで指定したレイヤの画像全体のうち、描画領域内に納めたいサイズ（幅）。
height Number scaleで指定したレイヤの画像全体のうち、描画領域内に納めたいサイズ（高さ）。
※実際に表示されるスケールは、描画領域のサイズに対して、scale、width、height、で指定した領域がちょうど納まる最適なスケールに調整されます。

四隅の座標を含むObjectを指定する場合
名前 型 説明
bounds Object 四隅の座標（left、top、right、bottom[、scale]）を含むObject。値はabsolute（絶対値）、relative（相対値）、degrees（緯度経度）のいずれかで指定可能。
名前 型 説明
absolute Object scaleで指定したレイヤのタイル座標 X:0 Y:0 の左上隅を基点（left:0, top:0）とし、そこからのピクセル座標を指定。
relative Object 画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置を指定。
degrees Object 緯度経度を10進法で指定。ただしdegreesでの指定は、geodeticSystemオプション値を設定している場合のみ利用可能。
※実際に表示されるスケールは、描画領域のサイズに対して、指定した四隅がちょうど納まる最適なスケールに調整されます。
コールバック関数 描画が完了した際に呼び出されるコールバック関数。
戻り値 jqueryオブジェクト
実装例 
// 画像全体がちょうど納まるようにする場合
$(セレクタ).k2goTileViewer("create");
$(セレクタ).k2goTileViewer("create", null, function() { console.log("create"); }); //コールバック関数を指定

// スケール、表示サイズ（幅、高さ）および中心座標をabsolute（絶対値）で指定する場合
$(セレクタ).k2goTileViewer("create", { center : { absolute : { left : 29379, top : 11981 } }, scale : 4, width : 553, height : 522 }, function() { console.log("create"); });

// スケール、表示サイズ（幅、高さ）および中心座標をrelative（相対値）で指定する場合
$(セレクタ).k2goTileViewer("create", { center : { relative : { left : 0.896, top : 0.366 } }, scale : 4, width : 553, height : 522 }, function() { console.log("create"); });

// スケール、表示サイズ（幅、高さ）および中心座標をdegrees（緯度経度）で指定する場合
$(セレクタ).k2goTileViewer("create", { center : { degrees : { left : 142.79, top : 43.48 } }, scale : 4, width : 553, height : 522 }, function() { console.log("create"); });

// 四隅の座標をabsolute（絶対値）で指定する場合
$(セレクタ).k2goTileViewer("create", { bounds : { absolute : { left : 29103, top : 11720, right : 29656, bottom : 12242, scale : 4 } } }, function() { console.log("create"); });

// 四隅の座標をrelative（相対値）で指定する場合
$(セレクタ).k2goTileViewer("create", { bounds : { relative : { left : 0.888, top : 0.358, right : 0.905, bottom : 0.374 } } }, function() { console.log("create"); });

// 四隅の座標をdegrees（緯度経度）で指定する場合
$(セレクタ).k2goTileViewer("create", { bounds : { degrees : { left : 139.75, top : 45.56, right : 145.82, bottom : 41.40 } } }, function() { console.log("create"); });

move

説明 引数で指定された位置情報に基づき中心位置を移動します。
構文 $(セレクタ).k2goTileViewer("move", 位置情報, 移動時間[, コールバック関数]);
引数 位置情報 中心座標（left、top）を含むObject。値はdifference（移動量）、absolute（絶対値）、relative（相対値）、degrees（緯度経度）のいずれかで指定可能。
名前 型 説明
difference Object 横方向へ移動するピクセル数（left）と縦方向へ移動するピクセル数（top）を指定。
absolute Object 移動後の中心座標（left, top）を、現在のスケールレイヤのタイル座標 X:0 Y:0 の左上隅を基点（left:0, top:0）に、そこからのピクセル座標で指定。
relative Object 移動後の中心座標（left, top）を、画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置で指定。
degrees Object 移動後の中心座標（left, top）を、緯度経度（10進法）で指定。ただしdegreesでの指定は、geodeticSystemオプション値を設定している場合のみ利用可能。
移動時間 現在の位置から指定された位置まで移動する際のアニメーション時間。単位はミリ秒。
コールバック関数 移動が完了した際に呼び出されるコールバック関数。
戻り値 jqueryオブジェクト
実装例 
// 左へ100px、上へ100px、1秒かけて移動
$(セレクタ).k2goTileViewer("move", { difference : { left : 100, top : 100 } }, 1000, function() { console.log("move"); });

// 移動後の中心座標をabsolute（絶対値）で指定、1秒かけて移動
$(セレクタ).k2goTileViewer("move", { absolute : { left : 29379, top : 11981 } }, 1000, function() { console.log("move"); });

// 移動後の中心座標をrelative（相対値）で指定、1秒かけて移動
$(セレクタ).k2goTileViewer("move", { relative : { left : 0.896, top : 0.366 } }, 1000, function() { console.log("move"); });

// 移動後の中心座標をdegrees（緯度経度）で指定、1秒かけて移動
$(セレクタ).k2goTileViewer("move", { degrees : { left : 142.79, top : 43.48 } }, 1000, function() { console.log("move"); });

zoomIn

説明 描画領域の中心を基点にズームインします。
構文 $(セレクタ).k2goTileViewer("zoomIn");
引数 無し
戻り値 jqueryオブジェクト

zoomOut

説明 描画領域の中心を基点にズームアウトします。
構文 $(セレクタ).k2goTileViewer("zoomOut");
引数 無し
戻り値 jqueryオブジェクト

addEntity

説明 任意の要素（jqueryオブジェクト）を任意の位置にプロットします。
構文 $(セレクタ).k2goTileViewer("addEntity", 引数);
引数 プロットする要素と要素の中心座標を含むObjectを指定する場合
どのスケールレイアでも、プロットされた要素のサイズは固定（予めcss等で設定された要素自身のサイズ）になります。
名前 型 説明
element Object プロットする要素をjqueryオブジェクトで指定。既にプロット済みの要素（jqueryオブジェクト）を指定した場合は上書きされます。
center Object プロットする要素の中心座標（left, top[, scale]）を含むObject。値はabsolute（絶対値）、relative（相対値）、degrees（緯度経度）、offset（オフセット）のいずれかで指定可能。
名前 型 説明
absolute Object 要素の中心座標（left, top）を、指定したスケール（scale）のタイル座標 X:0 Y:0 の左上隅を基点（left:0, top:0）に、そこからのピクセル座標で指定。
relative Object 要素の中心座標（left, top）を、画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置で指定。
degrees Object 要素の中心座標（left, top）を、緯度経度（10進法）で指定。ただしdegreesでの指定は、geodeticSystemオプション値を設定している場合のみ利用可能。
offset Object 要素の中心座標（left, top）を、現在の描画領域上のオフセット位置で指定。ただしoffsetでの指定は、描画領域にタイル要素が表示されている場合のみ利用可能（createメソッドが未実行時は利用不可）。
プロットする要素と要素の四隅の座標を含むObjectを指定する場合
スケールレイア毎に、プロットされた要素のサイズもスケーラブルに変わります。
名前 型 説明
element Object プロットする要素をjqueryオブジェクトで指定。既にプロット済みの要素（jqueryオブジェクト）を指定した場合は上書きされます。
bounds Object プロットする要素の四隅の座標（left, top, right, bottom[, scale]）を含むObject。値はabsolute（絶対値）、relative（相対値）、degrees（緯度経度）、offset（オフセット）のいずれかで指定可能。
名前 型 説明
absolute Object 要素の四隅の座標（left, top, right, bottom）を、指定したスケール（scale）のタイル座標 X:0 Y:0 の左上隅を基点（left:0, top:0）に、そこからのピクセル座標で指定。
relative Object 要素の四隅の座標（left, top, right, bottom）を、画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置で指定。
degrees Object 要素の四隅の座標（left, top, right, bottom）を、緯度経度（10進法）で指定。ただしdegreesでの指定は、geodeticSystemオプション値を設定している場合のみ利用可能。
offset Object 要素の四隅の座標（left, top, right, bottom）を、現在の描画領域上のオフセット位置で指定。ただしoffsetでの指定は、描画領域にタイル要素が表示されている場合のみ利用可能（createメソッドが未実行時は利用不可）。
戻り値 登録されたプロット情報を含むObject
名前 型 説明
element Object プロットした要素（jqueryオブジェクト）
center Object プロットした要素の中心座標（left, top）を含むObject。値はrelative（相対値）とdegrees（緯度経度）。
名前 型 説明
relative Object 要素の中心座標（left, top）。値は画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置。
degrees Object 要素の中心座標（left, top）。値は緯度経度（10進法）。ただしdegreesの値は、geodeticSystemオプション値を設定している場合のみ取得可能。
tileInfo Object プロットされた位置のタイル要素の情報。
名前 型 説明
x Number タイル座標（X）。
y Number タイル座標（Y）。
width Number タイル要素のサイズ（幅）。
height Number タイル要素のサイズ（高さ）。
left Number プロットされた要素の中心座標からタイル要素の左端までのピクセル座標。
top Number プロットされた要素の中心座標からタイル要素の上端までのピクセル座標。
size Object プロットした要素のサイズ情報を含むObject。値はrelative（相対値）とdegrees（緯度経度）。 ただし、プロットする要素の四隅の座標を指定した場合のみ取得可能。 プロットする要素の中心座標を指定した場合には、size情報は戻り値に含まれません。
名前 型 説明
relative Object 要素の幅（width）と高さ（height）。値は画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合サイズ。
degrees Object 要素の四隅の座標（left, top, right, bottom）。値は緯度経度（10進法）。ただしdegreesの値は、geodeticSystemオプション値を設定している場合のみ取得可能。
実装例 
var $element = $("<div id='plot'></div>").css({ background : "#f00", width : "20px", height : "20px", opacity : 0.5 });

// 中心座標をabsolute（絶対値）で指定
var entity = $(セレクタ).k2goTileViewer("addEntity", { element : $element, center : { absolute : { left : 29379, top : 11981, scale : 4 } } });
console.log(entity); // -> { element : jqueryオブジェクト, center : { relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 } }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 } }

// 中心座標をrelative（相対値）で指定
var entity = $(セレクタ).k2goTileViewer("addEntity", { element : $element, center : { relative : { left : 0.896, top : 0.366 } } });
console.log(entity); // -> { element : jqueryオブジェクト, center : { relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 } }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 } }

// 中心座標をdegrees（緯度経度）で指定
var entity = $(セレクタ).k2goTileViewer("addEntity", { element : $element, center : { degrees : { left : 142.79, top : 43.48 } } });
console.log(entity); // -> { element : jqueryオブジェクト, center : { relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 } }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 } }

// 四隅の座標をabsolute（絶対値）で指定
var entity = $(セレクタ).k2goTileViewer("addEntity", { element : $element, bounds : { absolute : { left : 29103, top : 11720, right : 29656, bottom : 12242, scale : 4 } } });
console.log(entity); // -> { element : jqueryオブジェクト, center : { relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 } }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 }, size : { relative : { width : 0.017, height : 0.016 }, degrees: { left : 139.75, top : 45.56, right : 145.82, bottom : 41.40 } } }

// 四隅の座標をrelative（相対値）で指定
var entity = $(セレクタ).k2goTileViewer("addEntity", { element : $element, bounds : { relative : { left : 0.888, top : 0.358, right : 0.905, bottom : 0.374 } } });
console.log(entity); // -> { element : jqueryオブジェクト, center : { relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 } }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 }, size : { relative : { width : 0.017, height : 0.016 }, degrees: { left : 139.75, top : 45.56, right : 145.82, bottom : 41.40 } } }

// 四隅の座標をdegrees（緯度経度）で指定
var entity = $(セレクタ).k2goTileViewer("addEntity", { element : $element, bounds : { degrees : { left : 139.75, top : 45.56, right : 145.82, bottom : 41.40 } } });
console.log(entity); // -> { element : jqueryオブジェクト, center : { relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 } }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 }, size : { relative : { width : 0.017, height : 0.016 }, degrees: { left : 139.75, top : 45.56, right : 145.82, bottom : 41.40 } } }

getEntity

説明 引数で指定された要素のプロット情報を取得します。
構文 $(セレクタ).k2goTileViewer("getEntity", 引数);
引数 プロット情報を取得したい要素（jqueryオブジェクト）。
戻り値 引数で指定された要素のプロット情報（詳細はaddEntityメソッドの戻り値を参照）。引数で指定された要素が見つからない（プロットされた要素で無い）場合はnull。

getEntities

説明 プロットされた全ての要素のプロット情報を取得します。
構文 $(セレクタ).k2goTileViewer("getEntities");
引数 無し
戻り値 プロットされた全ての要素のプロット情報を含む配列。（個々のプロット情報の詳細はaddEntityメソッドの戻り値を参照）

deleteEntity

説明 引数で指定されたプロット要素を削除します。
構文 $(セレクタ).k2goTileViewer("deleteEntity", 引数);
引数 削除したいプロット要素（jqueryオブジェクト）。
戻り値 jqueryオブジェクト

deleteAllEntity

説明 全てのプロット要素を削除します。
構文 $(セレクタ).k2goTileViewer("deleteAllEntity");
引数 無し
戻り値 jqueryオブジェクト

getPositionInfo

説明 引数で指定されたオフセット位置の各種位置情報を取得します。
構文 $(セレクタ).k2goTileViewer("getPositionInfo", 引数);
引数 位置情報を取得したいオフセット位置（left, top）を含むObject。
戻り値 オフセット位置の各種位置情報を含むObject。
名前 型 説明
offset Object オフセット位置（left, top）を含むObject
absolute Object 絶対値座標（left, top）とスケール（scale）を含むObject。値はスケール（scale）のタイル座標 X:0 Y:0 の左上隅を基点（left:0, top:0）に、そこからのピクセル座標。
relative Object 相対値座標（left, top）を含むObject。値は画像全体の左端および上端を0、右端および下端を1、中央をそれぞれ0.5とした相対的な割合位置。
degrees Object 経緯度座標（left, top）を含むObject。値は10進法。ただしdegreesの値は、geodeticSystemオプション値を設定している場合のみ取得可能。
tileInfo Object タイル要素の情報を含むObject
名前 型 説明
x Number タイル座標（X）。
y Number タイル座標（Y）。
width Number タイル要素のサイズ（幅）。
height Number タイル要素のサイズ（高さ）。
left Number オフセット位置からタイル要素の左端までのピクセル座標。
top Number オフセット位置からタイル要素の上端までのピクセル座標。
実装例 
var position = $(セレクタ).k2goTileViewer("getPositionInfo", { left : 500, top : 500 });
console.log(position); // -> { offset : { left : 500, top : 500 }, absolute : { left : 29379, top : 11981, scale : 4 }, relative : { left : 0.896, top : 0.366 }, degrees : { left : 142.79, top : 43.48 }, tileInfo : { x : 28, y : 11, width : 256, height : 256, left : -176.75, top : -179.25 } }

getCenterInfo

説明 描画領域中心の各種位置情報を取得します。
構文 $(セレクタ).k2goTileViewer("getCenterInfo");
引 無し
戻り値 描画領域中心の各種位置情報を含むObject（詳細はgetPositionInfoメソッドの戻り値を参照）。

getBoundsInfo

説明 描画領域四隅の各種位置情報を取得します。
構文 $(セレクタ).k2goTileViewer("getBoundsInfo");
引数 無し
戻り値 描画領域四隅の各種位置情報を含むObject。
名前 型 説明
leftTop Object 描画領域左上隅の各種位置情報（詳細はgetPositionInfoメソッドの戻り値を参照）。
leftBottom Object 描画領域左下隅の各種位置情報（詳細はgetPositionInfoメソッドの戻り値を参照）。
rightTop Object 描画領域右上隅の各種位置情報（詳細はgetPositionInfoメソッドの戻り値を参照）。
rightBottom Object 描画領域右下隅の各種位置情報（詳細はgetPositionInfoメソッドの戻り値を参照）。

setOptions

説明 オプションの設定変更を行います。
構文 $(セレクタ).k2goTileViewer("setOptions", 引数);
引数 変更したいオプション値を含むObject。
戻り値 jqueryオブジェクト
実装例 
$(セレクタ).k2goTileViewer("setOptions",
{
timeout     : 2000, // タイムアウト値を2秒に設定
drawingSize : 1.5,  // タイル生成領域を描画領域の1.5倍に設定
disableMove : true, // ドラッグ機能を無効に設定
disableZoom : true  // ズーム機能を無効に設定
});

getOptions

説明 オプション値を取得します。
構文 $(セレクタ).k2goTileViewer("getOptions");
引数 無し
戻り値 現在のオプション値を含むObject。
実装例 
var options = $(セレクタ).k2goTileViewer("getOptions");

// options.timeoutからタイムアウト値を取得
// options.drawingSizeからタイル生成領域の倍率を取得