## 示例

```tsx
import React, { useState, useMemo } from "react";
import { HotSpot, Krpano, Scene, View } from "@dage/krpano";

const URL = "https://houseoss.4dkankan.com/project/leifeng-transfer";

export default () => {
  const [currentScene, setCurrentScene] = useState("center1");

  const CENTER_SCENE_LIST = useMemo<SceneProps[]>(
    () => [
      {
        name: "center1",
        previewUrl: URL + "/panos/center1.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 2624,
            tiledImageHeight: 2624,
            url: URL + "/panos/center1.tiles/%s/l3/%v/l3_%s_%v_%h.jpg",
          },
          {
            tiledImageWidth: 1280,
            tiledImageHeight: 1280,
            url: URL + "/panos/center1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg",
          },
          {
            tiledImageWidth: 640,
            tiledImageHeight: 640,
            url: URL + "/panos/center1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={0}
              vlookat={0}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              limitView="auto"
            />

            <HotSpot
              name="hotspot1"
              url={require("./guide.png")}
              atv={5}
              scale={0.5}
              edge="top"
              distorted={true}
              onClick={() => alert("点击了 hotspot1")}
            />
          </>
        ),
      },
    ],
    []
  );

  return (
    <div className="demo">
      <Krpano
        className="krpano"
        currentScene={currentScene}
        passQueryParameters={true}
      >
        {CENTER_SCENE_LIST.map((sc) => (
          <Scene key={sc.name} {...sc} />
        ))}
      </Krpano>
    </div>
  );
};
```

## API

<API hideTitle exports='["HotSpot"]' src='@dage/krpano/index.d.ts'></API>
