fixed samples

sony · May 31, 2024 · 5832aa7 · 5832aa7
1 parent ac98401
commit 5832aa7
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 2 deletions.
diff --git a/examples/imaginary/ChangeImageTile.js b/examples/imaginary/ChangeImageTile.js
@@ -0,0 +1,88 @@
+// JavaScript source code
+var viewer_Image_Control;
+
+class ViewerImageControl {
+
+    constructor(container) {
+        // Access Tokenを設定
+        this.accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+
+        this.container = container;
+
+        // Viewerを作成する
+        this.viewer = new mapray.Viewer(
+            this.container, {
+                image_provider: this.createImageProvider(),
+                dem_provider: new mapray.CloudDemProvider(this.accessToken)
+            }
+        );
+
+        this.SetCamera();
+    }
+
+    // 画像プロバイダを生成
+    createImageProvider() {
+        //UIのマップタイルを取得
+        var map_Tile_Value = document.getElementById("MapTilePullDown").value;
+
+        if (map_Tile_Value == "std") {
+            // 国土地理院提供の標準地図タイルを設定
+            return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/std/", ".png", 256, 5, 18);
+        } else {
+            // 国土地理院提供の写真タイルを設定
+            return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18);
+        }
+    }
+
+    SetCamera() {
+        // カメラ位置の設定
+
+        // 球面座標系（経度、緯度、高度）で視点を設定。座標は皇居
+        var home_pos = { longitude: 139.7528, latitude: 35.685175, height: 45000 };
+
+        // 球面座標から地心直交座標へ変換
+        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, 0, 7000]);
+        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 = this.viewer.camera.view_to_gocs;
+        mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
+
+        // カメラのnear、farの設定
+        this.viewer.camera.near = 30;
+        this.viewer.camera.far = 1000000;
+    }
+
+    ChangeMapTile() {
+        // Viewerのインスタンスを破棄
+        this.viewer.destroy();
+
+        // Viewerを作成
+        this.viewer = new mapray.Viewer(
+            this.container, {
+                image_provider: this.createImageProvider(),
+                dem_provider: new mapray.CloudDemProvider(this.accessToken)
+            }
+        );
+
+        this.SetCamera();
+    }
+
+}
+
+function CreateViewerImageControlInstance(container) {
+    viewer_Image_Control = new ViewerImageControl(container);
+}
+
+function MapTileValueChanged() {
+    viewer_Image_Control.ChangeMapTile();
+}
diff --git a/examples/imaginary/change_imagetiles.html b/examples/imaginary/change_imagetiles.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Change Tile Images</title>
+        <meta property="og:description" content="Basic Sample for Displaying a Virtual Earth with Mapray" />
+        <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+        <script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
+        <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+        <style>
+            body {margin: 0; padding: 0;}
+            html, body, div#mapray-container { height: 100%; }
+            div#MapTileBox {
+                display: flex;
+                background-color: #E0E0E0;
+                height: 32px;
+                width: 150px;
+                border: inset 1px #000000;
+                align-items: center;
+                float:left;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="mapray-container"></div>
+        <div id="map-tile-box">
+            <p>Map Tile</p>
+            <select name="MapTilePullDown" id="MapTilePullDown" onchange="MapTileValueChanged()">
+                <option value="Photo">Photo</option>
+                <option value="std">Standard</option>
+            </select>
+        </div>
+    </body>
+</html>
+
+<script>
+    // Set up your access token, which can be created in Mapray Cloud.
+    var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+
+    // The StandardUIView in the ui package includes mouse-based camera manipulation.
+    viewer = new maprayui.StandardUIViewer( "mapray-container", accessToken );
+</script>
+
+
diff --git a/examples/pointcloud/display_basic_pointcloud.html b/examples/pointcloud/display_basic_pointcloud.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Basic animation with UI Viewer</title>
+  <meta property="og:description" content="Basic animation sample utilizing Mapray animation engine through UIViewer" />
+  <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+  <script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
+  <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+  <style>
+    body {margin: 0; padding: 0;}
+    html, body, div#mapray-container { height: 100%; }
+  </style>
+</head>
+
+<body>
+<div id="mapray-container"></div>
+</body>
+</html>
+
+<script>
+    class PointCloudView extends maprayui.StandardUIViewer {
+        constructor(container, accessToken, options) {
+            super(container, accessToken, options);
+    }
+}
+    // Set up your access token, which can be created in Mapray Cloud.
+    var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+
+    // The StandardUIView in the ui package includes mouse-based camera manipulation.
+    var uiviewer = new PointCloudView( "mapray-container", accessToken );
+    uiviewer.viewer.render_mode = mapray.Viewer.RenderMode.WIREFRAME;
+    uiviewer.viewer.point_cloud_collection.add(　new mapray.RawPointCloudProvider( {　url: "https://opentiles.mapray.com/pc/raw/virtualshizuoka/mount-fuji/info.json"　} ) );
+
+
+    uiviewer.setCameraPosition({
+    longitude: 138.73011944,
+    latitude: 35.35539722,
+    height: 4200
+  });
+
+  uiviewer.setLookAtPosition({
+    longitude: 138.73133611,
+    latitude:  35.35990555,
+    height: 3776
+  });
+
+
+</script>
diff --git a/old-examples/layer/change/ChangeImageTile.html b/old-examples/layer/change/ChangeImageTile.html
@@ -46,7 +46,7 @@
     <body onload="CreateViewerImageControlInstance('mapray-container');">
         <div id="mapray-container"></div>
 
-        <div id="MapTileBox">
+        <div class="map-overlay top">
             <p>Map Tile</p>
             <select name="MapTilePullDown" id="MapTilePullDown" onchange="MapTileValueChanged()">
                 <option value="Photo">Photo</option>

diff --git a/tsconfig-api-mk.json b/tsconfig-api-mk.json
@@ -77,5 +77,6 @@
     "**/node_modules/**/*",
     "**/dist/**/*",
     "**/debug/**/*",
-  ]
+  ],
+  "membersWithOwnFile": ["Class", "Enum", "Interface"]
 }