一款非常好用的全景生成,全景标记编辑插件!

所属分类:媒体-图片展示

 4338  56  查看评论 (4)
一款非常好用的全景生成,全景标记编辑插件! ie兼容11

注:本地预览请用火狐浏览器,chrome浏览器需要在服务端运行才有效果

tpanorama

插件包括两部分:全景展示部分,全景标记编辑部分,二者结合使用非常方便!

使用插件首先需要引用 three.js

1.全景展示

1.1 参数说明

参数名称类型说明
containerstring存放全景的容器id
urlstring存放全景图片的路径
lablesarray{position:{lon:经度,lat:纬度},logoUrl:'logo路径',text:'内容'}
widthSegmentsnum水平切段数
heightSegmentsnum垂直切段数(值小粗糙速度快,值大精细速度慢)
pRadiusnum全景球的半径,影响视觉效果,推荐使用默认值
minFocalLengthnum镜头最小拉近距离
maxFocalLengthnum镜头最大拉近距离
showlable'show'/'click'显示标记的方式,分为直接显示和点击显示

1.2 公用方法

方法名称说明
config给全景对象设置配置信息
init初始化全景对象
clean清除全景对象

1.3 使用

初始化:(参数不设置则采用默认参数)

var opt, tp;
window.onload = function() {
    opt = {
        container: 'panoramaConianer', //容器
        url: 'img/p1.png',
        lables: [{
            position: {
                lon: 180,
                lat: 0
            },
            logoUrl: '',
            text: '我是一个标记'
        }],
        widthSegments: 60, //水平切段数
        heightSegments: 40, //垂直切段数(值小粗糙速度快,值大精细速度慢)
        pRadius: 1000, //全景球的半径,推荐使用默认值
        minFocalLength: 6, //镜头最a小拉近距离
        maxFocalLength: 100, //镜头最大拉近距离
        showlable: 'show' // show,click
    }
    tp = new tpanorama(opt);
    tp.init();
}

修改某些参数

opt.showlable = 'click';
opt.lables = [{position:{lon:180,lat:0},logoUrl:'img/logo.png',text:'点击了这个标记'}];
opt.url = 'img/p1.png';
tp.clean();
tp.config(opt);
tp.init();

2.添加全景标记工具

在展示全景的时候,你或许会对标记的位置产生了疑问,如何确定标记的位置?

我们可以使用类似经纬度的参数来表达它,注意这里使用的经纬度并不是真正的经纬度,是我们根据地球的经纬度模拟出来的一个参数。

下面这个工具就是用于获取我们想标记位置的 '经纬度'的一种方法,有了这个工具就可以完美结合上面的全景展示工具来使用了。

2.1 参数说明

参数名称类型说明
containerstring存放全景设置的容器id
imgUrlstring全景图路径
widthstring指定宽度(这里图片必须严格按比例放置),高度自适应
showGridbool是否显示全景图的网格
showPositionbool是否显示经纬度信息框
lableColorstring标记在图上的颜色
gridColorstring绘制格网的颜色
lablesarray以前标记过的标记 {lon:114,lat:38,text:'标记一'}
addLablebool是否开启双击添加标记(必须开启经纬度提示)
getLablebool是否开启右键查询标记 (必须开启经纬度提示)
deleteLbalebool开启默认中键删除 (必须开启经纬度提示)

2.2 公共方法

方法名称说明
config给全景对象重新设置配置信息
init初始化全景设置对象
getAllLables获取所有已经添加的标记
addLable用于手动设置添加标记
getLable用于手动设置获取标记
delete用于手动删除标记
listen对全景对象监听事件

2.3 使用

2.3.1 默认参数使用

使用默认参数,对标记的增删查改已封装好,所有标记设置完成时可使用getAll方法与数据库进行交互

初始化(参数不设置则采用默认参数)

