style: 热点位置

Code/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.5.6",
     "@dage/krpano": "^2.4.1",
+    "@dage/utils": "^1.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -25,6 +26,7 @@
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
     "typescript": "^4.8.4",
+    "vconsole": "^3.15.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

Code/public/myData/myData.js

@@ -182,9 +182,9 @@ const visitHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: -7.96,
+    atv: -8.16,
     // 水平方向
-    ath: -32.3,
+    ath: -19.02,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit/hot/hot3.png',
     // 热点定位百分比
@@ -333,9 +333,9 @@ const visitHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: -10.87,
+    atv: -20.34,
     // 水平方向
-    ath: -5.7,
+    ath: 40.63,
     zIndex: 2,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'visit/hot/hot6.png',
@@ -392,9 +392,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: -5.19,
+    atv: -4.81,
     // 水平方向
-    ath: 8.21,
+    ath: 1.33,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot1.png',
     // 热点定位百分比
@@ -432,9 +432,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 2.2,
+    atv: 3.99,
     // 水平方向
-    ath: -7.5,
+    ath: -11.5,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot2.png',
     // 热点定位百分比
@@ -465,9 +465,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 11.49,
+    atv: 11.5,
     // 水平方向
-    ath: 8.13,
+    ath: 1.63,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot3.png',
     // 热点定位百分比
