入力操作を理解する
ここでは、StandardUIViewer にインタラクティブ操作を追加する方法を学習します。
StandardUIViewerのDOM EventをOverrideすることで実現できます。
事前準備
Mapray API Keyを事前にMapray Cloudで取得してください。
ワイヤフレーム表示への切り替え
onKeyboardDownを override し、キーボードの「M」が押された時に、地形のサーフェースをワイヤフレームに切り替えます。
前回のコードからハイライト部分を追加してください。
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81 | <!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; // 起動からの累積時間
this._render_mode = mapray.Viewer.RenderMode.SURFACE; // 描画モードをセット
}
/** @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 viewer = this.viewer;
if ( viewer.render_mode !== this._render_mode ) {
viewer.render_mode = this._render_mode;
}
}
/** @override */
onKeyDown( event ) {
switch ( event.key ) {
case "m": case "M": {
this._render_mode = (
this._render_mode === mapray.Viewer.RenderMode.SURFACE ?
mapray.Viewer.RenderMode.WIREFRAME :
mapray.Viewer.RenderMode.SURFACE
);
} break;
default: {
super.onKeyDown( event );
}
}
}
}
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>
|
Info
このサンプルの方法以外にも onMouseUpでマウスポインタの位置にある地形の高さを取得するなど、インタラクティブ操作ではDOMのインプット系のEventを利用すると可能性が広がります