コンテンツにスキップ

Update Frame

ここでは、StandardUIViewer の描画更新を override でカスタマイズする例を示します。

描画更新をカスタマイズするには、onUpdateFrame を override し、そこに独自の処理を追加します。

onUpdateFrame

onUpdateFrame は 引数として delta_time を受け取ります。これは前回の onUpdateFrame からの経過時間です。 アニメーション処理を行う場合に onUpdateFrame での処理が必要となります。

サンプルソース

onUpdateFrame を override し、経過時間を集計して3秒ごとに pin を追加していきます。

Info

mapray JSには提供方法で複数のバージョンがあります。 Latest VersionではAccess Tokenを簡単に利用できるAPIを準備しているため、そちらのAPIの利用をおすすめしていますので、 Local Latest Versionにサンプルを掲載します。

バージョン 提供方法 アクセス方法 備考
0.9.6 CDN / npm packages API Key 実装がシンプルなため、本ドキュメントでは主にこの形で説明
0.10.x以上 ローカル配布（利用は要問い合わせ） / Github packages Access Token APIにより簡単かつセキュアに利用可能。ローカル配布版で説明を行うが、package版でも利用可能 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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 access token, which can be created in Mapray Cloud.
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
        });

    let elapsedTime = 0;
    let latValue = 0;

    class CustomViewer extends maprayui.StandardUIViewer {
        /** @override */
        onUpdateFrame( delta_time ) {
            super.onUpdateFrame( delta_time );
            elapsedTime += delta_time;
            if ( elapsedTime > 3.0 ) {
                const pin = new mapray.PinEntity( this.viewer.scene );
                pin.altitude_mode = mapray.AltitudeMode.CLAMP;
                pin.addPin( new mapray.GeoPoint( 138.71934, 35.36 + latValue, 3780 ), { size: 15 } );
                this.addEntity( pin );
                elapsedTime = 0;
                latValue += 0.005;
            }
        }
    }

    const uiviewer = new CustomViewer( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
        } );
</script>

Info

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>";

    let elapsedTime = 0;
    let latValue = 0;

    class CustomViewer extends maprayui.StandardUIViewer {
        /** @override */
        onUpdateFrame( delta_time ) {
            super.onUpdateFrame( delta_time );
            elapsedTime += delta_time;
            if ( elapsedTime > 3.0 ) {
                const pin = new mapray.PinEntity( this.viewer.scene );
                pin.altitude_mode = mapray.AltitudeMode.CLAMP;
                pin.addPin( new mapray.GeoPoint( 138.71934, 35.36 + latValue, 3780 ), { size: 15 } );
                this.addEntity( pin );
                elapsedTime = 0;
                latValue += 0.005;
            }
        }
    }

    const uiviewer = new CustomViewer( "mapray-container", apikey);
</script>

Info

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import mapray from "@mapray/mapray-js";
import maprayui from "@mapray/ui";

// Set up your apikey, which can be created in Mapray Cloud.
const apikey = "<YOUR_MAPRAY_API_KEY>";

window.startApp = id => {
    let elapsedTime = 0;
    let latValue = 0;

    class CustomViewer extends maprayui.StandardUIViewer {
        /** @override */
        onUpdateFrame( delta_time ) {
            super.onUpdateFrame( delta_time );
            elapsedTime += delta_time;
            if ( elapsedTime > 3.0 ) {
                const pin = new mapray.PinEntity( this.viewer.scene );
                pin.altitude_mode = mapray.AltitudeMode.CLAMP;
                pin.addPin( new mapray.GeoPoint( 138.71934, 35.36 + latValue, 3780 ), { size: 15 } );
                this.addEntity( pin );
                elapsedTime = 0;
                latValue += 0.005;
            }
        }
    }

    new CustomViewer( id, apikey);
};

Info

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