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

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

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

// import imgUrl from '../img/P1.jpg'
import location from '../img/location.png'; 
import glass from '../img/glass.png'; //望远镜
import eUrl from '../img/E.png';

var viewer = null
var lakeFlag = false

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

// 进度相关
var progressNum = 0
var progressFlag = {
    'foot': false,
    'deer': false,
    'rabbit': false,
    'lake': false,
    'lookout': false
}


var videoMap = {
    'lookup': '8884585',
    'lake': '8887637',
    'aim': '8887375',
    'shoot': '8887379',
    'open': '8887381'
}

var mp4UrlMap = {

}

var lakeV = {
    init() {
        this.initLakeView()
        this.handleReady()
        this.getVideoSource()
        this.handleNav()
    },
    initLakeView() {
        viewer = new PhotoSphereViewer({
            container: 'photosphere',
            panorama: 'http://hdzt.duowan.com/s/1806hunter/P1.jpg',
            // panorama: imgUrl,
            min_fov: 50,
            max_fov: 70,
            navbar: false,
            time_anim: false,
            markers: [
                // 多边形
                {
                    id: 'deer-polygon',
                    polygon_px: [
                      [3660, 1544], [4060, 1544], [4060, 1968],[3660, 1968]
                    ],
                    svgStyle: {
                      fill: 'rgba(0, 0, 0, 0)',
                    }
                },
                {
                    id: 'location-deer',
                    x: 3844,
                    y: 1781,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 脚印
                {
                    id: 'foot-polygon',
                    polygon_px: [
                      [120, 2094], [120, 2382], [500, 2382],[500, 2094]
                    ],
                    svgStyle: {
                      fill: 'rgba(255, 255, 255, 0)'
                    }
                  },
                  {
                    id: 'location-foot',
                    x: 286,
                    y: 2228,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 兔子
                {
                    id: 'rabit-polygon',
                    polygon_px: [
                      [2026, 1808], [2026, 1930], [2138, 1930],[2138, 1808]
                    ],
                    svgStyle: {
                      fill: 'rgba(255, 255, 255, 0)'
                    }
                  },
                  {
                    id: 'location-rabit',
                    x: 2080,
                    y: 1860,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                //望远镜
                {
                    id: 'glass',
                    x: 3641,
                    y: 1500,
                    image: glass,
                    width: 56,
                    height: 59,
                    anchor: 'bottom center',
                },
                // 湖
                {
                    id: 'location-lake',
                    x: 150,
                    y: 1965,
                    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 && !lakeFlag) {
                lakeFlag = true
                $('#lake-suggest-modal').fadeIn()
                $('.nav').fadeIn()
            }
        })
    },
    getVideoSource() {
        let vids = ['8892551', '8887637', '8887375', '8887379', '8887381','8890691','8890693','8890695','8897789','8897793','8897795','8897797']

        var videoEls = {
            '8892551': 'lookup',
            '8887637': 'lake',
            '8887375': 'aim',
            '8887379': 'shoot',
            '8887381': 'open',
            '8890691': 'book-lake',
            '8890693': 'book-taiga',
            '8890695': 'book-elden',
            '8897789': 'picVideo',
            '8897793': 'openB',
            '8897795': 'aimB',
            '8897797': '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']

                lakeC.lookoutClick()
                lakeC.playVideo()
            }
        })
    },
    // 导航权限处理
    handleNav() {
        // 初始化加载时
        let permision = localStorage.getItem('hunter_permision')
        if(permision) {
            progressFlag = {
                'foot': true,
                'deer': true,
                'rabbit': true,
                'lake': true,
                'lookout': true
            }
            $('#cur-progress').html(5)
            if(permision == 2) {
                $('#scene-nav2').removeClass('disable')
            } else if(permision == 3 || permision == 4){
                $('#scene-nav2').removeClass('disable')
                $('#scene-nav3').removeClass('disable')
            }
        }
    }
}

var lakeC = {
    init() {
        this.modalShow()
        util.shooting()
        util.bookClick()
        util.toolbarClick()
    },
    modalShow() {
        // 点击显示介绍弹窗
        $('.nav').find('.current').click(function() {
            $('#lake-suggest-modal').fadeIn()
        })
        // 脚印
        function footModal() {
            if($('#lake-foot-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#lake-foot-modal').fadeIn()
                viewer.animate({
                    longitude: 3.2,
                    latitude: -0.27
                },600);
            }
            if(!progressFlag['foot']){
                progressFlag['foot'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        }
        $(document).on('click', '#psv-marker-foot-polygon', function() {
            footModal()
        })
        $(document).on('click', '#psv-marker-location-foot', function() {
            footModal()
        })
        // 鹿
        function deerModal() {
            if($('#lake-deer-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#lake-deer-modal').fadeIn()
                viewer.animate({
                    longitude: 0.1,
                    latitude: -0.05
                },600);
            }
            if(!progressFlag['deer']){
                progressFlag['deer'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        }
        $(document).on('click', '#psv-marker-deer-polygon', function(e) {
            deerModal()
        })
        $(document).on('click', '#psv-marker-location-deer', function() {
            deerModal()
        })

        // 野兔
        function rabitModal() {
            if($('#lake-rabbit-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#lake-rabbit-modal').fadeIn()
                viewer.animate({
                    longitude: 4.87,
                    latitude: -0.07
                },600);
            }
            if(!progressFlag['rabbit']){
                progressFlag['rabbit'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        }
        $(document).on('click', '#psv-marker-rabit-polygon', function(e) {
            rabitModal()
        })
        $(document).on('click', '#psv-marker-location-rabit', function() {
            rabitModal()
        })

        //湖
        $(document).on('click', '#psv-marker-location-lake', function() {
            if(!$('#lake-pic')[0]){
                var lakeHtml =  ` <div class="mod-full-picture" id="lake-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>地球上湖泊总面积为270万平方公里，占陆地面积的1.8%，面积大于5000平方公里的湖</p>
                                        <p>青海湖泊有35个。芬兰的湖泊最多，被称为“万湖之国”，拥有大小湖泊6万多个。</p>
                                        <p>湖泊一旦形成，就受到外部自然因素和内部各种过程的持续作用而不断演变。入湖河流携带的大量泥沙和生物残骸年复一年在湖内沉积，湖盆逐渐淤浅，变成陆地，或随着沿岸带水生植物的发展，逐渐变成沼泽。</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(lakeHtml)
                util.bgMove($('.mod-full-picture'))
            }
            $('#lake-pic').fadeIn()
            if(!progressFlag['lake']){
                progressFlag['lake'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == 5 ? $('#scene-nav2').removeClass('disable') : ''
                progressNum == 5 ? localStorage.setItem('hunter_permision', '2') : ''
            }
        })

        $(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() {
        $('#rabbit-video-play').click(function() {
            if(!$('#lake-video-suggest')[0]){
                var lakeVideoHtml = `<div class="video-wrapper pub-modal-mask" id="lake-video-suggest">
                                        <div class="part-screen">
                                            <video controls autoplay id="lake-video">
                                                <source src="${mp4UrlMap['lake']}">
                                            </video>
                                            <div class="close-icon close-mask-icon"></div>
                                        </div>
                                    </div>`
                $('body').append(lakeVideoHtml)
            } else {
                $('#lake-video-suggest').show()
                document.getElementById('lake-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-pic')[0]){
                var lookOutHtml =  ` <div class="mod-full-picture" id="lookout-pic" style="display:none">
                                        <div class="pub-btn go-back">返回</div>
                                        <img class="e-tips" src="${eUrl}" alt="">
                                    </div>`
                $('body').append(lookOutHtml)
            }
            $('#lookout-pic').fadeIn()

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

            }
        })
    },
}

let entry = localStorage.getItem('entry')
if(entry == 'index') {
    util.animateModal()
    util.handleModel()
    lakeV.init()
    lakeC.init()
} else {
    window.location.href = indexPath
}