/
AddPin.html
86 lines (68 loc) · 3.01 KB
/
AddPin.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AddPinSample</title>
<script src="https://resource.mapray.com/mapray-js/v0.9.4/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("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18),
dem_provider: new mapray.CloudDemProvider(accessToken)
}
);
// 球面座標系(経度、緯度、高度)で視点を設定。皇居と東京駅と東京タワーの中心点付近
var home_pos = { longitude: 139.753175, latitude: 35.653943, height: 500 };
// 球面座標から地心直交座標へ変換
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([0, -2000, 500]);
var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
// ビュー変換行列を作成
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;
// ピンのエンティティを作成
var pin_Entity = new mapray.PinEntity(viewer.scene);
// 皇居の座標を設定
var fast_Pin_Point = new mapray.GeoPoint(139.7528, 35.685175, 13);
// ピンを追加
pin_Entity.addPin(fast_Pin_Point, { size: 40, bg_color: [1, 0, 0] });
// 東京駅の座標を設定
var second_Pin_Point = new mapray.GeoPoint(139.767141, 35.681247, 3);
// Makiアイコンピンを追加
pin_Entity.addMakiIconPin("rail-15", second_Pin_Point, { size: 40, bg_color: [0, 1, 0] });
// 東京タワーの座標を設定
var third_Pin_Point = new mapray.GeoPoint(139.745440, 35.658594, 3);
// テキストピンを追加
pin_Entity.addTextPin("T", third_Pin_Point, { size: 40, bg_color: [0, 0, 1] });
// エンティティをシーンに追加
viewer.scene.addEntity(pin_Entity);
</script>