up

Code/public/myData/myData.js

@@ -335,9 +335,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 5,
+    atv: -2.1,
     // 水平方向
-    ath: 0,
+    ath: 8.23,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot1.png',
     // 热点定位百分比
@@ -375,9 +375,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 5,
+    atv: 3.79,
     // 水平方向
-    ath: 0,
+    ath: -3.89,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot2.png',
     // 热点定位百分比
@@ -408,9 +408,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 5,
+    atv: 9.57,
     // 水平方向
-    ath: 0,
+    ath: 8.53,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot3.png',
     // 热点定位百分比
@@ -448,11 +448,11 @@ const banquetHotArr = [
     // 热点名字
     name: '三角纹彩绘陶壶',
     // 热点大小
-    size: 1,
+    size: 0.7,
     // 垂直方向
-    atv: 5,
+    atv: -1.65,
     // 水平方向
-    ath: 0,
+    ath: -43.65,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot4.png',
     // 热点定位百分比
@@ -475,11 +475,11 @@ const banquetHotArr = [
     // 热点名字
     name: '五凤铜熏炉',
     // 热点大小
-    size: 1,
+    size: .6,
     // 垂直方向
-    atv: 5,
+    atv: -0.08,
     // 水平方向
-    ath: 0,
+    ath: 55,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot5.png',
     // 热点定位百分比
@@ -507,11 +507,11 @@ const banquetHotArr = [
     // 热点名字
     name: '红绿釉陶灯',
     // 热点大小
-    size: 1,
+    size: .6,
     // 垂直方向
-    atv: 5,
+    atv: -0.08,
     // 水平方向
-    ath: 0,
+    ath: 63.79,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot6.png',
     // 热点定位百分比
@@ -536,9 +536,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 5,
+    atv: 2.28,
     // 水平方向
-    ath: 0,
+    ath: 15.84,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot7.png',
     // 热点定位百分比

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -7,10 +7,6 @@ import HotIcon from '@/components/HotIcon'
 import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
 import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
 
-window.draggbleHotspotEvent = (ath: number, atv: number) => {
-  console.log(`ath: ${ath}, atv: ${atv}`)
-}
-
 function PanoVideo() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)

Code/src/pages/A3banquet/PanoImg/index.tsx

@@ -1,30 +1,96 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { myData, otherUrl } from '@/utils/http'
 import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
 import HotIcon from '@/components/HotIcon'
+import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
+import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
+
 function PanoImg() {
   // 0为 第一种模式的热点 其他为第二种
   const [ind, setInd] = useState(-1)
+  const [activeIdx, setActiveIdx] = useState(-1)
+  const middlewareIns = useRef<KrpanoMiddlewareMethods>(null)
 
   const data = useMemo(() => {
     if (ind !== -1) return myData.banquet.hot[ind].data
     else return []
   }, [ind])
 
-  return (
-    <div className={styles.PanoImg}>
-      {/* 待完善 */}
-      全景图
-      {myData.banquet.hot.map((item, index) => (
-        // 热点图标
-        <HotIcon key={index} index={index} clickSon={val => setInd(val)} hoverSrc={item.hoverSrc} />
-      ))}
-      {ind === -1 ? null : (
-        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
-      )}
-    </div>
-  )
+  return <>
+    <KrpanoMiddleware ref={middlewareIns}>
+      <Krpano className={styles.PanoImg} currentScene='scene1' onReady={() => middlewareIns.current?.ready()}>
+        <Scene name='scene1'
+          previewUrl={otherUrl + 'pano/pano2.tiles/preview.jpg'}
+          imageTagAttributes={{
+            type: "cube",
+            tileSize: 512,
+            multires: true,
+          }}
+          images={[
+            {
+              tiledImageWidth: 2624,
+              tiledImageHeight: 2624,
+              url: otherUrl + "pano/pano2.tiles/%s/l3/%v/l3_%s_%v_%h.jpg",
+            },
+            {
+              tiledImageWidth: 1280,
+              tiledImageHeight: 1280,
+              url: otherUrl + "pano/pano2.tiles/%s/l2/%v/l2_%s_%v_%h.jpg",
+            },
+            {
+              tiledImageWidth: 640,
+              tiledImageHeight: 640,
+              url: otherUrl + "pano/pano2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg",
+            },
+          ]}
+        >
+          <View
+            hlookat={0}
+            vlookat={0}
+            fovType="MFOV"
+            fov={120}
+            maxPixelZoom={2}
+            fovMin={70}
+            fovMax={140}
+            limitView="range"
+            hlookatMin={-90}
+            hlookatMax={90}
+            vlookatMin={-80}
+            vlookatMax={80}
+          />
+          {myData.banquet.hot.map((item, index) => (
+            // 热点图标
+            <HotSpot
+              key={index}
+              type="text"
+              name={item.name}
+              atv={item.atv}
+              ath={item.ath}
+              edge="top"
+              distorted={true}
+              scale={item.size}
+              bg={false}
+              onOver={() => setActiveIdx(index)}
+              onOut={() => setActiveIdx(-1)}
+              onClick={() => setInd(index)}
+            >
+              <HotIcon key={index}
+                index={index}
+                isHoverAc={activeIdx === index}
+                hoverSrc={item.hoverSrc}
+                panoWidth='146px'
+              />
+            </HotSpot>
+          ))}
+        </Scene>
+      </Krpano>
+    </KrpanoMiddleware>
+
+    {ind === -1 ? null : (
+      <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
+    )}
+  </>
 }
 
 const MemoPanoImg = React.memo(PanoImg)