photo-sphere-viewer的使用

展示点的信息比threejs方便

首先安装 photo-sphere-viewer

npm install photo-sphere-viewer

直接贴代码，

代码语言：javascript复制

<template>
  <div style="overflow:hidden;border:1px solid #ccc">
    photeSphereViewer
    <div id="viewer"></div>
    <el-dialog :visible.sync="dialogVisible">
      {{dialogID}}
    </el-dialog>
  </div>
</template>

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

export default {
  data() {
    return {
      num:0,
      dialogID:"",
      dialogVisible:false,
    };
  },
  mounted() {
    this.showScene();
    setInterval(()=>{
       document.getElementById("text1").innerHTML = Math.round(50 10*Math.random())
    },5000)
  },
  methods: {
    showScene() {
      const viewer = new Viewer({
        container: document.querySelector("#viewer"),
        panorama: {
          left: "/static/lng/left1.jpg",
          right: "/static/lng/right1.jpg",
          top: "/static/lng/top1.jpg",
          bottom: "/static/lng/bottom1.jpg",
          front: "/static/lng/front1.jpg",
          back: "/static/lng/back1.jpg"
        },
        autorotateDelay: null,
        autorotateSpeed: "1rpm",
        plugins: [
          [
            MarkersPlugin,
            {
              markers: [
                {
                  id: "circle",
                  tooltip: "A circle of radius 30",
                  circle: 30,
                  svgStyle: {
                    fill: "rgba(255,255,0,0.3)",
                    stroke: "yellow",
                    strokeWidth: "2px"
                  },
                  longitude: -1.5,
                  latitude: -0.28,
                  anchor: "center right"
                },
                {
                  // 自定义样式的标记
                  id: "text",
                  longitude: 1,
                  latitude: 0,
                  // html: "HTML <b>marker</b> &hearts;", // 显示内容
                  html:
                    "<div class='textWrap' ><div id='text1'>HTML</div> <b>marker</b> &hearts;</div>", // 显示内容
                  anchor: "bottom right",
                  scale: [0.5, 1.5],
                  style: {
                    // maxWidth: "100px",
                    color: "white",
                    fontSize: "20px",
                    fontFamily: "Helvetica, sans-serif",
                    textAlign: "center"
                  },
                  tooltip: {
                    content: "An HTML marker",
                    position: "right"
                  }
                },
                {
                  // 自定义样式的标记
                  id: "text1",
                  longitude: 0,
                  latitude: 0,
                  html: "HTML <b>marker</b> &hearts;", // 显示内容
                
                  anchor: "bottom right",
                  scale: [0.5, 1.5],
                  style: {
                    // maxWidth: "100px",
                    color: "white",
                    fontSize: "20px",
                    fontFamily: "Helvetica, sans-serif",
                    textAlign: "center"
                  },
                  tooltip: {
                    content: "An HTML marker",
                    position: "right"
                  }
                }
              ]
            }
          ]
        ]
      });
      const markersPlugin = viewer.getPlugin(MarkersPlugin);
      console.log(markersPlugin);
      viewer.on("click",(e,data)=>{
       console.log(e)
       console.log(data)
       
      })
      markersPlugin.on("select-marker", (e, marker) => {
        console.log(marker);
        this.dialogVisible = true
        this.dialogID = marker.id
        viewer
          .animate({
            // longitude: marker.config.longitude,
            // latitude: marker.config.latitude,
            // zoom: 80,
            // speed: "-2rpm"
          })
          .then(() => {
            // markersPlugin.updateMarker({
            //   id: marker.id,
            //   longitude: -1.8,
            //   latitude: -0.28
            // });
          });
      });
    }
  }
};
</script>

<style scoped>
#viewer {
  width: 100vw;
  height: 90vh;
}
/deep/.textWrap{background:gray;border:1px solid red;padding:10px;}
</style>

npm photo viewer

0 人点赞