全景地图完善

hookehuyr
Commit 659d54edd7df77ed569e266fea1f2405aa2e8200 659d54ed 1 parent 9f156a09
Showing 5 changed files with 115 additions and 4 deletions
package.json
src/components/VRViewer/index.vue
src/components/VRViewer/temp2.webp
src/components/VRViewer/temp3.webp
yarn.lock
--- a/package.json
View file @659d54e
+++ b/package.json
View file @659d54e
@@ -14,6 +14,7 @@
   "dependencies": {
     "@photo-sphere-viewer/core": "^5.2.0",
     "@photo-sphere-viewer/markers-plugin": "^5.2.0",
+    "@photo-sphere-viewer/virtual-tour-plugin": "^5.2.0",
     "@videojs-player/vue": "^1.0.0",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
--- a/src/components/VRViewer/index.vue
View file @659d54e
+++ b/src/components/VRViewer/index.vue
View file @659d54e
 <!--
  * @Date: 2023-08-16 09:29:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-16 10:33:43
+ * @LastEditTime: 2023-08-16 15:16:06
  * @FilePath: /map-demo/src/components/VRViewer/index.vue
  * @Description: 文件描述
 -->
@@ -20,11 +20,33 @@
 </template>
 <script>
+import $ from 'jquery';
 import { Viewer } from '@photo-sphere-viewer/core' // 引入插件
 import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
+import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin';
 import '@photo-sphere-viewer/core/index.css' //引入CSS样式
 import '@photo-sphere-viewer/markers-plugin/index.css'
 import temp_img from './temp1.jpg'
+import temp_img2 from './temp2.webp'
+import temp_img3 from './temp3.webp'
+import { showDialog } from 'vant';
+
+const markerLighthouse = {
+  // polygon marker
+  id: 'polygon',
+  polygon: [
+    [6.2208, 0.0906], [0.0443, 0.1028], [0.2322, 0.0849], [0.4531, 0.0387],
+    [0.5022, -0.0056], [0.4587, -0.0396], [0.252, -0.0453], [0.0434, -0.0575],
+    [6.1302, -0.0623], [6.0094, -0.0169], [6.0471, 0.032], [6.2208, 0.0906],
+  ],
+  svgStyle: {
+    fill: 'rgba(200, 0, 0, 0.2)',
+    stroke: 'rgba(200, 0, 50, 0.8)',
+    strokeWidth: '2px',
+  },
+  tooltip: {
+  },
+};
 export default {
   props: {
@@ -39,6 +61,61 @@ export default {
       if (val && !this.panoramaViewer) {
         this.$nextTick(() => {
           this.initViewer();
+          if ($('.psv-zoom-button').css('display') === 'none') {
+            $('.psv-zoom-button').css('display', '')
+            // $('.psv-zoom-range').css('display', '')
+            $('.psv-move-button').css('display', '')
+          }
+          const markersPlugin = this.panoramaViewer.getPlugin(MarkersPlugin);
+          markersPlugin.addEventListener('select-marker', ({ marker }) => {
+            //
+            if (marker.id === 'polygon') {
+              showDialog({
+                title: '温馨提示',
+                message: '这是一副来自中世纪的古画。',
+                theme: 'round-button',
+              }).then(() => {
+                // on close
+              });
+            }
+          });
+          const virtualTour = this.panoramaViewer.getPlugin(VirtualTourPlugin);
+          virtualTour.setNodes([
+            {
+              id: '1',
+              panorama: temp_img,
+              links: [
+                {
+                  nodeId: '2',
+                  // position: { textureX: 2000, textureY: 1000 },
+                  position: { yaw: -300, pitch: 0 },
+                },
+              ],
+              markers: [markerLighthouse],
+            },
+            {
+              id: '2',
+              panorama: temp_img2,
+              links: [
+                {
+                  nodeId: '3',
+                  // position: { textureX: 1000, textureY: 1000 },
+                  position: { yaw: 0, pitch: 0 },
+                },
+              ],
+            },
+            {
+              id: '3',
+              panorama: temp_img3,
+              links: [
+                {
+                  nodeId: '1',
+                  // position: { textureX: 1000, textureY: 1000 },
+                  position: { yaw: 0, pitch: 0 },
+                },
+              ],
+            },
+          ])
         })
       }
     }
@@ -51,6 +128,7 @@ export default {
         this.panoramaViewer = new Viewer({
           container: document.querySelector('#viewer'), // 容器
           panorama: temp_img,
+          defaultZoomLvl: 0,
           navbar: [
             'zoom',
             'move',
@@ -74,12 +152,11 @@ export default {
                     strokeWidth: '2px',
                   },
                   tooltip: {
-                    content: 'A dynamic polygon marker',
-                    position: 'bottom right',
                   },
                 },
               ],
             }],
+            VirtualTourPlugin,
           ], // 标记点
           size: {
             width: '100%',
@@ -96,6 +173,12 @@ export default {
     onClose () {
       console.warn(1);
       this.$emit('close', false)
+    },
+    onClick () {
+
+      // this.panoramaViewer.addEventListener('click', ({ data }) => {
+      //   console.log(`${data.rightclick ? 'right ' : ''}clicked at yaw: ${data.yaw} pitch: ${data.pitch}`);
+      // });
     }
   }
 }
--- a/src/components/VRViewer/temp2.webp 0 → 100644
View file @659d54e
+++ b/src/components/VRViewer/temp2.webp 0 → 100644
View file @659d54e
--- a/src/components/VRViewer/temp3.webp 0 → 100644
View file @659d54e
+++ b/src/components/VRViewer/temp3.webp 0 → 100644
View file @659d54e
--- a/yarn.lock
View file @659d54e
+++ b/yarn.lock
View file @659d54e
@@ -120,6 +120,15 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
+"@photo-sphere-viewer/compass-plugin@5.2.0":
+  version "5.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/compass-plugin/-/compass-plugin-5.2.0.tgz#7e9d2be1901dc0a18c17684918b96b8e140470b4"
+  integrity sha512-CrBftHR7iTK7a8PK2cJd4ndnS+6bfTiXN8u5BjaYLl0u2RSj3YLxPHC74Y/N/GuaocT+zFzmyR3TKckEs4hJWg==
+  dependencies:
+    "@photo-sphere-viewer/core" "5.2.0"
+  optionalDependencies:
+    "@photo-sphere-viewer/markers-plugin" "5.2.0"
+
 "@photo-sphere-viewer/core@5.2.0", "@photo-sphere-viewer/core@^5.2.0":
   version "5.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/core/-/core-5.2.0.tgz#70cd3904d39f0ff1b24319c0f4685c959d15de66"
@@ -127,13 +136,31 @@
   dependencies:
     three "^0.155.0"
-"@photo-sphere-viewer/markers-plugin@^5.2.0":
+"@photo-sphere-viewer/gallery-plugin@5.2.0":
+  version "5.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/gallery-plugin/-/gallery-plugin-5.2.0.tgz#c4f8a8a998b2a15f310538d4c3a9cb52cfd7c407"
+  integrity sha512-JQHJNTYcF0JER2N1eiVMzN5uc/Fbi2GdsYFtEOaQQc2cs/pO4v/KKrotvE4ZTFLSieg57moSxDnEm82o4gz4nw==
+  dependencies:
+    "@photo-sphere-viewer/core" "5.2.0"
+
+"@photo-sphere-viewer/markers-plugin@5.2.0", "@photo-sphere-viewer/markers-plugin@^5.2.0":
   version "5.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/markers-plugin/-/markers-plugin-5.2.0.tgz#709a4a0848aa86496d2334557c94ac7b05ccc3b5"
   integrity sha512-/0MSl86aNhjWrXpwtnqSkxa5C6UbfiB37/G35qrH7WOx32eQg2R9DIqCrSg1npzxkcr+Cmve57FrCa+WuA3wwQ==
   dependencies:
     "@photo-sphere-viewer/core" "5.2.0"
+"@photo-sphere-viewer/virtual-tour-plugin@^5.2.0":
+  version "5.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/virtual-tour-plugin/-/virtual-tour-plugin-5.2.0.tgz#32419fe510d5de91e783ce56bdf759ef2a1e1244"
+  integrity sha512-57jwrv/wBRbsPxNMp09CVNwbJkBNoO2xryM8sCfP6jF2iNydgMnhKL0KRcAFxwdQTb+cmSRJIcadiugaK+rilQ==
+  dependencies:
+    "@photo-sphere-viewer/core" "5.2.0"
+  optionalDependencies:
+    "@photo-sphere-viewer/compass-plugin" "5.2.0"
+    "@photo-sphere-viewer/gallery-plugin" "5.2.0"
+    "@photo-sphere-viewer/markers-plugin" "5.2.0"
+
 "@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://mirrors.cloud.tencent.com/npm/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"