lyq
/
tpanorama


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全景标记设置(自动参数)</title>
    <script src="js/three.js"></script>
    <script src="js/tpanorama.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

    </style>

    <script>
        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 getAll () {
            var arr =  s.getAllLables();
            var str =  "";
            for(var i in arr){
                str += "</br>" + "经度："+arr[i].lon+",纬度："+arr[i].lat+",标记："+arr[i].text ;
            }
            document.getElementById('info').innerHTML = str;
        }

        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();
        }


    </script>
</head>
<body>

<div id="set"></div>

</br>

<button onclick="getAll()">获取所有标记</button>
&nbsp;&nbsp;
<button onclick="changeImg('p1')">图1</button>
&nbsp;&nbsp;
<button onclick="changeImg('p2')">图2</button>
&nbsp;&nbsp;
<button onclick="changeImg('p4')">图4</button>

</br>

<div id="info"></div>

</body>
</html>