tpanorama插件包括兩部分：全景展示部分，全景標(biāo)記編輯部分，二者結(jié)合使用非常方便！ 使用插件首先需要引用 three.js 1.全景展示1.1 參數(shù)說明
| 參數(shù)名稱 | 類型 | 說明 | | container | string | 存放全景的容器id | | url | string | 存放全景圖片的路徑 | | lables | array | {position:{lon:經(jīng)度,lat:緯度},logoUrl:'logo路徑',text:'內(nèi)容'} | | widthSegments | num | 水平切段數(shù) | | heightSegments | num | 垂直切段數(shù)（值小粗糙速度快，值大精細(xì)速度慢） | | pRadius | num | 全景球的半徑，影響視覺效果，推薦使用默認(rèn)值 | | minFocalLength | num | 鏡頭最小拉近距離 | | maxFocalLength | num | 鏡頭最大拉近距離 | | showlable | 'show'/'click' | 顯示標(biāo)記的方式，分為直接顯示和點擊顯示 |
1.2 公用方法
方法名稱 | 說明 | config | 給全景對象設(shè)置配置信息 | init | 初始化全景對象 | clean | 清除全景對象 |
1.3 使用 初始化：（參數(shù)不設(shè)置則采用默認(rèn)參數(shù)） - var opt, tp;
- window.onload = function() {
- opt = {
- container: 'panoramaConianer', //容器
- url: 'img/p1.png',
- lables: [{
- position: {
- lon: 180,
- lat: 0
- },
- logoUrl: '',
- text: '我是一個標(biāo)記'
- }],
- widthSegments: 60, //水平切段數(shù)
- heightSegments: 40, //垂直切段數(shù)（值小粗糙速度快，值大精細(xì)速度慢）
- pRadius: 1000, //全景球的半徑，推薦使用默認(rèn)值
- minFocalLength: 6, //鏡頭最a小拉近距離
- maxFocalLength: 100, //鏡頭最大拉近距離
- showlable: 'show' // show,click
- }
- tp = new tpanorama(opt);
- tp.init();
- }
修改某些參數(shù) - opt.showlable = 'click';
- opt.lables = [{position:{lon:180,lat:0},logoUrl:'img/logo.png',text:'點擊了這個標(biāo)記'}];
- opt.url = 'img/p1.png';
- tp.clean();
- tp.config(opt);
- tp.init();
2.添加全景標(biāo)記工具 在展示全景的時候，你或許會對標(biāo)記的位置產(chǎn)生了疑問，如何確定標(biāo)記的位置？ 我們可以使用類似經(jīng)緯度的參數(shù)來表達(dá)它，注意這里使用的經(jīng)緯度并不是真正的經(jīng)緯度，是我們根據(jù)地球的經(jīng)緯度模擬出來的一個參數(shù)。 下面這個工具就是用于獲取我們想標(biāo)記位置的 '經(jīng)緯度'的一種方法，有了這個工具就可以完美結(jié)合上面的全景展示工具來使用了。 2.1 參數(shù)說明 參數(shù)名稱 | 類型 | 說明 | container | string | 存放全景設(shè)置的容器id | imgUrl | string | 全景圖路徑 | width | string | 指定寬度（這里圖片必須嚴(yán)格按比例放置），高度自適應(yīng) | showGrid | bool | 是否顯示全景圖的網(wǎng)格 | showPosition | bool | 是否顯示經(jīng)緯度信息框 | lableColor | string | 標(biāo)記在圖上的顏色 | gridColor | string | 繪制格網(wǎng)的顏色 | lables | array | 以前標(biāo)記過的標(biāo)記 {lon:114,lat:38,text:'標(biāo)記一'} | addLable | bool | 是否開啟雙擊添加標(biāo)記(必須開啟經(jīng)緯度提示) | getLable | bool | 是否開啟右鍵查詢標(biāo)記 (必須開啟經(jīng)緯度提示) | deleteLbale | bool | 開啟默認(rèn)中鍵刪除 （必須開啟經(jīng)緯度提示） |
2.2 公共方法
方法名稱 | 說明 | config | 給全景對象重新設(shè)置配置信息 | init | 初始化全景設(shè)置對象 | getAllLables | 獲取所有已經(jīng)添加的標(biāo)記 | addLable | 用于手動設(shè)置添加標(biāo)記 | getLable | 用于手動設(shè)置獲取標(biāo)記 | delete | 用于手動刪除標(biāo)記 | listen | 對全景對象監(jiān)聽事件 |
2.3 使用2.3.1 默認(rèn)參數(shù)使用 使用默認(rèn)參數(shù)，對標(biāo)記的增刪查改已封裝好，所有標(biāo)記設(shè)置完成時可使用getAll方法與數(shù)據(jù)庫進(jìn)行交互 初始化（參數(shù)不設(shè)置則采用默認(rèn)參數(shù)） - var opt, s;
- window.onload = function() {
- opt = {
- container: 'set', //setting容器
- imgUrl: 'img/p3.png',
- width: '1000px', //指定寬度，高度自適應(yīng)
- showGrid: true, //是否顯示格網(wǎng)
- showPosition: true, //是否顯示經(jīng)緯度提示
- lableColor: '#9400D3', //標(biāo)記顏色
- gridColor: '#48D1CC', //格網(wǎng)顏色
- lables: [{
- lon: -72.00,
- lat: 9.00,
- text: '藍(lán)窗戶'
- }, {
- lon: 114.12,
- lat: 69.48,
- text: '一片云彩'
- }, {
- lon: 132.48,
- lat: -12.24,
- text: '大海'
- }], //標(biāo)記 {lon:114,lat:38,text:'標(biāo)記一'}
- addLable: true, //開啟后雙擊添加標(biāo)記 (必須開啟經(jīng)緯度提示)
- getLable: true, //開啟后右鍵查詢標(biāo)記 (必須開啟經(jīng)緯度提示)
- deleteLbale: true //開啟后中鍵刪除(必須開啟經(jīng)緯度提示)
- };
- s = new tpanoramaSetting(opt);
- s.init();
- }
參數(shù)切換 - 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: '藍(lán)色'
- }, {
- 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 自定義事件 很多情況下默認(rèn)參數(shù)不能滿足我們的業(yè)務(wù)需求，這時可以自定義事件。 插件提供了listen函數(shù)用于監(jiān)聽各種事件。
添加標(biāo)記： - s.listen('dblclick', function(e) {
- var text = prompt("標(biāo)記名稱");
- if (text != null && text != undefined && text != "") {
- s.addLable(e, text);
- alert("添加標(biāo)記：" + text + " 后臺交互");
- }
- });
查詢標(biāo)記: - s.listen('mousedown', function(e) {
- if (e.button == 2) {
- var p = s.getLable(e);
- if (p.lon != null && p.lon != undefined && p.lon != "") {
- alert("經(jīng)度：" + p.lon + ",緯度：" + p.lat + ",名稱：" + p.text + " 其他操作");
- }
- }
- });
刪除標(biāo)記: - 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("您確認(rèn)要刪除該標(biāo)記嗎？");
- if (c) {
- s.delete(p);
- s.clean();
- s.init();
- alert("刪除成功！ 后臺交互")
- }
- }
- }
- });
|
收藏
點贊
反對
