Text Entity¶

テキストエンティティは、文字を表示するためのエンティティです。複数のテキストを1つのエンティティ内に持つことができ、個々のテキストは Entry と呼ばれます。 addText メソッドでエンティティにテキストを追加します。

テキスト内容のほか、フォントサイズや表示色を指定することができます。これらの設定は、エンティティおよび、 Entry 単位で指定できます。

Note

フォントサイズや表示色をエンティティと Entry で指定された場合は、 Entry の指定が優先されます。
可視性フラグ（Visibility）と選択対象（Pickable）は エンティティのみ で設定可能で、エンティティ内で一意となります。

主なメソッド¶

メソッド	動作
addText	Text の Entry を追加します
setFontSize	フォントサイズを指定します
setColor	フォントの色を指定します
setVisibility	可視性フラグを指定します
setPickable	pick による選択対象とするかを指定します

Warning

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

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

サンプルコード¶

TextEntity を使い、シーンに2つのテキストを表示する例です。

<!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 entity = new mapray.TextEntity( uiviewer.viewer.scene );

    entity.addText( "富士山",
                    new mapray.GeoPoint( 138.72934, 35.36240, 3800 ),
                    { color: [ 1, 1, 0 ], font_size: 30 } );

    entity.addText( "愛鷹山",
                    new mapray.GeoPoint( 138.80689, 35.19794, 1520 ),
                    { color: [ 0, 1, 1 ], font_size: 25 } );

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

Info

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

テキスト縁の設定¶

テキストに縁を描画するには TextEntity.setEnableStroke でテキストの縁を有効化し、 TextEntity.setStrokeLineWidth や TextEntity.setStrokeColor で見え方を指定します。

entity.setEnableStroke( true );
entity.setStrokeLineWidth( 2 );
entity.setStrokeColor( [ 1, 0, 0 ] );

Entry¶

一部の Entity は中に複数のアイテムを持つことができ、Entry として個々を管理します。

Entry 単位で、各テキスト要素のスタイルや表示色を個別に設定する方法を示します。 Entry で設定された値は Entity での設定より優先されます。Entry で値が設定されていない場合には Entity の値が使用されます。

設定は以下のように複数の方法があります。

`addText` メソッドのオプションを使って指定する方法¶

addText のような Entry を追加するメソッドにオプションとして指定することができます。

entity.addText( "富士山", new mapray.GeoPoint( 138.72934, 35.36240, 3800 ), { color: [ 1, 1, 0 ], font_size: 30 } );

ID を設定して後から特定の `Entry` にアクセスする方法¶

Entry には ID を文字列で設定することができます。

entity.addText( "愛鷹山", new mapray.GeoPoint( 138.80689, 35.19794, 1520 ), { id: "ashitaka" } );
entity.getEntry( "ashitaka" ).setColor( [ 0, 1, 1 ] );
entity.getEntry( "ashitaka" ).setFontSize( 25 );

`addText` の戻り値で得られる `Entry` からアクセスする方法¶

addText のような Entry を追加するメソッドの戻り値は Entry になります。

const hakone_entry = entity.addText( "箱根山", new mapray.GeoPoint( 139.016413, 35.235339, 1438 ) );
hakone_entry.setColor( [ 1, 0, 1 ] );
hakone_entry.setFontSize( 20 );