全景功能

src/components/PanoList.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="pano-list">
+  <div
+    v-if="catalogTopology"
+    class="pano-list"
+  >
     <menu>
       <div class="first-line">
         <div class="tab-wrap">
@@ -56,6 +59,7 @@
           v-for="(scene) in sceneList"
           :key="scene.id"
           class="scene"
+          @click="onClickScene(scene)"
         >
           <img
             :src="scene.icon"
@@ -102,6 +106,9 @@ export default {
       }
     }
   },
+  mounted() {
+    console.log('catalogTopology: ', this.catalogTopology)
+  },
   methods: {
     onClickFirstLineBtn(index) {
       this.firstLineActiveIdx = index
@@ -112,11 +119,11 @@ export default {
     },
     onClickClose: globalUtils.throttle(function() {
       this.$router.go(-1)
-    }, 1000)
+    }, 1000),
+    onClickScene: globalUtils.throttle(function(scene) {
+      this.$router.replace({ name: 'PanoView', params: { scene } })
+    }, 1000),
   },
-  mounted() {
-    console.log('sfksgklsdlf', this.catalogTopology)
-  }
 }
 </script>
 

src/libs/pano-core/utils.js

@@ -153,23 +153,10 @@ export default class Utils {
    * 打开热点链接
    */
 
-  linkopen(sceneCode,id){
-
-    if (window.location.pathname.indexOf('show')>-1) {
-      vue.$bus.emit('clickHotspot',id)
-    }
-    else if (window.location.pathname.indexOf('edit')>-1) {
-      vue.$bus.emit('openHotspot',id)
-    }
-    else{
-      window.parent.postMessage({ event: 'hotspot', targetCode: sceneCode },'*')
-    }
-   
+  linkopen(sceneCode, id){
+    // vue.$bus.emit('clickHotspot', id)
+    vue.$msgCenter.publish('clickHotspot', id)
   }
-
-  
-
-  
   
   /**
    * 初始化

src/router/index.js

@@ -58,12 +58,16 @@ const routes = [
     },
     children: [
       {
-        path: './pano-list',
+        path: '/pano-list',
         name: 'PanoList',
         component: PanoList,
         meta: {
           isShowBottomBar: false,
           canFullScreen: false,
+        },
+        beforeEnter(to, from, next) {
+          console.log('sdfslkfjsifgjlksfd')
+          next()
         }
       },
     ],
@@ -78,7 +82,7 @@ const routes = [
     },
     children: [
       {
-        path: './pano-list',
+        path: '/pano-list',
         name: 'PanoList',
         component: PanoList,
         meta: {
@@ -98,7 +102,7 @@ const routes = [
     },
     children: [
       {
-        path: './relic-detail',
+        path: '/relic-detail',
         name: 'RelicDetail',
         component: RelicDetail,
         meta: {

src/views/ObliqueView.vue

@@ -34,6 +34,9 @@ export default {
   computed: {
     ...globalMapState([
       'panoData',
+    ]),
+    ...globalMapGetters([
+      'catalogTopology',
     ])
   },
   watch: {},
@@ -222,14 +225,11 @@ export default {
         },
       })
       graphic.on(mars3d.EventType.click, () => {
-        this.cutVr("fd720_WoDGV0K2r", 13)
+        this.$router.push({ name: 'PanoView', params: { scene: this.catalogTopology[0].children[0].children[11] } })
       })
 
       _layer.addGraphic(graphic)
     },
-    cutVr(code, index) {
-      this.$emit("mapCutVr", code, index)
-    },
     onClickSwitchPano() {
       this.$router.push({ name: 'PanoList' })
     }

src/views/PanoView.vue

@@ -4,6 +4,32 @@
       id="pano"
       :style="{zIndex: $globalConfig.zIndex.pano.self}"
     />
+
+    <button
+      class="top back"
+      @click="onClickBack"
+    >
+      <img
+        src="@/assets/images/pano/back.png"
+        alt=""
+        draggable="false"
+      >
+      <div>返回</div>
+    </button>
+
+    <button
+      class="top switch-pano"
+      @click="onClickSwitchPano"
+    >
+      <img
+        src="@/assets/images/swkk/changjingdaolan.png"
+        alt=""
+        draggable="false"
+      >
+      <div>全景切换</div>
+    </button>
+
+    <router-view />
   </div>
 </template>
 
@@ -15,6 +41,7 @@ let __krfn = krfn.default
 export default {
   data() {
     return {
+      scene: null,
     }
   },
   computed: {
@@ -23,45 +50,74 @@ export default {
     ])
   },
   async mounted() {
+    console.log('this.$route.params.scene: ', this.$route.params.scene)
+    this.scene = this.$route.params.scene
+
     window.__krfn = __krfn
 
-    const testScene = this.panoData.scenes[0]
-    $("#pano").empty()
-    window.vrInitFn = () => {
+    this.loadScene()
+
+    this.$msgCenter.subscribe('clickHotspot', (hotspotName) => {
+      console.log('hotspotName: ', hotspotName)
+      let someData = this.scene.someData
+      if (typeof someData == "string") {
+        someData = JSON.parse(this.activeItem.someData)
+      }
+      let clickedHotspot = someData.hotspots.find((item) => item.name == hotspotName)
+      if (clickedHotspot) {
+        if (clickedHotspot.hotspotType == "link") {
+          window.open(clickedHotspot.hyperlink, "_blank")
+        } else if (clickedHotspot.hotspotType == "scene") {
+          this.scene = clickedHotspot.secne
+          this.loadScene()
+          // this.$router.replace({ name: 'PanoView', params: { scene: clickedHotspot.secne } })
+        }
+      }
+    })
+  },
+  methods: {
+    loadScene() {
+      $("#pano").empty()
+      window.vrInitFn = () => {
       // eslint-disable-next-line no-undef
       // $smallWaiting.hide()
-      var krpano = document.getElementById("krpanoSWFObject")
-      __krfn.utils.initHotspot(krpano, testScene.someData, false)
-    }
-    window.vrViewFn = () => {
-      try {
-        let tmp = testScene.initVisual || {}
         var krpano = document.getElementById("krpanoSWFObject")
-        krpano.set("view.vlookat", tmp.vlookat || 0)
-        krpano.set("view.hlookat", tmp.hlookat || 0)
-        krpano.set("autorotate.enabled", Boolean(this.panoData.isAuto))
-      } catch (error) {
-        console.log(error)
+        __krfn.utils.initHotspot(krpano, this.scene.someData, false)
       }
+      window.vrViewFn = () => {
+        try {
+          let tmp = this.scene.initVisual || {}
+          var krpano = document.getElementById("krpanoSWFObject")
+          krpano.set("view.vlookat", tmp.vlookat || 0)
+          krpano.set("view.hlookat", tmp.hlookat || 0)
+          krpano.set("autorotate.enabled", Boolean(this.panoData.isAuto))
+        } catch (error) {
+          console.log(error)
+        }
+      }
+      let settings = {
+        "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
+        "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
+      }
+      // eslint-disable-next-line no-undef
+      removepano("#pano")
+      // eslint-disable-next-line no-undef
+      embedpano({
+        xml: `https://zzbbh.4dage.com/YHT/Qjkk/local/pano/${this.scene.sceneCode}/vtour/tour.xml`,
+        swf: "%HTMLPATH%/static/template/tour.swf", // todo: 咋回事？
+        target: "pano",
+        html5: "auto",
+        mobilescale: 1,
+        vars: settings,
+        passQueryParameters: true,
+      })
+    },
+    onClickBack: globalUtils.throttle(function() {
+      this.$router.push({ name: 'ObliqueView' })
+    }, 1000),
+    onClickSwitchPano() {
+      this.$router.push({ name: 'PanoList' })
     }
-    let settings = {
-      "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
-      "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
-    }
-    // eslint-disable-next-line no-undef
-    removepano("#pano")
-    // eslint-disable-next-line no-undef
-    embedpano({
-      xml: `https://zzbbh.4dage.com/YHT/Qjkk/local/pano/${testScene.sceneCode}/vtour/tour.xml`,
-      swf: "%HTMLPATH%/static/template/tour.swf", // todo: 有用吗？
-      target: "pano",
-      html5: "auto",
-      mobilescale: 1,
-      vars: settings,
-      passQueryParameters: true,
-    })
-  },
-  methods: {
   },
 }
 </script>
@@ -71,9 +127,34 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  z-index: 0;
   #pano {
     width: 100%;
     height: 100%;
   }
+  > button.top {
+    position: absolute;
+    top: 2.08rem;
+    width: 5rem;
+    height: 5rem;
+    z-index: 2;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+    > div {
+      margin-top: 0.17rem;
+      text-shadow: 0 0 0.1rem rgba(0,0,0,0.3);
+      color: #333333;
+      font-size: 1.17rem;
+      font-weight: bold;
+    }
+    &.back {
+      left: 1.63rem;
+    }
+    &.switch-pano {
+      right: 1.63rem;
+    }
+  }
 }
 </style>