Night Layer
Mapray JS では、Layer の応用機能として Night Layer 機能を用意しています。これは、夜間テクスチャを用いて、太陽の位置関係に基づいて夜部分にのみタイル画像を重ねて適用することができる機能です。
サンプルコード
Mapray のサイトでは、夜テクスチャとして NASA の NightLights のタイル画像を配信しています。
ここでは、このタイル画像を Night Layer として適用し、夜間表現を行う例を示します。
画像レイヤーの追加時に draw_type: mapray.ImageLayer.DrawType.NIGHT を指定します。
その他のパラメータは、通常の画像レイヤー同様に、 mapray.ImageLayer.Option を参照してください。
レイヤー作成後に ImageLayer クラスのメソッドでパラメータの変更ができます。
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 | <!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, {
atmosphere: new mapray.Atmosphere(),
sun_visualizer: new mapray.SunVisualizer(),
// Night Layer
layers: [{
type: mapray.Layer.Type.IMAGE,
draw_type: mapray.ImageLayer.DrawType.NIGHT,
image_provider: new mapray.StandardImageProvider({
url: "https://opentiles.mapray.com/xyz/night-satellite/",
min_level: 0,
max_level: 8
}),
}]
});
// Wait for the initialization process to complete.
await uiviewer.viewer.init_promise;
// Set the sun position.
const theta = - Math.PI / 180.0 * 125.0;
uiviewer.viewer.sun.setSunDirection( [ Math.cos(theta), Math.sin(theta), 0 ] );
uiviewer.setCameraPosition({
longitude: 140.338153,
latitude: 21.023015,
height: 1120840
});
uiviewer.setLookAtPosition({
longitude: 135.664345,
latitude: 38.239194,
height: 13
});
}
main();
</script>
|