ベースマップを変更する
地形に貼り付ける画像データは、好きなものを選ぶことができます。
ImageProviderというクラスとそれから派生されたクラスを使うことで画像を変更できます。
Amazon Location Serviceなど、商用のデータプロバイダの場合は、各プロバイダのAPI仕様に沿った
ImageProviderを派生したクラスを実装することで画像データを取得することができます。
StandardImageProvider
オープンデータでよくある、いわゆるXYZ形式の画像タイルは、StandardImageProviderを使うことで自動的に画像タイルを取得します。
ImageProviderはStandardUIViewerの内部で管理されています。。起動中に切り替えることも、
初期化時に設定することもできます。デフォルトでは国土地理院の写真タイルを利用します。
ここでは、キーボードの「S」キーで切り替えてみましょう。
視点も少し下げておきます。
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 | <!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>";
const BaseMapType = {
PHOTO: 'photo',
STANDARD: 'standard'
};
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; // 描画モードをセット
this._base_map_url = BaseMapType.PHOTO; // 現在のベースマップ
}
/** @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;
case "s": case "S": {
this._base_map_url = (
this._base_map_url === BaseMapType.PHOTO ?
BaseMapType.STANDARD :
BaseMapType.PHOTO
);
let image_provider;
if ( this._base_map_url === BaseMapType.PHOTO ) {
image_provider = new mapray.StandardImageProvider( {
url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/",
format: ".jpg",
min_level: 0,
max_level: 18
} );
} else {
image_provider = new mapray.StandardImageProvider( {
url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
format: ".png",
min_level: 2,
max_level: 18
} );
}
this.viewer.setImageProvider( image_provider, true );
} break;
default: {
super.onKeyDown( event );
}
}
}
const uiviewer = new CustomViewer( "mapray-container", apikey );
uiviewer.setCameraPosition({
longitude: 138.942423,
latitude: 35.236020,
height: 5000
});
uiviewer.setLookAtPosition({
longitude: 138.729802,
latitude: 35.363965,
height: 3000
});
}
</script>
</html>
|
Note
StandardImageProviderのオプションで初期化時に指定する方法も確認しておきましょう。