前端全景图方案

全景图前端方案

​ 最近有新的需求需要做个全景图，第一想法是three.js来做这一应用场景，但时间紧就，同时业务需求也蛮多的故选择了第三方组件库。

​ 这里找到了这几个方案tpanorama和photo-sphere-viewer及第三方提供的付费服务，前者相对简单，适合简单需求，后者功能较多主页务推荐尝试；

这是宁海县下一处效果图 使用的是photo-sphere-viewer大家可以先看下效果再考虑相关内容

图片源

​ 首先需要一张球面图，这种图片通常可通过多张合成，我们是通过无人机拍摄自动生成，具体方法可以查找相关教程，通常UI都可以处理。

案例

基础部分

引入相关组件

npm install photo-sphere-viewer

创建代码

      const width = document.body.clientWidth || document.documentElement.clientWidth
      const height = document.body.clientHeight || document.documentElement.clientHeight
      //获取dom 这里的操作与echarts非常相似，同时记得创建视图的生命周期
      const viewer = new Viewer({
        //挂载dom   
        container: document.querySelector('#viewer'),
        //引入合成好的六面图 
        panorama: require('@img/htc.jpg'),
        //视图加载创建的logo
        loadingImg: require('@a/photosphere-logo.gif'),
        //视角旋转配置
        sphereCorrectionReorder: true,
        //相关插件 
        plugins: [
          //陀螺仪
          //PhotoSphereViewer.GyroscopePlugin,
          Gyroscope,
          [MarkersPlugins, {
            markers: e
          }]
        ],
        size: {
          width: width,
          height: height
        }
      })
      // 获取当前点击位置经纬度
      viewer.on('click', (e, data) => {
      alert(
      `${data.rightclick ? 'right clicked' : 'clicked'}
       at longitude: ${data.longitude} latitude:${data.latitude}`)
      })

其中还可加入vr 陀螺仪等功能方案

官方文档可搜索photo-sphere-viewer，