PointSprite

ポイントスプライトのクラス
GL図形クラス。
大量のポイント・マーカーを地図上に重畳したい時に使用します。

※ポイントの描画順制御は不可能
　PointSpriteはWebGLが描画内容を最適化したものを描画するため、描画順を制御する事ができません。

Constructor

new ZDC.PointSprite(PSData, optionsopt)

ポイントスプライトクラスを作成します。
zIndex(重なり順)のdefault値は100。

Parameters

名前 説明
PSData
Array.<Array.<number, number, number>> 		ポイントスプライトデータ
[PSID, lat, lng] の構造配列の配列
　PSID： ポイントスプライトID　※重複のない 1~16777215 の整数
　lat： 緯度　※十進度、世界測地系
　lng： 経度　※十進度、世界測地系
※LatLngクラスの指定ではなく、緯度と経度を個別の要素に入力する必要があるためご注意ください
options(optional)
Object
default {}		 オプション設定
名前 説明
styleId
number
default 1		 表示するポイントスプライトのスタイルのID
srcで独自アイコンが指定されている場合はそちらを優先して描画します。
src
string		 表示するポイントスプライトの独自アイコン画像のURL
画像の中心がポイントスプライトデータで指定した緯度経度となります。
画像をオフセットさせる場合は、offsetで設定可能です。
リクエスト先のサーバー側でオリジン間リソース共有(CORS)に対応する設定が必要です。
size
number
default 16		 ポイントスプライトを描画するピクセルサイズ
1~64 の整数
color
Array.<number>
default [0,0,0,0]		 カラーフィルター
[R,G,B,A]の配列
0.0～1.0の値を指定
Aはカラーフィルター適用率
opacity
number
default 1.0		 不透明度
0.0～1.0の値を指定
0が透明
1が不透明
offset
Point
default null		 ポイントスプライトのオフセット値
各ポイントの中心点を基準として、指定したPointのピクセル分ずらして表示します。
Xは右を正
Yは下を正
draw
string
default 'high'		 アンダーレイ描画指定
指定したレイヤーにウィジェットを描画します。
'high'：背景図の上
'middle'：背景図のラベルと図形の間
'low'：背景図の下

※このオプションはベクトルモード時のみ対応（WMTSラスタモード時は非対応）
propagation
Boolean
default false		 イベントの地図伝搬フラグ
trueの場合このウィジェット上で起きたイベントをMapにも伝搬します。

Example

// ポイントスプライトデータを作成
const PSData = [
  [1, 35.6811501736111,139.765968424479],
  [2, 35.6811501736111,139.766968424479],
  [3, 35.6811501736111,139.767968424479],
];

// オプションを定義
const options = {
  propagation: true
};

// ポイントスプライトを作成
const pointSprite = new ZDC.PointSprite(PSData, options);

// ポイントスプライトを地図オブジェクト(map)に追加
map.addWidget(pointSprite);

Methods

addEventListener(eventName, listener)

イベントリスナーを登録します。

Parameters
eventName(string)
　イベントの種類を表す文字列。
　Map Eventsを参照(マウス操作イベントとタッチ操作イベントのみ対応)
listener(function)
　登録するイベントリスナー。
　イベントリスナーの引数はMap Eventsを参照して下さい。

Example
PointSprite.addEventListener('click', function(type, latLng, point) {
　// 処理
});
removeEventListener(eventName, listener)

登録したイベントリスナーを削除します。

Parameters
eventName(string)
　イベントの種類を表す文字列。
　Map Eventsを参照(マウス操作イベントとタッチ操作イベントのみ対応)
listener(function)
　削除するイベントリスナー
getId()

idを取得します。

Returns
Type:string
idを返却します。
hide()

非表示にします。

show()

表示します。

getLatLng(PSID)

ポイントスプライトIDを指定して該当するポイントの緯度経度を取得します。

Parameters
PSID(number)
　ポイントスプライトID

Returns
Type:LatLng
表示位置を返却します。
該当ポイントスプライトIDが存在しない場合はnullを返却します。
getPSData()

設定されているポイントスプライトデータを取得します。

getPSID(point)

指定地点Point(x.y)に該当するポイントスプライトIDを取得します。
指定地点に複数のデータが重なっている場合、取得するポイントスプライトIDは最上位に描画された一つのみです。

Parameters
point(Point)
地図領域の左上を原点とした画面座標

Returns
Type:number
ポイントスプライトIDを返却します。
該当地点にデータが存在しない場合はnullを返却します。
地図表示領域外の座標を指定された場合は、その座標にデータがあった場合でもnullを返却します。
setLatLng(PSID, lat, lng)

ポイントスプライトIDを指定して該当するポイントの緯度経度を設定します。
設定後にすべてのポイントを再描画します。

Parameters
PSID(number)
　ポイントスプライトID
lat(number)
　緯度　※十進数、世界測地系
lng(number)
　経度　※十進数、世界測地系
setOptions(options)

オプションを設定します。

Parameters
options(Object)
オプション設定。constructorのoptionsと同じ。
setPSData(PSData)

ポイントスプライトデータを設定する。
設定後にすべてのポイントを再描画する。

Parameters
PSData(Array.<Array.<number,number,number>>)
ポイントスプライトデータ。constructorのPSDataと同じ。
setZIndex(zIndex)

重なりの順序を設定する。
GLレイヤー、アンダーレイ描画指定ごとに設定される。
zIndexの値に関係なく、GL図形はHTMLウィジェットより常に下に描画される。

Parameters
zIndex(number) default 100
　重なり順
　大きい数字であれば手前、小さい場合は奥に配置されます。

Throws

zIndexが0以下の場合、エラーとなります。

PointSprite Style ID

ID アイコン画像
1 画像