Pole
Mapray JS では北極、南極の画像タイルはサポートされていません。そのため、通常では極部分は描画されず黒い穴となります。
Viewer の Pole オプションを利用して、極部分の穴を特定の色で埋めることができます。
Poleオプション
Viewer または、StandardUIViewer のコンストラクタに Pole オプションとして指定します。
| const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
pole: {
north_color: [1.0, 1.0, 1.0],
south_color: [0.5, 0.5, 0.5],
},
});
|
指定できるパタメータは以下の通りです。
| パラメータ |
動作 |
パラメータ詳細 |
| north_color |
北極部分の色を設定します |
RGB 値を各 0.0 ~ 1.0 の範囲で指定します |
| south_color |
南極部分の色を設定します |
RGB 値を各 0.0 ~ 1.0 の範囲で指定します |
| north_height |
北極部分の高さを設定します |
指定しない場合は 高さ0 となります |
| south_height |
北極部分の高さを設定します |
指定しない場合は 高さ0 となります |
その他メソッドや詳細は リファレンスマニュアル を参照してください。
サンプルコード
Pole オプションを使い、北極と南極の色を指定する例を示します。
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 | <!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, {
pole: {
north_color: [1.0, 1.0, 1.0],
south_color: [0.5, 0.5, 0.5],
},
});
// Wait for the initialization process to complete.
await uiviewer.viewer.init_promise;
uiviewer.setCameraPosition({
longitude: 135.0,
latitude: 35.0,
height: 25000000
});
uiviewer.setLookAtPosition({
longitude: 135.0,
latitude: 35.0,
height: 0
});
}
main();
</script>
|