Overlay API Reference/ja

From Ka-Map Wiki

1 ソース
2 kaXmlOverlayクイックHOW-TO
3 kaXmlOverlay リファレンス
4 よくある質問
5 TODOリスト

[edit] ソース

index_overlay.html, startup_overlay.js - based on CVS 3.0

[edit] kaXmlOverlayクイックHOW-TO

1 スクリプトをインポートする:

<script type="text/javascript" src="xhr.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="XMLOverlay/kaXmlOverlay.js"></script>

2 ka-Mapを初期化させる：次のステップはKAMAP_MAP_INITIALIZEDイベントまで待つ必要があります。

3 kaXmlOverlayオブジェクトを作成する:

myXmlOverlay = new kaXmlOverlay( myKaMap, 250 );

4 オーバーレイレイヤーにオブジェクトを追加する。これには2つの方法があります。

- loadXmlメソッドを使う:このメソッドはWebサーバーからXMLドキュメントをロードします。

myXmlOverlay.loadXml('points.xml');

- オブジェクトを追加するJavaScript関数を使う:

var my_point = myXmlOverlay.addNewPoint('Point ID', longuitude, latitude);
var my_symbol = new kaXmlSymbol();
my_symbol.size = 12;
my_symbol.color = '#ff0000';
my_point.addGraphic(my_symbol);

5 定期的にリロードするには:

myInterval = setInterval("myMovingOverlay.loadXml('xmlget.php')",5000);

[edit] kaXmlOverlay リファレンス

このドキュメントはJavaScriptで書かれたkaXmlOverlayライブラリのインターフェースと、オーバーレイを記述するXMLドキュメントを説明します。ドキュメントは3つのセクションに分かれています:

JavaScriptオブジェクトと関数の概要
XMLの定義
XMLとJavaScript関数に共通する属性の詳細な説明

[edit] JavaScript API

このセクションでは、オーバーレイをプログラム的に地図に追加するために使用できる主なクラスのリストを、メソッドやプロパティーと共に紹介します。各関数の詳細なドキュメンテーションは、ソースコードの中にJavaDocのようなコメントとして管理されています。

[edit] kaXmlOverlay クラス

このクラスはオーバーレイを追加することのできる地図レイヤーを表します。このクラスのインスタンスを作るには以下のコンストラクターを使います。

kaXmlOverlay( oKaMap, xml_url )

oKaMap: kaMapオブジェクト
zIndex: レイヤーのZインデックス

オーバーレイが記述されたXMLドキュメントをロードするには以下の関数を使います。

kaXmlOverlay.prototype.loadXml = function(xml_url)

xml_url: プロットするポイントが記述されたXMLのURL

新しいポイントをオーバーレイに追加するには

kaXmlOverlay.prototype.addNewPoint = function(pid, x, y)

pid: ポイントID
x: X地理座標
y: Y地理座標
return: このポイントIDのkaXmlPointオブジェクト

オーバーレイから既存のポイントを取得するには

kaXmlOverlay.prototype.getPointObject = function(pid)

pid: ポイントID
return: このポイントIDのkaXmlPointオブジェクト。見つからない場合はnull。

オーバーレイからポイントを削除するには

kaXmlOverlay.prototype.removePoint = function( pid )

pid: ポイントIDもしくは正規表現。 pidがnullまたは存在しない場合は全てのポイントを削除。

[edit] kaXmlPoint クラス

kaXmlPointクラスはオーバーレイレイヤー上の画像オブジェクトのグループを表します。ポイントは地理座標で指定された位置に置かれます。位置を変更しても全ての画像オブジェクトを再描画する必要はありません。

新しいポイントのインスタンスを作成するには、コンストラクターを使わずにkaXmlOverlay.addNewPoint()関数を使います。

kaXmlPointを地図上に置く、または移動するには

kaXmlPoint.prototype.setPosition = function( x, y )

x: X地理座標
y: Y地理座標

ポイントに関連付けられた画像を全て削除するには以下のメソッドを使います。

kaXmlPoint.prototype.clear = function()

ポイントに画像オブジェクトを追加するには以下のメソッドを使います。

kaXmlPoint.prototype.addGraphic = function( obj )

obj: kaXmlSymbol、kaXmlIcon、kaXmlLabel、kaXmlLinestringまたはkaXmlPolygonオブジェクト。

kaXmlPointのHTMLコンテンツを手動で設定するには以下のメソッドを使います。

