Pin Entity¶

ピンエンティティはピンを表示するためのエンティティです。複数のピンを1つのエンティティ内に持つことができ、個々のピンは Entry と呼ばれます。

ピンの種類のほか、サイズや表示色を指定することができます。これらの設定は、エンティティおよび、 Entry 単位で指定できます。

Entry については、こちらを参照してください。

ピンの種類¶

ピンの Entry は3種類あります。それぞれ、追加メソッドにより指定できます。

ピン	内容	追加メソッド
Pin	ピン	addPin
TextPin	文字を含んだピン	addTextPin
MakiIconPin	アイコンを含んだピン	addMakiIconPin

アイコンについて¶

アイコンは Mapbox の Maki icons を Mapray のサイトで配信しています。拡張子（.svg）を除いた名称で指定します。たとえば、家のアイコンであれば home と指定します。

pinEntity.addMakiIconPin( "home", new mapray.GeoPoint( 138.7, 35.3, 3780 ) );

主なメソッド¶

メソッド	動作
setBGColor	背景色を指定します
setFGColor	文字やアイコンの色を指定します
setVisibility	可視性フラグを指定します
setPickable	pick による選択対象とするかを指定します

Warning

表示色は、RGB 値を各 0.0 ~ 1.0 の範囲で指定し、たとえば赤色は entity.setBGColor([1.0, 0.0, 0.0]); のように設定します。

その他メソッドや詳細はリファレンスマニュアルを参照してください。

サンプルコード¶

PinEntity と StandardUIViewer を使い、地表にアイコン Pin オブジェクトを表示する例を示します。 3種類のピンを表示します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
        <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // Set up your apikey, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

    const pinEntity = new mapray.PinEntity( uiviewer.viewer.scene );
    pinEntity.altitude_mode = mapray.AltitudeMode.CLAMP;

    pinEntity.addPin( new mapray.GeoPoint( 138.71934, 35.36, 3780 ), { size: 15 } );
    pinEntity.addTextPin( "Pin", new mapray.GeoPoint( 138.71934, 35.39, 3780 ), { size: 15 } );
    pinEntity.addMakiIconPin( "car", new mapray.GeoPoint( 138.71934, 35.37, 3780 ) );

    uiviewer.viewer.scene.addEntity( pinEntity );
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。