全景图展示的原理----大概知道一下~
等距圆柱投影：又称方格投影。
假想地球球面与一个圆柱面相切于赤道。并将球面上的所有经纬线投影到圆柱面上，经纬线被投影成两两互相垂直的直线，并且经距和纬距相等。
这个圆柱的侧面展开就是一个全景图，可以算出：侧面的长为一个圆周，高为半个圆周。所以全景图的长宽比为 2 : 1。
展示全景图：就是圆柱侧面投影的逆运算。把圆柱侧面贴到一个球上，我们在球中心看！
1、photo-sphere-viewer插件官网是：Photo Sphere Viewer
2、在html中使用：
<head> <meta charset="utf-8"> <title>全景图</title> <style> #viewer { width: 1000px; height: 500px; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css" /> </head> <body> <div id="viewer"></div> </body> <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script> <script> var viewer = new PhotoSphereViewer.Viewer({ container: document.querySelector('#viewer'), panorama: 'img/11.jpeg' }); </script>
3、在vue脚手架中使用
首先把插件下载到项目中：npm install photo-sphere-viewer
<template> <div id="viewer"></div> </template> <script> import * as PhotoSphereViewer from 'photo-sphere-viewer' import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' export default { data() { return { factoryLink: require('../../assets/img/11.jpeg'), //测试全景图 } }, mounted() { //全景图展示 var viewer = new PhotoSphereViewer.Viewer({ container: document.querySelector('#viewer'), panorama: this.factoryLink }); }, methods: { }, } </script> <style scoped> #viewer { width: 1200px; height: 600px; } </style>