継承による機能カスタマイズ
前回、StandardUIViewerをクラス化しました。
ここでは、StandardUIViewer の描画更新を override でカスタマイズしてみましょう。
描画更新をカスタマイズするには、onUpdateFrame を override し、そこに独自の処理を追加します。
クラス化したことの恩恵を体験してみましょう。
事前準備
Mapray API Keyを事前にMapray Cloudで取得してください。
onUpdateFrame
onUpdateFrame は 引数として delta_time を受け取ります。これは前回の onUpdateFrame からの経過時間です。
例えば、この時間を計算することで、フレームレートを計算したり、アニメーションを行ったりできます。
onUpdateFrame はリアルタイムコンピュータグラフィックスエンジンのレンダリングループを1フレーム毎に制御できる大変重要な関数です。
Tips
onUpdateFrameで追加する処理は細心の注意が必要です。ここでの計算コストは、描画全体のパフォーマンスに大きな影響を与えます。例えば、console.logのようなデバッグ文を残しておくだけでも、パフォーマンスに影響します。
特定の時間毎に、時間制限をかけてPinEntityを作成する
これまでプログラムスタート時にPinEntityを作成していましたが、ここで、アプリケーションが起動してから3秒に一度Pinを打ち、15秒したら打つのをやめるコードに変更します。
ついでに、PinEntityをオレンジにしてみます。
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
51
52
53
54
55
56
57
58
59 | <!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.elapsedTime = 0; // Pin作成時間計算用
this.latValue = 0;
this.totalTime = 0; // 起動からの累積時間
}
/** @override */
onUpdateFrame( delta_time ) {
super.onUpdateFrame( delta_time );
this.totalTime += delta_time;
this.elapsedTime += delta_time;
if ( this.elapsedTime > 3.0 && this.totalTime < 15.0 ) {
const pin = new mapray.PinEntity( this.viewer.scene );
pin.altitude_mode = mapray.AltitudeMode.CLAMP;
pin.addPin( new mapray.GeoPoint( 138.71934, 35.36 + this.latValue, 3780 ), { size: 15 } );
pin.setBGColor([1.0, 0.5, 0.0]);
this.addEntity( pin );
this.elapsedTime = 0;
this.latValue += 0.005;
}
}
}
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>
|