Skip to content

Commit 5832aa7

Browse files
daisuke201daisuke201
committed
fixed samples
1 parent ac98401 commit 5832aa7

File tree

5 files changed

+187
-2
lines changed

5 files changed

+187
-2
lines changed

‎examples/imaginary/ChangeImageTile.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
// JavaScript source code
2+
var viewer_Image_Control;
3+
4+
class ViewerImageControl {
5+
6+
constructor(container) {
7+
// Access Tokenを設定
8+
this.accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
9+
10+
this.container = container;
11+
12+
// Viewerを作成する
13+
this.viewer = new mapray.Viewer(
14+
this.container, {
15+
image_provider: this.createImageProvider(),
16+
dem_provider: new mapray.CloudDemProvider(this.accessToken)
17+
}
18+
);
19+
20+
this.SetCamera();
21+
}
22+
23+
// 画像プロバイダを生成
24+
createImageProvider() {
25+
//UIのマップタイルを取得
26+
var map_Tile_Value = document.getElementById("MapTilePullDown").value;
27+
28+
if (map_Tile_Value == "std") {
29+
// 国土地理院提供の標準地図タイルを設定
30+
return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/std/", ".png", 256, 5, 18);
31+
} else {
32+
// 国土地理院提供の写真タイルを設定
33+
return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18);
34+
}
35+
}
36+
37+
SetCamera() {
38+
// カメラ位置の設定
39+
40+
// 球面座標系（経度、緯度、高度）で視点を設定。座標は皇居
41+
var home_pos = { longitude: 139.7528, latitude: 35.685175, height: 45000 };
42+
43+
// 球面座標から地心直交座標へ変換
44+
var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
45+
var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
46+
47+
// 視線方向を定義
48+
var cam_pos = mapray.GeoMath.createVector3([0, 0, 7000]);
49+
var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
50+
var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
51+
52+
// ビュー変換行列を作成
53+
var view_to_home = mapray.GeoMath.createMatrix();
54+
mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
55+
56+
// カメラの位置と視線方向からカメラの姿勢を変更
57+
var view_to_gocs = this.viewer.camera.view_to_gocs;
58+
mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
59+
60+
// カメラのnear、farの設定
61+
this.viewer.camera.near = 30;
62+
this.viewer.camera.far = 1000000;
63+
}
64+
65+
ChangeMapTile() {
66+
// Viewerのインスタンスを破棄
67+
this.viewer.destroy();
68+
69+
// Viewerを作成
70+
this.viewer = new mapray.Viewer(
71+
this.container, {
72+
image_provider: this.createImageProvider(),
73+
dem_provider: new mapray.CloudDemProvider(this.accessToken)
74+
}
75+
);
76+
77+
this.SetCamera();
78+
}
79+
80+
}
81+
82+
function CreateViewerImageControlInstance(container) {
83+
viewer_Image_Control = new ViewerImageControl(container);
84+
}
85+
86+
function MapTileValueChanged() {
87+
viewer_Image_Control.ChangeMapTile();
88+
}

‎examples/imaginary/change_imagetiles.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Change Tile Images</title>
7+
<meta property="og:description" content="Basic Sample for Displaying a Virtual Earth with Mapray" />
8+
<script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
9+
<script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
10+
<link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
11+
<style>
12+
body {margin: 0; padding: 0;}
13+
html, body, div#mapray-container { height: 100%; }
14+
div#MapTileBox {
15+
display: flex;
16+
background-color: #E0E0E0;
17+
height: 32px;
18+
width: 150px;
19+
border: inset 1px #000000;
20+
align-items: center;
21+
float:left;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<div id="mapray-container"></div>
28+
<div id="map-tile-box">
29+
<p>Map Tile</p>
30+
<select name="MapTilePullDown" id="MapTilePullDown" onchange="MapTileValueChanged()">
31+
<option value="Photo">Photo</option>
32+
<option value="std">Standard</option>
33+
</select>
34+
</div>
35+
</body>
36+
</html>
37+
38+
<script>
39+
// Set up your access token, which can be created in Mapray Cloud.
40+
var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
41+
42+
// The StandardUIView in the ui package includes mouse-based camera manipulation.
43+
viewer = new maprayui.StandardUIViewer( "mapray-container", accessToken );
44+
</script>
45+
46+

‎examples/pointcloud/display_basic_pointcloud.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Basic animation with UI Viewer</title>
7+
<meta property="og:description" content="Basic animation sample utilizing Mapray animation engine through UIViewer" />
8+
<script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
9+
<script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
10+
<link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
11+
<style>
12+
body {margin: 0; padding: 0;}
13+
html, body, div#mapray-container { height: 100%; }
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div id="mapray-container"></div>
19+
</body>
20+
</html>
21+
22+
<script>
23+
class PointCloudView extends maprayui.StandardUIViewer {
24+
constructor(container, accessToken, options) {
25+
super(container, accessToken, options);
26+
}
27+
}
28+
// Set up your access token, which can be created in Mapray Cloud.
29+
var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
30+
31+
// The StandardUIView in the ui package includes mouse-based camera manipulation.
32+
var uiviewer = new PointCloudView( "mapray-container", accessToken );
33+
uiviewer.viewer.render_mode = mapray.Viewer.RenderMode.WIREFRAME;
34+
uiviewer.viewer.point_cloud_collection.add(　new mapray.RawPointCloudProvider( {　url: "https://opentiles.mapray.com/pc/raw/virtualshizuoka/mount-fuji/info.json"　} ) );
35+
36+
37+
uiviewer.setCameraPosition({
38+
longitude: 138.73011944,
39+
latitude: 35.35539722,
40+
height: 4200
41+
});
42+
43+
uiviewer.setLookAtPosition({
44+
longitude: 138.73133611,
45+
latitude: 35.35990555,
46+
height: 3776
47+
});
48+
49+
50+
</script>

‎old-examples/layer/change/ChangeImageTile.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<body onload="CreateViewerImageControlInstance('mapray-container');">
4747
<div id="mapray-container"></div>
4848

49-
<div id="MapTileBox">
49+
<div class="map-overlay top">
5050
<p>Map Tile</p>
5151
<select name="MapTilePullDown" id="MapTilePullDown" onchange="MapTileValueChanged()">
5252
<option value="Photo">Photo</option>

‎tsconfig-api-mk.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,6 @@
7777
"**/node_modules/**/*",
7878
"**/dist/**/*",
7979
"**/debug/**/*",
80-
]
80+
],
81+
"membersWithOwnFile": ["Class", "Enum", "Interface"]
8182
}

0 commit comments

Comments
 (0)