lyq
/
tpanorama


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>全景标记设置(自动参数)</title>
    <script src="src/three.js"></script>
    <script src="lib/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>