基本信息
源码名称：720web全景demo
源码大小：27.53M
文件格式：.rar
开发语言：js
更新时间：2021-01-04
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

 720度web全景展示,需要放到iis，或tomcate下面才能在浏览器中看到

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="newjsandcss/photo-sphere-viewer.min.css" rel="stylesheet" />
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        #chartdiv {
            width: 100%;
            height: 100%;
        }

        .psv-button.custom-button {
            font-size: 22px;
            line-height: 20px;
        }

        .demo-label {
            color: white;
            font-size: 20px;
            font-family: Helvetica, sans-serif;
            text-align: center;
            padding: 5px;
            border: 1px solid white;
            background: rgba(0,0,0,0.4);
        }
    </style>
</head>
<body>

    <div id="chartdiv"></div>
    <script src="js/three.min.js"></script>
    <!-- 3D -->
    <!--<script src="./newjsandcss/three.min.js"></script>-->
    <!-- js语言修补匠，可向后兼容，适用于低版本浏览器 -->
    <script src="./newjsandcss/polyfill.js"></script>
    <!-- 事件发射器库，它为javascript对象提供观察者模式 -->
    <script src="./newjsandcss/uevent.min.js"></script>
    <!-- 模板引擎 -->
    <script src="./newjsandcss/doT.min.js"></script>
    <!-- 阻止睡眠 -->
    <script src="./newjsandcss/NoSleep.js"></script>
    <!-- 处理手机陀螺仪方向 -->
    <script src="./newjsandcss/DeviceOrientationControls.js"></script>
    <!-- 双屏渲染 -->
    <script src="./newjsandcss/StereoEffect.js"></script>
    <!-- 全景图插件 -->
    <script src="./newjsandcss/photo-sphere-viewer.js"></script>

    <!-- text used for the marker description -->
    <script type="text/template" id="pin-content">
        <h1>HTML Ipsum Presents</h1>
        <img src="newimg/pin2.png" style="width:100%" />
    </script>

    <script>
  var panos = [
    {
        url: 'newimg/cs.jpg',
      desc: '底部导航描述标题',
      target: {
        longitude: 180.848,
        latitude: -0.244,
        zoom: 50
      }
    }, {
        url: 'newimg/Bryce-Canyon-By-Jess-Beauchemin.jpg',
      desc: 'Bryce Canyon National Park <b>&copy; Jess Beauchemin</b>',
      target: {
        longitude: 3.715,
        latitude: 0.574,
        zoom: 50
      }
    }
  ];

  var PSV = new PhotoSphereViewer({
      container: 'chartdiv', //必选，放置全景图的容器
    panorama: panos[0].url, //必选，全景图的路径
    caption: panos[0].desc, //描述
    cache_texture:15000,　//缓存
    loading_img: 'newimg/photosphere-logo.gif', //加载文件时的图片路径
    longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], //经度范围
    latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], //维度范围
    anim_speed: '-2rpm', //旋转速度
    default_fov: 100, //初始视野，最小视野和最大视野之间
    fisheye: true, //使用true启用鱼眼效果或指定效果强度（true=1.0）此模式可能会对标记渲染产生副作用。
    move_speed: 1.1, //移动速度   拖动图片转动速度
    time_anim: false, //全景图自动开始旋转之前的空闲时间（毫秒）。禁用为False。
//    touchmove_two_fingers: true, //需要两个手指来旋转全景。这允许在包含查看器的页面中进行标准的触摸滚动导航。如果启用，当仅检测到一次触摸时，将显示要求用户使用两个手指的覆盖。
//    mousemove_hover: true, //旋转全景只需移动光标，以查看是否需要点击 移动。
    navbar: [ //导航栏是一个数组，它可以包含以下核心按钮：自动旋转、缩放、下载、标记、陀螺仪、立体声、全屏，以及用于创建自定义按钮的标题和对象
      'autorotate', 'zoom', 'download', 'markers',
      {
        title: 'Change image', //按钮的名字
        className: 'custom-button', //添加到button元素的CSS类
        content: '🔄', //显示的文本
        onClick: (function() { //点击时触发的事件
          var i = 0;
          var loading = false;

          return function() {
            if (loading) {
              return;
            }
            if(PSV.getPanoramaCache(panos[i].url)){
              PSV.clearPanoramaCache(panos[i].url);//清楚缓存
            }
            i = 1 - i;
            loading = true;
            PSV.clearMarkers(); //清除所有标记
            PSV.setPanorama(panos[i].url, true, true) //加载新的全景文件
              .then(function () {
                PSV.setCaption(panos[i].desc);
                loading = false;
              });
          }
        }())
      },
      {
        title  : 'Random position',
        className: 'custom-button',
        content: '🔀',
        onClick: function() {//点击时触发的事件
          PSV.animate({ //动画
            longitude: (Math.random() - 0.5) * 3 / 2 * Math.PI,
            latitude: (Math.random() - 0.5) * 3 / 4 * Math.PI,
            zoom: Math.random() * 60 20
          }, 1500);
        }
      },
      'caption', 'gyroscope', 'stereo', 'fullscreen'
    ],
    //标记，https://photo-sphere-viewer.js.org/markers.html
    markers: (function() {
      var a = [];
      a.push({
        id: 'lorem',
        tooltip: {
          content: 'Lorem ipsum dolor ist amet et consecturo.',
          position: 'bottom right'
        },
        //content: document.getElementById('pin-content').innerHTML,//添加内容
        latitude: 5,
        longitude: 0.20,
        image: 'newimg/pin2.png',
        width: 32,
        height: 32,
        anchor: 'bottom center'
      });
      return a;
    }())
  });
  function asd() {
      alert(1);
  }
  PSV.on('select-marker', function (marker, dblclick) { //选择某个标记
      alert("跳转");
      location.href = '/html/HtmlPage2.html';
    //if (marker.data && marker.data.deletable) {
    //  if (dblclick) {
    //    PSV.removeMarker(marker);
    //  }
    //  else {
    //    PSV.updateMarker({
    //      id: marker.id,
    //      image: 'newimg/pin2.png'
    //    });
    //  }
    //}
  });

  //PSV.on('over-marker', function(marker) { //划过
  //  console.log('over', marker.id);
  //});

  //PSV.on('leave-marker', function(marker) { //离开
  //  console.log('leave', marker.id);
  //});

  //PSV.on('select-marker-list', function(marker) {
  //  console.log('select-list', marker.id);
  //});

  //PSV.on('goto-marker-done', function(marker) {
  //  console.log('goto-done', marker.id);
  //});
    </script>
</body>
</html>