Cloud
Mapray JS では宇宙から見た雲の表現ができます。
雲表現用の画像を元に、一定の高さに描画されることで表現されます。
主なメソッド
CloudVisualizer クラスの主なメソッドは以下の通りです。
| メソッド |
動作 |
パラメータ詳細 |
| loadData |
From, To に画像を設定します |
|
| loadFrom |
From に画像を設定します |
|
| loadTo |
To に画像を設定します |
|
| pushBack |
To に画像を設定します |
|
| pushFront |
From に画像を設定します |
|
| setFade |
フェード係数を設定します |
フェード係数 (0.0 - 1.0) 1でfromの画像 |
| setGradient |
コンター表現を設定します |
|
| setIntensity |
輝度係数を設定します |
輝度係数 (0, 1) 1で陰部分の影響を受けなくなります |
| setVisibility |
可視性フラグを指定します |
true / false |
Note
From To の2つの画像を持つことができ、フェード係数で画像を補間して表示することができます。
その他メソッドや詳細は リファレンスマニュアル を参照してください。
雲表現用画像データ
CloudVisualizer で使用する画像は 1440 x 722 ピクセルで地球全体を覆うように表現されます。画素は グレースケール 8bit で、白(255) に近いほど濃い雲として表現されます。
サンプルコード
CloudVisualizer を使い、雲を表示する例を示します。
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 | <!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>
async function main() {
// Set up your API Key, which can be created in Mapray Cloud.
const apikey = "<YOUR_MAPRAY_API_KEY>";
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
cloud_visualizer: new mapray.CloudVisualizer(),
});
// Wait for the initialization process to complete.
await uiviewer.viewer.init_promise;
uiviewer.viewer.cloudVisualizer.loadFrom( "https://resource.mapray.com/assets/data/cloud_0.png", 0.0 );
uiviewer.setCameraPosition({
longitude: 135.0,
latitude: 35.0,
height: 25000000
});
uiviewer.setLookAtPosition({
longitude: 135.0,
latitude: 35.0,
height: 0
});
}
main();
</script>
|