ImageIcon Entity¶

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

アイコンを配置する座標のほか、画像の大きさや原点位置などを指定できます。これらの設定は、エンティティおよび、 Entry 単位で指定できます。

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

主なメソッド¶

メソッド	動作
addImageIcon	画像アイコンの Entry を追加します
setOrigin	画像アイコンの原点位置を指定します
setSize	画像アイコンのピクセルサイズを指定します
setVisibility	可視性フラグを指定します
setPickable	pick による選択対象とするかを指定します

Note

画像アイコンは、原点位置を基準に addImageIcon で指定された座標に配置されます。原点位置は、画像の左上を (0, 0) 、右下を (1, 1) とする値で指定し、デフォルトでは、画像の中央 (0.5, 0.5) となっています。
ピクセルサイズは、大きさ（縦、横）のピクセル値を指定し、デフォルトでは、(30, 30) となっています。

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

サンプルコード¶

ImageIconEntity を使い、地表に画像アイコンを表示する例を示します。

TokyoTower img

このサンプルコードでは、html と同じディレクトリに配置された東京タワーの画像を画像アイコンとして表示します。

<!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 imageIcon = new mapray.ImageIconEntity( uiviewer.viewer.scene );
    imageIcon.altitude_mode = mapray.AltitudeMode.CLAMP;

    // Added Tokyo Tower image icon.
    imageIcon.addImageIcon( "./TokyoTower.jpg", new mapray.GeoPoint( 139.745340, 35.658694, 10 ), { size: [300, 200] } );
    imageIcon.setOrigin( [ 0.5, 1.0 ] );

    uiviewer.viewer.scene.addEntity( imageIcon );

    uiviewer.setCameraPosition({
        longitude: 139.74871,
        latitude: 35.64840,
        height: 800
    });

    uiviewer.setLookAtPosition({
        longitude: 139.745340,
        latitude: 35.658694,
        height: 100
    });
</script>

Info

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

Warning

サンプルコードをローカル PC で直接 html ファイルをブラウザで開くと、 CORS により画像が表示されません。 Python 等で簡易 HTTP サーバを立ち上げて、サーバ経由で html ファイルを開いてください。