dwweb-pc/2018专题/1806全景图专题-商务/js/scene2.js

import '../scss/index.scss'
import '../scss/page/scene1.scss'

import PhotoSphereViewer from 'photo-sphere-viewer'
import util from './until'

// import pic from '../img/P2.jpg'
import location from '../img/location.png';
import glass from '../img/glass.png'; //望远镜
import eUrl from '../img/E.png';
import snowCircle from '../img/snow.png';

var viewer = null
var snowFlag = false
var timer = null

var indexPath = $('body').attr('data-path')

// 进度相关
var progressNum = 0
var allStep = 5
var progressFlag = {
    'bear': false,
    'lynx': false,
    'road': false,
    'bird': false,
    'lookout': false
}

var mp4UrlMap = {

}

var snowV = {
    init() {
        this.initSnowView()
        this.handleReady()
        this.getVideoSource()
        this.handleNav()
        this.snow()
    },
    initSnowView() {
        viewer = new PhotoSphereViewer({
            container: 'photosphere',
            panorama: 'http://hdzt.duowan.com/s/1806hunter/P2.jpg',
            // panorama: pic,
            min_fov: 50,
            max_fov: 70,
            navbar: false,
            time_anim: false,
            markers: [
                // 黑熊
                {
                    id: 'beer-polygon',
                    polygon_px: [
                        [3741, 1679], [3741, 2044], [4100, 2044],[4100, 1679]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-beer',
                    x: 3891,
                    y: 1763,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // lynx
                {
                    id: 'lynx-polygon',
                    polygon_px: [
                        [680, 1972], [680, 2144], [869, 1972],[869, 2144]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-lynx',
                    x: 792,
                    y: 2020,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 大鸟
                {
                    id: 'bird-polygon',
                    polygon_px: [
                        [5932, 1296], [6096, 1296], [6096, 1428],[5932, 1428]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-bird',
                    x: 6032,
                    y: 1360,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 望远镜
                {
                    id: 'glass',
                    x: 6268,
                    y: 1700,
                    image: glass,
                    width: 56,
                    height: 59,
                    anchor: 'bottom center',
                },
                // 铁路
                {
                    id: 'location-road',
                    x: 1694,
                    y: 1948,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
            ]
        })
    },
    handleReady() {
        viewer.on('ready', function() {
            $('.loading-bg').hide()
            viewer.rotate({
                x: 0,
                y: 0
            });
            viewer.animate({
                x: 3500,
                y: 1900
            },2000);
        });

        viewer.on('position-updated', function(position) {
            let lgt = position.longitude
            let lat = position.latitude
            if(lgt > 6 && lat < 0 && !snowFlag) {
                snowFlag = true
                $('#snow-suggest-modal').fadeIn()
                $('.nav').fadeIn()
            }
        })
    },
    // 雪花动画
    snow() {
        //1、定义一片雪花模板
        var flake = $("<img class='snow-circle' src=" + snowCircle + ">").css({
            "position": "absolute"
        })

        //获取页面的宽度，利用这个数来算出，雪花开始时left的值
        var documentWidth = $(document).width();

        //获取页面的高度 相当于雪花下落结束时Y轴的位置
        var documentHieght = $(document).height();

        //定义生成一片雪花的毫秒数
        var millisec = 200;
        //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
        timer = setInterval(function() {
            //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
            var startLeft = Math.random() * documentWidth;

            //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
            var endLeft = Math.random() * documentWidth;

            //随机生成雪花大小
            var flakeSize = 5 + 20 * Math.random();

            //随机生成雪花下落持续时间
            var durationTime = 4000 + 7000 * Math.random();

            //随机生成雪花下落 开始 时的透明度
            var startOpacity = 0.7 + 0.3 * Math.random();

            //随机生成雪花下落 结束 时的透明度
            var endOpacity = 0.2 + 0.2 * Math.random();

            //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
            flake.clone().appendTo($("body")).css({
                "left": startLeft,
                "opacity": startOpacity,
                "font-size": flakeSize,
                "top": "-25px",
            }).animate({ //执行动画
                "left": endLeft,
                "opacity": endOpacity,
                "top": documentHieght
            }, durationTime, function() {
                //4、当雪花落下后，删除雪花。
                $(this).remove(); 
            });
        }, millisec);
    },
    clearTime() {
        clearInterval(timer)
    },
    getVideoSource() {
        let vids = ['8893045','8891917','8893043','8891831','8891835','8890691','8890693','8890695','8894969','8897799','8897801','8897803']
        var videoEls = {
            '8891831': 'lookup',
            '8891835': 'snow',
            '8893045': 'aim',
            '8891917': 'shoot',
            '8893043': 'open',
            '8890691': 'book-lake',
            '8890693': 'book-taiga',
            '8890695': 'book-elden',
            '8894969': 'picVideo',
            '8897799': 'openB',
            '8897801': 'aimB',
            '8897803': 'shootB',
        }
        
        $.ajax({
            type: "GET",
            dataType: "json",
            url: `//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`,
            success: function(data) {
                for(var i in data) {
                    let resouce = util.deCodeArg(data[i].c).all,
                        source = resouce.yuanhua || resouce[1300] || resouce[1000] || resouce[350]
                    let name = videoEls[i] 
                    mp4UrlMap[name] = source.src
                }
                document.getElementById('open-video').src = mp4UrlMap['open']
                document.getElementById('aim-video').src = mp4UrlMap['aim']
                document.getElementById('shoot-video').src = mp4UrlMap['shoot']

                document.getElementById('open-video-b').src = mp4UrlMap['openB']
                document.getElementById('aim-video-b').src = mp4UrlMap['aimB']
                document.getElementById('shoot-video-b').src = mp4UrlMap['shootB']

                document.getElementById('book-lake-video').src = mp4UrlMap['book-lake']
                document.getElementById('book-taiga-video').src = mp4UrlMap['book-taiga']
                document.getElementById('book-elden-video').src = mp4UrlMap['book-elden']

                snowC.lookoutClick()
                snowC.playVideo()
            }
        })
    },
    // 导航权限处理
    handleNav() {
        // 初始化加载时
        let permision = localStorage.getItem('hunter_permision')
        if(permision == 3 || permision == 4) {
            $('#scene-nav3').removeClass('disable')
            progressFlag = {
                'bear': true,
                'lynx': true,
                'road': true,
                'bird': true,
                'lookout': true
            }
            $('#cur-progress').html(5)
        } else if(permision < 2) {
            window.location.href = indexPath
        }
    }
}

var snowC = {
    init() {
        this.modalShow()
        util.bookClick()
        util.toolbarClick()
        util.shooting()
    },
    modalShow() {
        // 点击显示介绍弹窗
        $('.nav').find('.current').click(function() {
            $('#snow-suggest-modal').fadeIn()
        })
        // 黑熊
        function beerModal() {
            if($('#snow-beer-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#snow-beer-modal').fadeIn()
                viewer.animate({
                    longitude: 0,
                    latitude: 0.1
                },600);
            }
            if(!progressFlag['bear']){
                progressFlag['bear'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        }
        $(document).on('click', '#psv-marker-beer-polygon', function() {
            beerModal()
        })
        $(document).on('click', '#psv-marker-location-beer', function() {
            beerModal()
        })

        // lynx
        function lynxModal() {
            if($('#snow-lynx-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#snow-lynx-modal').fadeIn()
                viewer.animate({
                    x: 792,
                    y: 2020
                },600);
            }
            if(!progressFlag['lynx']){
                progressFlag['lynx'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        }
        $(document).on('click', '#psv-marker-lynx-polygon', function() {
            lynxModal()
        })
        $(document).on('click', '#psv-marker-location-lynx', function() {
            lynxModal()
        })

        // 大鸟
        function birdModal() {
            if($('#snow-bird-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#snow-bird-modal').fadeIn()
                viewer.animate({
                    x: 6032,
                    y: 1340
                },600);
            }
            if(!progressFlag['bird']){
                progressFlag['bird'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        }
        $(document).on('click', '#psv-marker-bird-polygon', function() {
            birdModal()
        })
        $(document).on('click', '#psv-marker-location-bird', function() {
            birdModal()
        })

         $(document).on('click', '#psv-marker-location-road', function() {
            if(!$('#road-pic')[0]){
                var roadHtml =  ` <div class="mod-full-picture" id="road-pic" style="display:none">
                                    <div class="pub-btn go-back">返回</div>
                                    <div class="full-pic-modal small-modal">
                                        <div class="top-bar">
                                            西伯利亚铁路
                                        </div>
                                        <div class="container clearfix">
                                        <p>西伯利亚铁路，总长9288公里，从莫斯科到符拉迪沃斯托克跨越8个时区，是世界上最长最壮观的铁路线之一。该铁路修建于1891年到1916年，起点是莫斯科，途中穿过辽阔的松树林、跨过了乌拉尔山脉、穿越了西伯利亚冻土带，最终抵达太平洋。苏联政府为这条世界上最长的铁路投入了大量补贴。全程票价12000卢布，约合465美元。该铁路的修建，不仅让原本荒无人烟的西伯利亚地区逐渐繁荣起来，也给俄罗斯带来巨大的经济效益，成为该国陆地运输的主要通道。至今，由于该路票价提高，能负担这么长行程的火车票的俄罗斯人已经不多了。</p>
                                        <div class="eyes-btn"></div>
                                        </div>
                                    </div>
                                    <div class="fullscreen-video fullscreen-video-picture" style="display: none">
                                        <video id="picture-video" preload="metadata" width="100%">
                                            <source src="${mp4UrlMap['picVideo']}">
                                        </video>
                                        <div class="close-icon close-full-video"></div>
                                    </div>
                                </div>`
                $('body').append(roadHtml)
                util.bgMove($('.mod-full-picture'))
            }
            $('#road-pic').fadeIn()
            if(!progressFlag['road']){
                progressFlag['road'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        })

        $(document).on('click', '.eyes-btn', function() {
            $('.fullscreen-video-picture').show()
            var video = document.getElementById('picture-video')
            video.play()
            video.addEventListener("ended",function(){
                video.load()
                $('.fullscreen-video-picture').hide()
            })
        })
    },
    playVideo() {
        $('#snow-video-play').click(function() {
            if(!$('#snow-video-suggest')[0]){
                var snowVideoHtml = `<div class="video-wrapper pub-modal-mask" id="snow-video-suggest">
                                        <div class="part-screen">
                                            <video controls autoplay id="snow-video">
                                                <source src="${mp4UrlMap['snow']}">
                                            </video>
                                            <div class="close-icon close-mask-icon"></div>
                                        </div>
                                    </div>`
                $('body').append(snowVideoHtml)
            } else {
                $('#snow-video-suggest').show()
                document.getElementById('snow-video').play()
            }
        })
    },
    // 瞭望台
    lookoutClick() {
        var videoHtml = `<div class="fullscreen-video fullscreen-video-lookout">
                            <video id="lookout-video" autoplay width="100%">
                                <source src="${mp4UrlMap['lookup']}">
                            </video>
                            <div class="close-icon close-full-video"></div>
                        </div>` 
        $(document).on('click', '#psv-marker-glass', function() {
            if(!$('#lookout-snow-pic')[0]){
                var lookOutHtml =  ` <div class="mod-full-picture" id="lookout-snow-pic" style="display:none">
                                        <div class="pub-btn go-back">返回</div>
                                        <img class="e-tips" src="${eUrl}" alt="">
                                    </div>`
                $('body').append(lookOutHtml)
            }
            $('#lookout-snow-pic').fadeIn()

            if(!progressFlag['lookout']){
                progressFlag['lookout'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? $('#scene-nav3').removeClass('disable') : ''
                progressNum == allStep ? localStorage.setItem('hunter_permision', '3') : ''
            }
        })
        // 监听E键
        $(document).on('keyup', function(e) {
            var lookVideo = document.getElementById('lookout-video')
            var isShow = $('#lookout-snow-pic').css('display') == 'none' ? false : true;
            if(isShow) {
                if(e.keyCode == 69) {
                    if(lookVideo) {
                            $('#lookout-snow-pic').find('.fullscreen-video').fadeIn()
                            lookVideo.play()
                    } else{
                        $('#lookout-snow-pic').append(videoHtml)
        
                        lookVideo = document.getElementById('lookout-video')
        
                        lookVideo.play()
                    } 
                    lookVideo.addEventListener("ended",function(){
                        lookVideo.load()
                        lookVideo.pause()
                        $('.fullscreen-video-lookout').hide()
                        $('#lookout-snow-pic').hide()
                    })
                }

            }
        })
    },
}

util.animateModal()
util.handleModel()
snowV.init()
snowC.init()