Star¶

Mapray JS では星の表現ができ、基準経度や輝度などを指定することで見え方をコントロールできます。また、星座線や天の川の表示にも対応しています。

星データ¶

恒星や星座は、JSON 形式で恒星と星座の位置や表示色、輝度の情報が含まれたデータファイルを指定し、これをもとに描画されます。

星データの JSON と NASA の天の川のテクスチャ画像を Mapray のサイトで配信しています。 StarVisualizer にこの星データや、天の川のテクスチャ画像を指定することで、星や星座、天の川の外観を自由に設定できます。

new mapray.StarVisualizer(
    json_url="https://resource.mapray.com/assets/data/star75.json",
    milkyway_image_src="https://resource.mapray.com/assets/images/starmap_512n2.jpg"
)

Info

NASA/Goddard Space Flight Center Scientific Visualization Studio. Gaia DR2: ESA/Gaia/DPAC. Constellation figures based on those developed for the IAU by Alan MacRobert of Sky and Telescope magazine (Roger Sinnott and Rick Fienberg).

主なメソッド¶

StarVisualizer クラスの主なメソッドは以下の通りです。

メソッド	動作	パラメータ詳細
setLongitude	基準経度を指定します	J2000.0 を 0度とした度数 (Degree)
setIntensity	輝度係数を指定します	-2.0 を基本とし、必要に応じて、 ~ 1.2 までの倍率で調整します
setVisibility	可視性フラグを指定します	true / false
setLineColor	星座線の表示色を指定します	RGB 値 (各 0.0 ~ 1.0 に正規化した値)
setConstellationVisibility	星座線の可視性フラグを指定します	true / false
setMilkyWayIntensity	天の川の輝度係数を指定します	1.0 を基本とし、必要に応じて、 0.0 ~ 1.0 程度の倍率で調整します
setMilkyWayVisibility	天の川の可視性フラグを指定します	true / false, 通常は false

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

基準経度について¶

setLongitude で角度を指定することで、星や星座の位置を回転させることができます。 J2000.0 を 0度とした基準で GOCS の Z 軸を中心に回転させて描画されます。

viewer.starVisualizer.setLongitude( 90.0 );

サンプルコード¶

ここでは、 StarVisualizer を使い、星や星座、天の川を表示する例を示します。

<!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>
    async function main() {
        // Set up your API Key, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
            star_visualizer: new mapray.StarVisualizer(
                json_url="https://resource.mapray.com/assets/data/star75.json",
                milkyway_image_src="https://resource.mapray.com/assets/images/starmap_512n2.jpg"
            ),
        });

        // Wait for the initialization process to complete.
        await uiviewer.viewer.init_promise;
        // Star
        uiviewer.viewer.starVisualizer.setLongitude( 90 );
        uiviewer.viewer.starVisualizer.setIntensity( -1.5 );
        // Constellation
        uiviewer.viewer.starVisualizer.setConstellationVisibility( true );
        uiviewer.viewer.starVisualizer.setLineColor( [ 0.15, 0.25, 0.5 ] );
        // Milkyway
        uiviewer.viewer.starVisualizer.setMilkyWayIntensity( 1.5 );

        uiviewer.setCameraPosition({
            longitude: 138.68776,
            latitude: 35.18929,
            height: 2250
        });

        uiviewer.setLookAtPosition({
            longitude: 138.724949,
            latitude: 35.363787,
            height: 3000
        });
    }

    main();
</script>

Info

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