feat: 移动端使用全景图

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
+const baseUrlLoc = 'http://192.168.0.18:8080/staticData/'
 
 // 发送请求基地址
 const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { otherUrl, hotInfo } from '@/utils/http'
 import HotIcon from '@/components/HotIcon'
-import { HotSpot, Krpano, VideoScene, videoSceneModel, View } from '@dage/krpano'
+import { HotSpot, Krpano, Scene, VideoScene, videoSceneModel, View } from '@dage/krpano'
 import { KrpanoMiddleware, KrpanoMiddlewareMethods } from '@/components/KrpanoMiddleware'
 import ZHot0 from '@/components/ZHot0'
 import Zhot from '@/components/Zhot'
@@ -55,73 +55,127 @@ function PanoVideo({ lodingOk }: Propr) {
           className={styles.PanoVideo}
           currentScene='scene1'
           onReady={() => {
-            middlewareIns.current?.ready()
+            isMobile ? lodingOk() : middlewareIns.current?.ready()
           }}
         >
-          <VideoScene
-            name='scene1'
-            videointerfaceXmlUrl='./skin/videointerface.xml'
-            videoplayerUrl='./plugins/videoplayer.js'
-            sourceList={[
-              {
-                res: '8000x4000',
-                url: otherUrl + 'pano/1.mp4',
-                poster: otherUrl + 'pano/pano1.jpg'
-              },
-              {
-                res: '2000x1000',
-                url: otherUrl + 'pano/1-2k.mp4',
-                poster: otherUrl + 'pano/pano1.jpg'
-              },
-              {
-                res: '4000x2000',
-                url: otherUrl + 'pano/1-4k.mp4',
-                poster: otherUrl + 'pano/pano1.jpg'
-              }
-            ]}
-            playRes={
-              isMobile
-                ? window.innerHeight * window.devicePixelRatio > 2400
-                  ? '4000x2000'
-                  : '2000x1000'
-                : '8000x4000'
-            }
-            onVisibility={() => {
-              if (document.visibilityState === 'visible') {
-                videoSceneModel.play()
+          {isMobile ? (
+            <Scene
+              name='scene1'
+              previewUrl={otherUrl + 'pano/pano1.tiles/thumb.jpg'}
+              imageTagAttributes={{
+                type: 'cube',
+                tileSize: 512,
+                multires: true
+              }}
+              images={[
+                {
+                  tiledImageWidth: 1280,
+                  tiledImageHeight: 1280,
+                  url: otherUrl + 'pano/pano1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
+                },
+                {
+                  tiledImageWidth: 640,
+                  tiledImageHeight: 640,
+                  url: otherUrl + 'pano/pano1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
+                }
+              ]}
+            >
+              <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
+              {arrRes.map((item, index) => (
+                // 热点图标
+                <HotSpot
+                  key={index}
+                  type='text'
+                  name={item.name}
+                  atv={item.panoLoc.atv}
+                  ath={item.panoLoc.ath}
+                  edge='top'
+                  distorted={true}
+                  scale={item.panoLoc.size}
+                  bg={false}
+                  onOver={() => setActiveIdx(index)}
+                  onOut={() => setActiveIdx(-1)}
+                  onClick={() => setAcName(item.name)}
+                  // @ts-ignore
+                  // onDown='draggable_hotspot()'
+                >
+                  <HotIcon
+                    isModel={item.tubiao === '文物' ? true : false}
+                    key={index}
+                    index={index}
+                    isHoverAc={activeIdx === index}
+                    hoverSrc={item.hoverSrc}
+                    panoWidth='113px'
+                  />
+                </HotSpot>
+              ))}
+            </Scene>
+          ) : (
+            <VideoScene
+              name='scene1'
+              videointerfaceXmlUrl='./skin/videointerface.xml'
+              videoplayerUrl='./plugins/videoplayer.js'
+              sourceList={[
+                {
+                  res: '8000x4000',
+                  url: otherUrl + 'pano/1.mp4',
+                  poster: otherUrl + 'pano/pano1.jpg'
+                },
+                {
+                  res: '2000x1000',
+                  url: otherUrl + 'pano/1-2k.mp4',
+                  poster: otherUrl + 'pano/pano1.jpg'
+                },
+                {
+                  res: '4000x2000',
+                  url: otherUrl + 'pano/1-4k.mp4',
+                  poster: otherUrl + 'pano/pano1.jpg'
+                }
+              ]}
+              playRes={
+                isMobile
+                  ? window.innerHeight * window.devicePixelRatio > 2400
+                    ? '4000x2000'
+                    : '2000x1000'
+                  : '8000x4000'
               }
-            }}
-          >
-            <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
-            {arrRes.map((item, index) => (
-              // 热点图标
-              <HotSpot
-                key={index}
-                type='text'
-                name={item.name}
-                atv={item.panoLoc.atv}
-                ath={item.panoLoc.ath}
-                edge='top'
-                distorted={true}
-                scale={item.panoLoc.size}
-                bg={false}
-                onOver={() => setActiveIdx(index)}
-                onOut={() => setActiveIdx(-1)}
-                onClick={() => setAcName(item.name)}
-                // @ts-ignore
-                // onDown='draggable_hotspot()'
-              >
-                <HotIcon
-                  isModel={item.tubiao === '文物' ? true : false}
+              onVisibility={() => {
+                if (document.visibilityState === 'visible') {
+                  videoSceneModel.play()
+                }
+              }}
+            >
+              <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
+              {arrRes.map((item, index) => (
+                // 热点图标
+                <HotSpot
                   key={index}
-                  index={index}
-                  isHoverAc={activeIdx === index}
-                  hoverSrc={item.hoverSrc}
-                  panoWidth='113px'
-                />
-              </HotSpot>
-            ))}
-          </VideoScene>
+                  type='text'
+                  name={item.name}
+                  atv={item.panoLoc.atv}
+                  ath={item.panoLoc.ath}
+                  edge='top'
+                  distorted={true}
+                  scale={item.panoLoc.size}
+                  bg={false}
+                  onOver={() => setActiveIdx(index)}
+                  onOut={() => setActiveIdx(-1)}
+                  onClick={() => setAcName(item.name)}
+                  // @ts-ignore
+                  // onDown='draggable_hotspot()'
+                >
+                  <HotIcon
+                    isModel={item.tubiao === '文物' ? true : false}
+                    key={index}
+                    index={index}
+                    isHoverAc={activeIdx === index}
+                    hoverSrc={item.hoverSrc}
+                    panoWidth='113px'
+                  />
+                </HotSpot>
+              ))}
+            </VideoScene>
+          )}
         </Krpano>
       </KrpanoMiddleware>