在 React/Next JS 中将标记与照片球查看器一起使用

Question

我正在努力寻找如何在我的 Next JS 应用程序中使用 Markers。

我有一个使用此代码的基本全景图...

import React, { useEffect } from "react";
import Head from "next/head";

import { Viewer } from "photo-sphere-viewer";

export default function Home() {
  const sphereElementRef = React.createRef();

  useEffect(() => {
    const shperePlayerInstance = new Viewer({
      container: sphereElementRef.current,
      panorama: "/images/pano2.jpg",
    });

    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, []);
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />

        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"
        />
      </Head>

      <main>
        <div ref={sphereElementRef}></div>
      </main>
    </div>
  );
}

所以这一切都很好，但我不知道标记是如何进入其中的。我已经尝试过与

中的标记文档完全一样

plugins: [
[PhotoSphereViewer.MarkersPlugin, {
  markers: [ 
    {
      id: 'new-marker',
      longitude: '45deg',
      latitude: '0deg',
      image: 'assets/pin-red.png',
    },
  ],
}],

],

但是得到PSVError: Un undefined value was given for plugins.

也只是使用

markers: [
{
  id: 'image',
  longitude: 0.2,
  latitude: -0.13770,
  ....
},

但我刚刚明白 PSVError: Unknown option markers

任何想法都会有很大的帮助

Answer 1

这是我弄清楚如何做所有事情后的完整查看器

import { Viewer } from "photo-sphere-viewer";
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/plugins/markers.css";

import { GyroscopePlugin } from "photo-sphere-viewer/dist/plugins/gyroscope";

import { VisibleRangePlugin } from "photo-sphere-viewer/dist/plugins/visible-range";
import StereoPlugin from "photo-sphere-viewer/dist/plugins/stereo";

export default function Home() {
  const sphereElementRef = React.createRef();

  useEffect(() => {
    const shperePlayerInstance = new Viewer({
      container: sphereElementRef.current,
      panorama: "/images/pano2.jpg",
      plugins: [
        [
          VisibleRangePlugin,
          {
            longitudeRange: [null],
            latitudeRange: [-Math.PI / 2, Math.PI / 4], //Restrict range so you can't see the top of the pano
          },
        ],
        [GyroscopePlugin, StereoPlugin],
        [
          MarkersPlugin,
          {
            markers: [
              {
                id: "image",
                longitude: 0.32,
                latitude: 0.11,
                image: "/images/pin-red.png",
                width: 50,
                height: 50,
                anchor: "bottom center",
                tooltip: "A image marker.",
              },
            ],
          },
        ],
      ],
    });

    const gyroPlugin = shperePlayerInstance.getPlugin(GyroscopePlugin);
    const markersPlugin = shperePlayerInstance.getPlugin(MarkersPlugin);

    markersPlugin.on("select-marker", (e, marker) => {
      markersPlugin.updateMarker({
        id: marker.id,
      });
    });

    if (gyroPlugin && typeof gyroPlugin.isEnabled !== "function") {
      console.log("plugin issue");
    }

    if (gyroPlugin.isEnabled()) {
      gyroPlugin.stop();
    } else {
      gyroPlugin
        .start()
        .then(() => {
          const { latitude } = shperePlayerInstance.getPosition();
          const { heading } = getCompassHeadingExtra();

          shperePlayerInstance.rotate({
            longitude: heading * (Math.PI / 180),
            latitude,
          });
        })
        .catch(handleGyroEnableError);
    }

    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, []); // will only be called when the src prop gets updated

在 React/Next JS 中将标记与照片球查看器一起使用

Using Markers with photo-sphere-viewer in React/Next JS

javascript

reactjs

next.js

photosphereviewer