lyq
/
tpanorama


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

<head>
    <meta charset="UTF-8">
    <title>全景标记设置(自动参数)</title>
    <script src="three.js"></script>
    <script src="/origin/tpanorama.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>

    <script>
        var opt, s, img;
        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: '樱花' }]
            }
            img = 'img/' + name + '.png';
            opt.imgUrl = img;
            s.clean();
            s.config(opt);
            s.init();
        }

        function preview() {
            document.getElementById('set').innerHTML = '';
            var lables = s.getAllLables();
            s.clean();
            lables = lables.map((l) => ({
                position: { lon: l.lon, lat: l.lat },
                text: l.text
            }))
            opt = {
                container: 'set',//容器
                url: img || 'img/p3.png',
                lables: lables,
                widthSegments: 60,//水平切段数
                heightSegments: 40,//垂直切段数（值小粗糙速度快，值大精细速度慢）
                pRadius: 1000,//全景球的半径，推荐使用默认值
                minFocalLength: 6,//镜头最小拉近距离
                maxFocalLength: 100,//镜头最大拉近距离
            }
            tp = new tpanorama(opt);
        }


    </script>
</head>

<body>

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

    </br>

    <button onclick="getAll()">获取所有标记</button>
    &nbsp;&nbsp;
    <button onclick="preview()">预览</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>