-
Notifications
You must be signed in to change notification settings - Fork 24
/
LongitudeAndLatitudeCameraPos.html
64 lines (53 loc) · 2.24 KB
/
LongitudeAndLatitudeCameraPos.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LongitudeAndLatitudeCameraPosSample</title>
<script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
<link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
<style>
html, body {
height: 100%;
margin: 0;
}
div#mapray-container {
display: flex;
position: relative;
height: 100%;
}
</style>
</head>
<body>
<div id="mapray-container"></div>
</body>
</html>
<script>
// Access Tokenを設定
var accessToken = "<your access token here>";
// Viewerを作成する
viewer = new mapray.Viewer(
"mapray-container", {
image_provider: new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ),
dem_provider: new mapray.CloudDemProvider(accessToken)
}
);
// カメラ位置の設定
// 球面座標系(経度、緯度、高度)で視点を設定。座標は日本で2番目に高い山
var home_pos = { longitude: 138.247739, latitude: 35.677604, height: 3000 };
// 球面座標から地心直交座標へ変換
var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
// 視線方向を定義
var cam_pos = mapray.GeoMath.createVector3([-3000, 2600, 1000]);
var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
// ビュー変換行列を作成
var view_to_home = mapray.GeoMath.createMatrix();
mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
// カメラの位置と視線方向からカメラの姿勢を変更
var view_to_gocs = viewer.camera.view_to_gocs;
mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
// カメラのnear、farの設定
viewer.camera.near = 30;
viewer.camera.far = 500000;
</script>