探索photo-sphere-viewer全景插件
程序员文章站
2022-06-15 10:15:46
此插件是一位外国人写的,官网API地址:https://photo-sphere-viewer.js.org/#methods 我只是记录下我在使用此插件时用到的方法和相关属性,以防以后忘记 1.按要求在页面中引入文件后,使用以下方式调用,其它配置 jq选中的元素最后返回的是一个document,不 ......
此插件是一位外国人写的,官网api地址:https://photo-sphere-viewer.js.org/#methods
我只是记录下我在使用此插件时用到的方法和相关属性,以防以后忘记
1.按要求在页面中引入文件后,使用以下方式调用,其它配置
var viewer =new photosphereviewer({
panorama: $('#p'+p_id).find('li:first-child').find('img').attr('data-src'), //全景图片的路径
container: document.getelementbyid('showimg'), //承载全景图的div盒子
cache_texture:15000,
default_long:'-46', //初始经度,介于0和2π之间
default_lat:'0', //初始纬度,介于-π/ 2和π/ 2之间。
min_fov:30, //最小视野(对应于最大变焦),介于1和179之间。
max_fov:90, //最大视野(对应于最小变焦),介于1和179之间。
default_fov:90,
time_anim: true, //全景图在time_anim毫秒后会自动进行动画 可以填写数字
fisheye:false,
navbar: [
'autorotate',
'zoom',
'gyroscope',
'caption',
'markers',
//{ //自定义按钮
// id: 'my-button',
// title: 'hello world',
// classname: 'custom-button',
// content: 'custom',
// onclick: function() {
// alert('hello from custom button');
// }
//},
],
size: { // resize the panorama
width: '100%',
height: '100%'
},
gyroscope:true,
loading_txt:'loading.....', // 显示在加载圆的中心的图像的路径。
markers: null,
usexmpdata:true,
pano_data: { //在此示例中,4000x2000图像用作6000x3000全景图的一部分,剩余空间将呈现为黑色。
full_width: 6000,
full_height: 3000,
cropped_width: 4000,
cropped_height: 2000,
cropped_x: 1000,
cropped_y: 500
},
transition: {
duration: 1500, // duration of transition in milliseconds
loader: true // should display the loader ?
}
});
2.若想在原插件状态栏中加入html,比如按钮啊,icon啊 什么的:
$($('.psv-caption')[0]).html("巴拉巴拉~"); 若不这样写,像平时这样来:$('.psv-caption') 是不行的,此代码返回的是
jq选中的元素最后返回的是一个document,不能直接操作
3.选中全景中标记:
psv.on('select-marker', function (marker) {});
marker携带了新建标记时传递的信息:唯一id、 标记类型.....
4. 全景图正在旋转时触发:psv.on('position-updated',function(po){});
可以是自动旋转,也可以是手动滑动 ,po返回的是一个json对象,是全景当前位置经纬度坐标信息
5.确定当前图片是否在缓存中:
psv.getpanoramacache(src) 返回ture:在缓存中,false:未在缓存中
此方法只有在开始配置时设置过缓存数量(cache_texture ) 才可以使用,否则报错,因为cache_texture 默认为0
6.清除缓存:psv.clearpanoramacache(src) //src:图片地址
7.重新设置图片全景:psv.setpanorama(src,true,true);
8.判断当前全景是否有标记:
if( psv.hud.markers){
psv.hud.clearmarkers();
}
9.为当前全景添加标记: 标记格式按照官网去写
psv.addmarker({marker})
10.重新渲染全景:
psv.render();
11.当全景加载完成后再进行操作,否则很卡顿:
psv.on('ready', function() {});
上一篇: Python之捕捉异常详解