vue 加载720全景图

步骤
1.安装photo-sphere-viewer
官网 https://photo-sphere-viewer.js.org/

npm install --save photo-sphere-viewer

2.引入

import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { Viewer } from 'photo-sphere-viewer'

3.主要代码

<div id="viewer720"></div>

showViewer720 () {let tempUrl = require('../../public/mp4/yjy.jpg') // 加载720图片地址this.viewer = new Viewer({container: document.querySelector('#viewer720'),panorama: tempUrl})// 当视图经度和/或纬度改变时触发this.viewer.on('position-updated', (e, position) => {console.log(`视图经度和/或纬度改变111: ${position.longitude} latitude: ${position.latitude}`,  position.longitude*(Math.PI / 360), position.latitude*(Math.PI / 180))})// 当缩放级别改变时触发this.viewer.on('zoom-updated', (e, level) => {console.log(`放级别改变 ${level}`, e)})
}

vue 加载720全景图相关推荐

Vue 加载 SVG 图片文件
Vue 加载 SVG 图片文件 /svg/icons.js export default {// LOGOlogo: require('./logo.svg'),logo_content: requi ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
vue加载视频流，实现直播功能
文章目录前言一.视频流是什么? 二.vue加载rtmp视频流 1.方法一:video.js 2.方法二:ckplayer 三.vue加载hls视频流 1.index.html中 2.video-p ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
electron+vue加载本地wav音频资源失败
解决electron+vue加载本地音频失败 1.下载electron-vue程序 vue init simulatedgreg/electron my-project cd my-project n ...
vue加载服务器json文件,Vue加载json文件的方法简单示例
本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
vue 加载体验优化
2019独角兽企业重金招聘Python工程师标准>>> 网络查询收集: 1.路由懒加载 // 需要ES6支持 const HelloWorld = () => import(' ...
vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...

vue 加载720全景图

vue 加载720全景图相关推荐

最新文章

热门文章