Image Layer
Mapray JS は地表面に表示する画像について、タイル画像として任意の画像を表示できます。
また、レイヤーとしてタイル画像を重ねることも可能です。
タイル画像とは
Image Layer で使用するデータはタイル状に画像を並べたものです。
国土地理院の 地理院タイル と互換性があり、簡単に表示できます。
地図画像変更サンプルコード
Mapray JS ではデフォルトの地図画像として国土地理院の 全国最新写真 を表示しています。
ここでは 標準地図 に変更する例を示します。
変更するには StandardUIViewer のコンストラクタの引数として指定します。
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>
// Set up your Organization Token, which can be created in Mapray Cloud.
const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
dem_provider: new mapray.StandardDemProvider( {
prefix: "https://tiles.mapray.com/dem/",
headers: { Authorization: "Bearer " + accessToken }
} ),
image_provider: new mapray.StandardImageProvider( {
url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
format: ".png",
min_level: 0,
max_level: 18
})
});
uiviewer.setCameraPosition({
longitude: 138.73133611,
latitude: 35.35990555,
height: 5000000
});
uiviewer.setLookAtPosition({
longitude: 138.73133611,
latitude: 35.35990555,
height: 3776
});
</script>
|
<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudのアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。
Note
Viewer.setImageProvider を用いて、動作中に地図画像を切り替えることもできます
Layer 表示サンプルコード
ここでは、国土地理院の 標準地図 をレイヤーに追加して表示する例を示します。
またレイヤーの透過度を 50% に設定します。
StandardImageProvider の引数として、使用するタイル画像の拡張子（.png または .jpg）とズームレベルを指定しています。
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./v0.10.6/mapray.min.js"></script>
<script src="./v0.10.6/maprayui.min.js"></script>
<link rel="stylesheet" href="./v0.10.6/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 Organization Token, which can be created in Mapray Cloud.
const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
// The StandardUIViewer in the ui package includes mouse-based camera manipulation.
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
dem_provider: new mapray.StandardDemProvider( {
prefix: "https://tiles.mapray.com/dem/",
headers: { Authorization: "Bearer " + accessToken }
} )
} );
await uiviewer.addLayer( new mapray.StandardImageProvider( {
url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
format: ".png",
min_level: 2,
max_level: 18
}));
uiviewer.viewer.layers.getLayer(0).setOpacity( 0.5 );
uiviewer.setCameraPosition({
longitude: 138.73133611,
latitude: 35.35990555,
height: 5000000
});
uiviewer.setLookAtPosition({
longitude: 138.73133611,
latitude: 35.35990555,
height: 3776
});
}
main();
</script>
|
Warning
レイヤー追加は非同期で処理されるため、 await や then で追加処理完了を待ってからレイヤーに対する処理を行う必要があります。
実行結果