@@ -601,9 +601,9 @@ const banquetHotArr = [
     // 热点大小
     size: 1,
     // 垂直方向
-    atv: 1.37,
+    atv: 1.8,
     // 水平方向
-    ath: 20.3,
+    ath: 13.97,
     // pc鼠标移入显示的图片路径+名字
     hoverSrc: 'banquet/hot/hot7.png',
     // 热点定位百分比
@@ -628,8 +628,8 @@ const banquetHotArr = [
     noShow: true,
     name: '鎏金铜牛',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: -0.89,
+    ath: -96.47,
     hoverSrc: 'banquet/hot/hot79.png',
     // 热点定位百分比
     loc: {
@@ -652,8 +652,8 @@ const banquetHotArr = [
     noShow: true,
     name: '曲柄带盘蜡台',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 20.17,
+    ath: -76.37,
     hoverSrc: 'banquet/hot/hot80.png',
     // 热点定位百分比
     loc: {
@@ -674,8 +674,8 @@ const banquetHotArr = [
     noShow: true,
     name: '食案',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 6.43,
+    ath: 45,
     hoverSrc: 'banquet/hot/hot81.png',
     // 热点定位百分比
     loc: {
@@ -697,8 +697,8 @@ const banquetHotArr = [
     noShow: true,
     name: '箸',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 2,
+    ath: 39.5,
     hoverSrc: 'banquet/hot/hot82.png',
     // 热点定位百分比
     loc: {
@@ -720,8 +720,8 @@ const banquetHotArr = [
     noShow: true,
     name: '“广平五升”铜鼎',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 5.52,
+    ath: -83.1,
     hoverSrc: 'banquet/hot/hot83.png',
     // 热点定位百分比
     loc: {
@@ -743,8 +743,8 @@ const banquetHotArr = [
     noShow: true,
     name: '云纹漆鼎',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: -1.35,
+    ath: -38.62,
     hoverSrc: 'banquet/hot/hot84.png',
     // 热点定位百分比
     loc: {
@@ -766,8 +766,8 @@ const banquetHotArr = [
     noShow: true,
     name: '漆盒',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 9.39,
+    ath: -42.89,
     hoverSrc: 'banquet/hot/hot85.png',
     // 热点定位百分比
     loc: {
@@ -789,8 +789,8 @@ const banquetHotArr = [
     noShow: true,
     name: '“君幸食”小漆盘',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 13.26,
+    ath: -34.65,
     hoverSrc: 'banquet/hot/hot9.png',
     // 热点定位百分比
     loc: {
@@ -813,8 +813,8 @@ const banquetHotArr = [
     noShow: true,
     name: '铜熏炉',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 1.24,
+    ath: -50.84,
     hoverSrc: 'banquet/hot/hot87.png',
     // 热点定位百分比
     loc: {
@@ -836,8 +836,8 @@ const banquetHotArr = [
     noShow: true,
     name: '鎏金带盖铜炉',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 4.88,
+    ath: -45.26,
     hoverSrc: 'banquet/hot/hot88.png',
     // 热点定位百分比
     loc: {
@@ -861,8 +861,8 @@ const banquetHotArr = [
     noShow: true,
     name: '朱雀羽人飞龙彩绘陶灯',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 4.22,
+    ath: -28.12,
     hoverSrc: 'banquet/hot/hot89.png',
     // 热点定位百分比
     loc: {
@@ -883,9 +883,9 @@ const banquetHotArr = [
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     name: '提梁三足铜壶',
-    size: 1,
-    atv: 0,
-    ath: 0,
+    size: 0.8,
+    atv: 8.44,
+    ath: -55.63,
     hoverSrc: 'banquet/hot/hot90.png',
     // 热点定位百分比
     loc: {
@@ -907,8 +907,8 @@ const banquetHotArr = [
     noShow: true,
     name: '鎏金双鼻铜壶',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 17.42,
+    ath: -46.17,
     hoverSrc: 'banquet/hot/hot91.png',
     // 热点定位百分比
     loc: {
@@ -930,8 +930,8 @@ const banquetHotArr = [
     noShow: true,
     name: '鎏金银云纹铜壶',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 15.63,
+    ath: -106.78,
     hoverSrc: 'banquet/hot/hot92.png',
     // 热点定位百分比
     loc: {
@@ -953,8 +953,8 @@ const banquetHotArr = [
     noShow: true,
     name: '铜鋞',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: -0.33,
+    ath: -26.1,
     hoverSrc: 'banquet/hot/hot93.png',
     // 热点定位百分比
     loc: {
@@ -976,8 +976,8 @@ const banquetHotArr = [
     noShow: true,
     name: '鎏金铜素钫',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 6.31,
+    ath: 33.98,
     hoverSrc: 'banquet/hot/hot94.png',
     // 热点定位百分比
     loc: {
@@ -999,8 +999,8 @@ const banquetHotArr = [
     noShow: true,
     name: '弦纹奁',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 9.8,
+    ath: 105.11,
     hoverSrc: 'banquet/hot/hot95.png',
     // 热点定位百分比
     loc: {
@@ -1022,8 +1022,8 @@ const banquetHotArr = [
     noShow: true,
     name: '汉代神兽纹铜樽',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 10,
+    ath: 75.92,
     hoverSrc: 'banquet/hot/hot96.png',
     // 热点定位百分比
     loc: {
@@ -1045,8 +1045,8 @@ const banquetHotArr = [
     noShow: true,
     name: '彩漆卮',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 3.18,
+    ath: 49.61,
     hoverSrc: 'banquet/hot/hot97.png',
     // 热点定位百分比
     loc: {
@@ -1068,8 +1068,8 @@ const banquetHotArr = [
     noShow: true,
     name: '鎏金银云纹耳杯',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 16.15,
+    ath: 97,
     hoverSrc: 'banquet/hot/hot98.png',
     // 热点定位百分比
     loc: {
@@ -1091,8 +1091,8 @@ const banquetHotArr = [
     noShow: true,
     name: '云纹透花薰炉',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: -3.15,
+    ath: 34.3,
     hoverSrc: 'banquet/hot/hot99.png',
     // 热点定位百分比
     loc: {
@@ -1112,8 +1112,8 @@ const banquetHotArr = [
     noShow: true,
     name: '宴饮礼节',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 12.38,
+    ath: -85.19,
     hoverSrc: 'banquet/hot/hot101.png',
     // 热点定位百分比
     loc: {
@@ -1133,8 +1133,8 @@ const banquetHotArr = [
     noShow: true,
     name: '绿釉直颈陶投壶',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 1.448,
+    ath: 104,
     hoverSrc: 'banquet/hot/hot102.png',
     // 热点定位百分比
     loc: {
@@ -1163,8 +1163,8 @@ const banquetHotArr = [
     noShow: true,
     name: '绿釉弦纹陶壶',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 10.12,
+    ath: 59.37,
     hoverSrc: 'banquet/hot/hot103.png',
     // 热点定位百分比
     loc: {
@@ -1185,8 +1185,8 @@ const banquetHotArr = [
     noShow: true,
     name: '神兽纹博山炉',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 10.14,
+    ath: 50.54,
     hoverSrc: 'banquet/hot/hot104.png',
     // 热点定位百分比
     loc: {
@@ -1207,8 +1207,8 @@ const banquetHotArr = [
     noShow: true,
     name: '四足陶案',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 18.33,
+    ath: 83.69,
     hoverSrc: 'banquet/hot/hot105.png',
     // 热点定位百分比
     loc: {
@@ -1229,8 +1229,8 @@ const banquetHotArr = [
     noShow: true,
     name: '素面铜灯',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 2.12,
+    ath: 30.22,
     hoverSrc: 'banquet/hot/hot106.png',
     // 热点定位百分比
     loc: {
@@ -1251,8 +1251,8 @@ const banquetHotArr = [
     noShow: true,
     name: '铜勺',
     size: 1,
-    atv: 0,
-    ath: 0,
+    atv: 14,
+    ath: 55.34,
     hoverSrc: 'banquet/hot/hot107.png',
     // 热点定位百分比
     loc: {

Code/src/App.tsx

@@ -8,6 +8,10 @@ import SpinLoding from './components/SpinLoding'
 import NotFound from '@/components/NotFound'
 import store from './store'
 import { baseURL, myData } from './utils/http'
+
+// import Vconsole from 'vconsole'
+// new Vconsole()
+
 // import { isLoc, myData } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A1_1base = React.lazy(() => import('./pages/A1_1base'))

Code/src/components/HotIcon/index.tsx

@@ -18,6 +18,8 @@ type Props = {
   // 全景视频和全景图的宽度
   panoWidth?: string
   isXiao?: number
+  // 是否在全景中
+  isPano?: boolean
 }
 
 function HotIcon({
@@ -31,7 +33,8 @@ function HotIcon({
   isZhan,
   zIndex,
   panoWidth,
-  isXiao
+  isXiao,
+  isPano
 }: Props) {
   const onMouseEnter = useCallback(() => {
     if (hoverFu) {
@@ -61,20 +64,41 @@ function HotIcon({
       )}
       key={index}
     >
-      <img
-        onMouseEnter={onMouseEnter}
-        onClick={clickSonFu}
-        className='HotIconBase'
-        src={`${baseURL}visit/hot/hotBase${isModel ? '2' : ''}.png`}
-        alt=''
-      />
-      <img
-        onMouseEnter={onMouseEnter}
-        onClick={clickSonFu}
-        className='HotIconHover'
-        src={baseURL + hoverSrc}
-        alt=''
-      />
+      {(!isPano || !isHoverAc) && (
+        <img
+          onMouseEnter={onMouseEnter}
+          onClick={clickSonFu}
+          className='HotIconBase'
+          src={`${baseURL}visit/hot/hotBase${isModel ? '2' : ''}.png`}
+          alt=''
+          style={
+            isPano
+              ? {
+                  position: 'relative',
+                  maxWidth: 'unset',
+                  maxHeight: 'unset'
+                }
+              : undefined
+          }
+        />
+      )}
+      {(!isPano || isHoverAc) && (
+        <img
+          onMouseEnter={onMouseEnter}
+          onClick={clickSonFu}
+          className='HotIconHover'
+          src={baseURL + hoverSrc}
+          alt=''
+          style={
+            isPano
+              ? {
+                  maxWidth: 'unset',
+                  maxHeight: 'unset'
+                }
+              : undefined
+          }
+        />
+      )}
     </div>
   )
 }

Code/src/components/KrpanoMiddleware.tsx

@@ -50,7 +50,6 @@ export const KrpanoMiddleware = forwardRef<KrpanoMiddlewareMethods, KrpanoMiddle
 
     useImperativeHandle(ref, () => ({
       ready: () => {
-        console.log(rootStyle)
         if (fakeEvent) {
           window.ReactKrpanoActionProxy?.krpanoRenderer?.call("set(control.usercontrol, 'off');")
         }

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

@@ -4,9 +4,13 @@ import Hot1 from './Hot1'
 import Hot2 from './Hot2'
 import { otherUrl, myData } from '@/utils/http'
 import HotIcon from '@/components/HotIcon'
-import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
+import { HotSpot, Krpano, Scene, 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)
@@ -24,36 +28,37 @@ function PanoVideo() {
         <Krpano
           className={styles.PanoVideo}
           currentScene='scene1'
-          onReady={() => middlewareIns.current?.ready()}
+          onReady={() => {
+            middlewareIns.current?.ready()
+          }}
         >
-          <VideoScene
+          <Scene
             name='scene1'
-            videointerfaceXmlUrl='./skin/videointerface.xml'
-            videoplayerUrl='./plugins/videoplayer.js'
-            sourceList={[
+            previewUrl={otherUrl + 'pano/pano1.tiles/preview.jpg'}
+            imageTagAttributes={{
+              type: 'cube',
+              tileSize: 512,
+              multires: true
+            }}
+            images={[
+              {
+                tiledImageWidth: 2624,
+                tiledImageHeight: 2624,
+                url: otherUrl + 'pano/pano1.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
+              },
+              {
+                tiledImageWidth: 1280,
+                tiledImageHeight: 1280,
+                url: otherUrl + 'pano/pano1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
+              },
               {
-                res: '2000x1000',
-                url: otherUrl + 'pano/1.mp4',
-                poster: ''
+                tiledImageWidth: 640,
+                tiledImageHeight: 640,
+                url: otherUrl + 'pano/pano1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
               }
             ]}
-            playRes='2000x1000'
-            onVisibility={() => {
-              if (document.visibilityState === 'visible') {
-                videoSceneModel.play()
-              }
-            }}
           >
-            <View
-              hlookat={0}
-              vlookat={0}
-              fovType='MFOV'
-              fov={100}
-              fovMin={70}
-              fovMax={130}
-              limitView='auto'
-            />
-
+            <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
             {myData.visit.hot.map((item, index) => (
               // 热点图标
               <HotSpot
@@ -69,9 +74,12 @@ function PanoVideo() {
                 onOver={() => setActiveIdx(index)}
                 onOut={() => setActiveIdx(-1)}
                 onClick={() => setInd(index)}
+                // @ts-ignore
+                // onDown='draggable_hotspot()'
               >
                 <HotIcon
                   isModel={item.isModel ? true : false}
+                  key={index}
                   index={index}
                   isHoverAc={activeIdx === index}
                   hoverSrc={item.hoverSrc}
@@ -79,7 +87,7 @@ function PanoVideo() {
                 />
               </HotSpot>
             ))}
-          </VideoScene>
+          </Scene>
         </Krpano>
       </KrpanoMiddleware>
 

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

@@ -87,12 +87,12 @@ function PanoImg() {
                 // onDown='draggable_hotspot()'
               >
                 <HotIcon
+                  isPano
                   isModel={item.isModel ? true : false}
                   key={index}
                   index={index}
                   isHoverAc={activeIdx === index}
                   hoverSrc={item.hoverSrc}
-                  panoWidth='146px'
                 />
               </HotSpot>
             ))}