var opt, s;
window.onload = function() {
    opt = {
        container: 'set', //setting容器
        imgUrl: 'img/p3.png',
        width: '1000px', //指定宽度,高度自适应
        showGrid: true, //是否显示格网
        showPosition: true, //是否显示经纬度提示
        lableColor: '#9400D3', //标记颜色
        gridColor: '#48D1CC', //格网颜色
        lables: [{
            lon: -72.00,
            lat: 9.00,
            text: '蓝窗户'
        }, {
            lon: 114.12,
            lat: 69.48,
            text: '一片云彩'
        }, {
            lon: 132.48,
            lat: -12.24,
            text: '大海'
        }], //标记   {lon:114,lat:38,text:'标记一'}
        addLable: true, //开启后双击添加标记  (必须开启经纬度提示)
        getLable: true, //开启后右键查询标记  (必须开启经纬度提示)
        deleteLbale: true //开启后中键删除(必须开启经纬度提示)
    };
    s = new tpanoramaSetting(opt);
    s.init();
}

参数切换

function changeImg(name) {
    if (name == "p1") {
        opt.lables = [{
            lon: 178.56,
            lat: -15.84,
            text: '神像'
        }]
    }
    if (name == "p2") {
        opt.lables = [{
            lon: -80.64,
            lat: -16.92,
            text: '蓝色'
        }, {
            lon: 46.80,
            lat: 10.44,
            text: '绿色'
        }]
    }
    if (name == "p4") {
        opt.lables = [{
            lon: 48.96,
            lat: -20.16,
            text: '樱花'
        }]
    }
    opt.imgUrl = 'img/' + name + '.png';
    s.clean();
    s.config(opt);
    s.init();
}

2.3.2 自定义事件

很多情况下默认参数不能满足我们的业务需求,这时可以自定义事件。

插件提供了listen函数用于监听各种事件。

添加标记:

s.listen('dblclick', function(e) {
    var text = prompt("标记名称");
    if (text != null && text != undefined && text != "") {
        s.addLable(e, text);
        alert("添加标记:" + text + " 后台交互");
    }
});

查询标记:

s.listen('mousedown', function(e) {
    if (e.button == 2) {
        var p = s.getLable(e);
        if (p.lon != null && p.lon != undefined && p.lon != "") {
            alert("经度:" + p.lon + ",纬度:" + p.lat + ",名称:" + p.text + "   其他操作");
        }
    }
});

删除标记:

s.listen('mousedown', function(e) {
    if (e.button == 1) {
        var p = s.getLable(e);
        if (p.lon != null && p.lon != undefined && p.lon != "") {
            var c = confirm("您确认要删除该标记吗?");
            if (c) {
                s.delete(p);
                s.clean();
                s.init();
                alert("删除成功!   后台交互")
            }
        }
    }
});
相关插件-图片展示

Sly

支持水平和垂直方向切换,支持拖动滑动条。
  图片展示
 17455  71

jQuery图片缩放插件EasyZoom

EasyZoom是一个优雅,高度优化的jQuery插件支持图像缩放和平移基于源图放大。easyzoom还支持触摸功能的设备,并与CSS很容易定制。
  图片展示
 23381  38

可互动的360度超炫3D旋转立方体动画特效

用户可以使用鼠标拖动立方体来查看各个面,或者通过点击左侧的导航链接页可以切换到立方体相应的面中。
  图片展示
 13825  89

不一样的层叠照片动画-ANIMATED CSS3 PHOTO STACK

今天我要给大家介绍一款动画的照片堆叠插件,两张照片之间有多种切换效果可供我们选择,而这些效果仅仅使用到了css3,所以要想使用该插件,就必需是支持css3的浏览器和设备。该插件也会更新到可以像幻灯片一样去使用。
  图片展示
 10099  17

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    ?木鱼咸菜 0
    2017/10/30 13:48:42

    不支持移动端吗?

        qq1009900
        2017/10/30 14:00:16
        是啊,暂时还不行,手机浏览器对three.js支持不太好
    回复
    ixy 0
    2017/10/19 9:11:18

    下载到本地怎么不可以用

        qq1009900
        2017/10/19 9:37:01

        可以到github下载插件,插件库的不是很完整,本地浏览的话请用火狐浏览器,chome会有问题,到服务器上浏览就没有问题了!

    回复
取消回复