feat: 自力村场景

code/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/cssinjs": "^1.5.6",
+    "@dage/krpano": "^2.1.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,6 +15,8 @@
     "antd": "^5.8.3",
     "antd-mobile": "^5.30.0",
     "axios": "^1.1.3",
+    "classnames": "^2.3.2",
+    "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",

code/public/index.html

@@ -12,6 +12,7 @@
 
   <script src="http://127.0.0.1:8080/staticData/dataTemp.js"></script>
   <script src="./web/staticData/dataTemp.js"></script>
+  <script src="%PUBLIC_URL%/krpano.js"></script>
 
   <!--
       manifest.json provides metadata used when your web app is installed on a

code/public/scene.xml

@@ -0,0 +1,21 @@
+<krpano>
+  <scene name="scene_zlc" title="zlc" onstart="" thumburl="https://houseoss.4dkankan.com/project/kaiping/panos/zlc.tiles/thumb.jpg" lat="22.37682872" lng="112.57451278" heading="0.0">
+
+		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
+
+		<preview url="https://houseoss.4dkankan.com/project/kaiping/panos/zlc.tiles/preview.jpg" />
+
+		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512">
+			<level tiledimagewidth="2624" tiledimageheight="2624">
+				<cube url="https://houseoss.4dkankan.com/project/kaiping/panos/zlc.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
+			</level>
+			<level tiledimagewidth="1280" tiledimageheight="1280">
+				<cube url="https://houseoss.4dkankan.com/project/kaiping/panos/zlc.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
+			</level>
+			<level tiledimagewidth="640" tiledimageheight="640">
+				<cube url="https://houseoss.4dkankan.com/project/kaiping/panos/zlc.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
+			</level>
+		</image>
+
+	</scene>
+</krpano>

code/src/pages/B1Village/index.module.scss

@@ -19,4 +19,43 @@
       text-shadow: 1px 1px black;
     }
   }
+}
+
+.villageKrpano {
+  width: 100vw;
+  height: 100vh;
+}
+
+.hotspot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.hotspotLabel {
+  width: 316px;
+  height: 68px;
+  text-align: center;
+  line-height: 68px;
+  font-size: 32px;
+  color: #fce9ac;
+  background: url("../../assets/img/btn_normal@2x.png") no-repeat center / contain;
+}
+
+.hotspotPointer {
+  margin-top: 15px;
+  width: 122px;
+  height: 124px;
+  background: url("../../assets/img/icon_address_normal@2x.png") no-repeat center /
+    contain;
+}
+
+.hotspotActive .hotspotLabel {
+  color: #5c4b32;
+  background-image: url("../../assets/img/btn_active@2x.png");
+}
+
+.hotspotActive .hotspotPointer {
+  background-image: url("../../assets/img/icon_address_active@2x.png");
 }

code/src/pages/B1Village/index.tsx

@@ -1,24 +1,26 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import { useLocation } from "react-router-dom";
 import history from "@/utils/history";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
+import { HotSpot, Krpano } from "@dage/krpano";
+import classNames from "classnames";
 function B1Village() {
   const location = useLocation();
 
   const [uId, setUid] = useState("");
+  const [curScene, setCurScene] = useState('scene_zlc');
+  const [hotspotHoverName, setHotspotHoverName] = useState('');
+  const villageData = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.village
+  );
+  const curVillage = useMemo(() => villageData.find(i => i.id === Number(uId)) || villageData[0], [uId, villageData])
 
   const architec = useSelector(
     (state: RootState) => state.A0Layout.dataAll.architec
   );
 
- 
-
-  const [data,setData] =useState({
-    id:Number
-  })
-
   useEffect(() => {
     const query = new URLSearchParams(location.search);
     const param = query.get("id");
@@ -28,6 +30,37 @@ function B1Village() {
 
   return (
     <div className={styles.B1Village}>
+      <Krpano className={styles.villageKrpano}
+        xml="/scene.xml"
+        currentScene={curScene}
+        >
+        {curVillage.info.map(item => {
+          const name = `hotspot${item.id}`;
+
+          return (
+            <HotSpot key={name}
+              name={name}
+              type="text"
+              // @ts-ignore
+              atv={item.atv}
+              ath={item.ath}
+              scale={0.5}
+              edge="top"
+              bg={false}
+              distorted={true}
+              onClick={() => alert("点击了 " + name)}
+              onOver={() => setHotspotHoverName(name)}
+              onOut={() => setHotspotHoverName('')}
+            >
+              <div className={classNames(name === hotspotHoverName && styles.hotspotActive, styles.hotspot)}>
+                <span className={styles.hotspotLabel}>建筑名</span>
+                <div className={styles.hotspotPointer} />
+              </div>
+            </HotSpot>
+          )
+        })}
+      </Krpano>
+
       {/* 右下角的详情按钮 */}
       <div
         className="B1toTab3"

code/src/types/api/layot.d.ts

@@ -40,6 +40,10 @@ export type DataAllType = {
     infoTxt: string;
     info: {
       id: number;
+      code: string;
+      label: string;
+      atv: number;
+      ath: number;
     }[];
   }[];
   // 待完善