|
@@ -17,80 +17,87 @@ function PanoImg() {
|
|
|
else return []
|
|
|
}, [ind])
|
|
|
|
|
|
- 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",
|
|
|
- },
|
|
|
- ]}
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <KrpanoMiddleware ref={middlewareIns}>
|
|
|
+ <Krpano
|
|
|
+ className={styles.PanoImg}
|
|
|
+ currentScene='scene1'
|
|
|
+ onReady={() => middlewareIns.current?.ready()}
|
|
|
>
|
|
|
- <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>
|
|
|
+ <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}
|
|
|
+ fovMin={70}
|
|
|
+ fovMax={130}
|
|
|
+ limitView='range'
|
|
|
+ hlookatMin={-150}
|
|
|
+ hlookatMax={140}
|
|
|
+ vlookatMin={-90}
|
|
|
+ vlookatMax={90}
|
|
|
+ />
|
|
|
+ {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} />
|
|
|
- )}
|
|
|
- </>
|
|
|
+ {ind === -1 ? null : (
|
|
|
+ <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
const MemoPanoImg = React.memo(PanoImg)
|