panolens官方文档Home - Panolens
1.加载核心js库 (文件在untils里面)
import '@/utils/panolens/three.min.js';
import '@/utils/panolens/panolens.min.js';
/项目中 /railway/modalIframe/playPanorama/player/js/panolens-ht.js 为修改后版本 可以获取在全景点击获取坐标
//<script src="js/panolens-ht.js"></script>
2.创建全景容器
<div id="newqj" :style="{ display: tabBcnclick == 1 ? 'block' : 'none' }"
style="width: 60%;height: 422px;margin: 0 auto;margin-top: 30px;position: relative;overflow: hidden;">
<div style="" class="leftArr">
<el-icon style="font-size: 24px !important;cursor: pointer;" @click.stop="leftArrowFnc">
<ArrowLeft />
</el-icon>
</div>
<div class="rightArr" style="">
<el-icon style="font-size: 24px !important;cursor: pointer;"
@click.stop="rightArrowFnc">
<ArrowRight />
</el-icon>
</div>
</div>
3,加载函数和默认值
const currentIndex = ref(0);
const imgUrl = ref('')
const panorama = ref('')
const viewer = ref('')
panoramaFilesList为后端返回的数组,包含file_path
function panoramaFnc() {
imgUrl.value = formData.value.panoramaFilesList[currentIndex.value].file_path;
panorama.value = new PANOLENS.ImagePanorama(imgUrl.value);//将全景鱼眼图片生成全景
// 加载图片数据
viewer.value = new PANOLENS.Viewer({
container: document.getElementById('newqj'),//选中容器承载视图
autoHideInfospot: false,//点击非热点区域 自动隐藏信息点 true:触发,false:不触发 默认值为true
controlButtons: ['fullscreen'],//全景底部按钮 默认值 ['fullscreen', 'setting', 'video'] fullscreen设置全屏 setting添加设置按钮
});
viewer.value.add(panorama.value);//生成的全景必须放入viewer视图中才能显示
}
4.上一个下一个方法
function leftArrowFnc(e) {
if (currentIndex.value > 0) {
currentIndex.value--;
panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)
} else {
return
}
}
function rightArrowFnc() {
if (currentIndex.value < formData.value.panoramaFilesList.length - 1) {
currentIndex.value++;
panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)
} else {
return
}
}
5.切换到360全景方法
function tabBtnClickFnc(item) {
tabBcnclick.value = item.value
console.log(tabBcnclick.value);
nextTick(() => {
panoramaFnc()
// panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)
})
}
效果图: