コンテンツにスキップ

Classを使ったプログラミングモデル

maprayJSはゲームエンジンライクな設計思想で設計されています。機能拡張をやりやすいように、基本クラスを派生することで、独自の機能を追加できる仕組みになっています。coreエンジンの機能拡張ももちろんできます。ここでは、このプログラミングモデルを体験するために、StandardUIViewerを拡張してみましょう。maprayJSを使うほぼ全てのエンジニアはStandardUIViewerを拡張したくなりますので、これをクラス化します。

StandardUIViewerの拡張

なぜStandardUIViewerを拡張するのか

StandardUIViewerは、maprayJSの標準的なビューワー実装ですが、プロジェクト固有の要件に応じて以下のような機能を追加したくなります:

  • 独自のカメラ制御
  • カスタムUIの統合
  • 特定のイベント処理
  • アニメーションの追加
  • データの動的な読み込みと更新

基本的な拡張方法

class MyViewer extends mapray.StandardUIViewer {
    constructor(container, access_token, options = {}) {
        super(container, access_token, options);

        // 独自の初期化処理
        this.initializeCustomFeatures();
    }

    initializeCustomFeatures() {
        // カスタム機能の初期化
        console.log("MyViewer initialized");
    }

    // フレーム更新時の処理をオーバーライド
    onUpdateFrame(delta_time) {
        super.onUpdateFrame(delta_time);

        // 独自の更新処理
        this.updateCustomLogic(delta_time);
    }

    updateCustomLogic(delta_time) {
        // 毎フレーム実行される独自の処理
    }

    // カスタムメソッドの追加
    flyToLocation(latitude, longitude, height) {
        const camera = this.viewer.camera;
        // カメラを指定位置に移動
        camera.position.set(longitude, latitude, height);
    }
}

具体的な実装は、この後のハンズオンのコンテンツで幾つかを扱いますので、ここでは、まず、これまで作成したコードをクラス化してみましょう。

 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
48
49
50
<!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>

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

        class CustomViewer extends maprayui.StandardUIViewer {
            constructor(container, access_token, options = {}) {
                super(container, access_token, options);
                this.initEntities();
            }

            initEntities() {
                const pinEntity = new mapray.PinEntity( this.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 ) );
                this.addEntity( pinEntity );
            }
        }

        const uiviewer = new CustomViewer( "mapray-container", apikey);

        uiviewer.setCameraPosition({
                longitude: 138.942423,
                latitude: 35.236020,
                height: 10000
            });
            uiviewer.setLookAtPosition({
                longitude: 138.729802,
                latitude: 35.363965,
                height: 3000
            });
    </script>
</html>

これで、StandarUIViewerの関数をOverrideして機能を拡張することができます。