kaXmlPoint.prototype.setInnerHtml = function(ihtml)

ihtml: HTMLを含む文字列

この関数はポイントに既に設定してあった他のコンテンツを全て削除してしまいます。

[edit] 画像オブジェクトクラス

画像オブジェクトクラスには以下の種類があります。

kaXmlSymbol
kaXmlLabel
kaXmlIcon
kaXmlLinestring
kaXmlPolygon

これらの全てのクラスはパラメータ無しのコンストラクターを持っており、また各々が異なった属性を持っています。属性についてはこのドキュメントで後述します。

これらのオブジェクトを使用するには、まずインスタンスを作成し、プロパティーを設定してkaXmlPointにaddGraphicメソッドを使って追加します。

ベクター画像にCANVASを使用する

シンボル（symbol）やライン（linestring）は<canvas>を使って描画されます。もし昔の方法（drawgeom.php and wz_jsgraphcs）に戻したい場合は以下のように設定します。

xmlOverlayUseCanvas = false;

[edit] XML文書型定義（DTD）

<!ELEMENT overlay (delete*, point*)>

<!ELEMENT delete EMPTY>

<!ELEMENT point (ihtml?, symbol*, icon*, label*, linestring*, polygon*)>

<!ELEMENT ihtml (#PCDATA)>


<!ELEMENT symbol EMPTY>
<!ELEMENT icon EMPTY>

<!ELEMENT label (#PCDATA)>

<!ELEMENT linestring EMPTY>

<!ELEMENT polygon EMPTY>

<!ATTLIST delete id CDATA #IMPLIED>

<!ATTLIST point id CDATA #REQUIRED>
<!ATTLIST point x CDATA #REQUIRED>
<!ATTLIST point y CDATA #REQUIRED>
<!ATTLIST point redraw (false|true) "false">

<!ATTLIST symbol shape CDATA #IMPLIED>
<!ATTLIST symbol size CDATA #IMPLIED>
<!ATTLIST symbol color CDATA #IMPLIED>
<!ATTLIST symbol bcolor CDATA #IMPLIED>
<!ATTLIST symbol stroke CDATA #IMPLIED>
<!ATTLIST symbol opacity CDATA #IMPLIED>

<!ATTLIST icon src CDATA #REQUIRED>
<!ATTLIST icon w CDATA #REQUIRED>
<!ATTLIST icon h CDATA #REQUIRED>
<!ATTLIST icon px CDATA #IMPLIED>
<!ATTLIST icon py CDATA #IMPLIED>
<!ATTLIST icon opacity CDATA #IMPLIED>

<!ATTLIST label color CDATA #IMPLIED>
<!ATTLIST label boxcolor CDATA #IMPLIED>
<!ATTLIST label w CDATA #IMPLIED>
<!ATTLIST label h CDATA #IMPLIED>
<!ATTLIST label px CDATA #IMPLIED>
<!ATTLIST label py CDATA #IMPLIED>
<!ATTLIST label fsize CDATA #IMPLIED>
<!ATTLIST label font CDATA #IMPLIED>

<!ATTLIST linestring color CDATA #IMPLIED>
<!ATTLIST linestring stroke CDATA #IMPLIED>
<!ATTLIST linestring opacity CDATA #IMPLIED>

<!ATTLIST polygon color CDATA #IMPLIED>
<!ATTLIST polygon bcolor CDATA #IMPLIED>
<!ATTLIST polygon stroke CDATA #IMPLIED>
<!ATTLIST polygon opacity CDATA #IMPLIED>

[edit] XML文書例

<overlay>
 <point x="7435386.24" y="6172463.1" id="p1">
   <label>just a label</label>
   <symbol shape="bullet" size="10" opacity="1" color="#FF0000" />
 </point>
</overlay>

[edit] オーバーレイオブジェクト属性

[edit] ポイント (<point>)

ポイントはオーバーレイレイヤーに表示できる全てのオブジェクトの親のような存在です。オーバーレイレイヤーのどこかに何かを表示させたいと思ったら必ずポイントを定義し、アイコンやシンボル、ラベルを追加しなければなりません。

POINT属性:

id: (文字列、必須) この文字列はポイントを識別するために使われます。ポイントをtranslate、削除、再描画するのに必要です。
x: (数字、必須) 地図単位によるX座標。
y: (数字、必須) 地図単位によるY座標。

[edit] シンボル (kaXmlSymbol, <symbol>)

シンボルはポイントの座標位置に描かれる画像要素です。アイコンに似ていますが、パラメータで色と大きさを指定します。

シンボル属性:

shape: (文字列、省略可) シンボルの形状。現在選択できるのはbulletとsquareのみ。
color: (文字列、省略可) シンボルの色（HTML構文）
bcolor: (文字列、省略可) ボーダーの色（HTML構文）
size: (整数、省略可) シンボルの大きさ（単位はピクセル）
stroke: (整数、省略可) ライン幅（単位はピクセル）
opacity: (数字、省略可) 1.0は塗りつぶし、0.0は完全な透明。

[edit] アイコン (kaXmlIcon, <icon>)

アイコンはポイントの座標位置に描かれます。イメージはURLとして定義されます。アイコンはポイントの座標位置の中心に描かれるので、幅と高さは必ず定義されなければなりません。

アイコン属性

src: (文字列、必須) イメージの相対または絶対URL
w: (整数、必須) イメージの幅（単位はピクセル）
h: (整数、必須) イメージの高さ（単位はピクセル）
px: (整数、省略可) 横方向のオフセット（単位はピクセルで、プラスが右方向）
py: (整数、省略可) 縦方向のオフセット（単位はピクセルで、マイナスが上方向）
opacity: (数字、省略可) 1.0は塗りつぶし、0.0は完全な透明。

[edit] ラベル (kaXmlLabel, <label>)

ラベルはポイントの近くに表示されます。ポイントの座標がラベルの左上の位置です。

ラベル属性

color: (文字列、省略可) テキストの色 (HTML構文)
boxcolor: (文字列、省略可) テキストの背景色 (HTML構文)
w: (整数、省略可) ラベルの幅（単位はピクセル）
h: (整数、省略可) ラベルの高さ（単位はピクセル）
px: (整数、省略可) 横方向のオフセット（単位はピクセルで、プラスが右方向）
py: (整数、省略可) 縦方向のオフセット（単位はピクセルで、マイナスが上方向）
font: (文字列、省略可) テキストのフォント (HTML構文)
fsize: (文字列、省略可) フォントサイズ (HTML構文)
text: (文字列、必須) ラベルのテキスト: この属性はJavaScriptでのみ存在します: XML構文では<label>要素の内容がテキストです。

[edit] ライン(kaXmlLinestring, <linestring>)

この要素は地理座標で表される線であり、地図の縮尺に合わせた大きさで表示されます。座標の形式は以下の通りです。

x0 y0, x1 y1, [...], xn yn

座標を表す文字列はXML文書のテキストノードです。JavaScriptではreadCoordinates()関数によってオブジェクトに渡されます。

ライン属性

color: (文字列、省略可) 線色 (HTML構文)
stroke: (整数、省略可) 線幅（単位はピクセル）
opacity: (数字、省略可) 1.0は塗りつぶし、0.0は完全な透明。

[edit] ポリゴン (kaXmlPolygon, <polygon>)

この要素は地理座標で表されるポリゴンであり、地図の縮尺に合わせた大きさで表示されます。

ポリゴン属性

color: (文字列、省略可) 表面の色 (HTML構文)
bcolor: (文字列、省略可) ボーダー色 (HTML構文)
stroke: (整数、省略可) ボーダー幅（単位はピクセル）
opacity: (数字、省略可) 1.0は塗りつぶし、0.0は完全な透明。

[edit] よくある質問

Error: xmlDocument has no properties

XMLが間違ったmimeタイプでブラウザーに送られています。正しいmimeタイプはtext/xmlです。

.xmlファイルが正しいmimeタイプに関連付けられるようにWebサーバーを設定し直してください。 XMLを動的に作成している場合にはdirectiveを使って正しいmimeタイプを設定してください。

もしPHPスクリプトを使って動的にXMLを作成しているのでしたら以下のコードを最初に加えてください:

<?php
header("Content-Type: text/xml");
header("Cache-Control: no-store, no-cache, must-revalidate");
echo '<?xml version="1.0" encoding="UTF-8"?>'
?>

IE6でexcanvas.jsキャンバスが表示されない

HTMLファイルの最初にを以下のコードを追加してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[edit] TODOリスト

POINTに対するカスタムのクリックイベントやダブルクリックイベントを検討する
オーバーレイポイントにツールチップを加える
ラベル機能を改良する

Retrieved from "http://ka-map.ominiverdi.org/wiki/index.php/Overlay_API_Reference/ja"