地图图标点击 视频和监控完成

liuyg

2021-06-15 5f1ab2845cc49450bc9af1002f421574c7e1fe12

地图图标点击  视频和监控完成

 widgets/searchL/Widget.js

@@ -78,7 +78,7 @@
                            that.map.camera.flyTo({
                                // destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(gaodu))
                                destination: Cesium.Cartesian3.fromDegrees(Number(that.searchDatas[0]), Number(that.searchDatas[1]), Number(8000))
								

                            });
                        } else {
                            layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
@@ -205,6 +205,76 @@
                        that.getData(val, that.searchDatas);
                    });
                });

                // 地图图标点击事件
                this.movehandLer();
            },
            // 获取鼠标事件
            movehandLer: function movehandLer() {
                // 取消默认双击事件
                this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                // 获取鼠标事件
                this.mountainHandler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
                // 给鼠标左键添加事件函数
                // this.mountainHandler.setInputAction(lang.hitch(this, this.mouseMove), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                this.mountainHandler.setInputAction(lang.hitch(this, this.clickHand), Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            // 注册鼠标左键单击事件
            clickHand: function clickHand(data) {
                var pickedObjects = this.map.scene.drillPick(data.position);
                console.log(pickedObjects[0].primitive.id.onceData);
                var data = pickedObjects[0].primitive.id.onceData[1];
                if (pickedObjects[0].primitive.id.onceData[0] == 1) {//全景
                    var address = data.panAddress;
                    var dom = $('.header'),
                        str = `${data.name}--全景`;
                    dom.empty();
                    dom.append(str);

                    dom = $('#poput-m-t-quanjing');
                    str = `<iframe id="poput-m-t-quanjing-iframe" src="${address}" frameborder="0"></iframe>`;
                    dom.empty();
                    dom.append(str);
                    $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                    $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                }
                if (pickedObjects[0].primitive.id.onceData[0] == 2) {//视频
                    var dom = $('.header'),
                        str = `${data.name}--实时视频`;
                    dom.empty();
                    dom.append(str);
                    if (data.flv) {
                        dom = $('#poput-m-t-video');
                        str = `
                            <video id="poput-m-t-video-video" ></video>
                    `;
                        dom.empty();
                        dom.append(str);
                        if (flvjs.isSupported()) {
                            var videoElement = document.getElementById('poput-m-t-video-video');
                            var flvPlayer = flvjs.createPlayer({
                                type: 'flv',
                                url: data.flv
                            });
                            flvPlayer.attachMediaElement(videoElement);
                            flvPlayer.load();
                            flvPlayer.play();
                        }
                        window.$myVideoFlvplayer = flvPlayer;
                        // var time = setTimeout(() => {

                        // }, 2000);
                    } else {
                        var dom = $('#poput-m-t-video'),
                            str = `
                            <div id="poput-m-t-video-none" >·暂无视频</div>
                    `;
                        dom.empty();
                        dom.append(str);
                    }
                    $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                    $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                }
            },

            onClose: function () {
@@ -262,7 +332,8 @@
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        // rotation: Cesium.Math.toRadians(angle),
                    }
                    },
                    onceData: [i, data]
                })
            },
            beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
@@ -351,16 +422,11 @@
                                dom.append(str);
                                if (obj.data.flv) {
                                    var dom = $('#poput-m-t-video'),
                                        // <div id="poput-m-t-video-login"><i class="layui-icon">&#xe63e;</i></div>
                                        str = `
                                            <video id="poput-m-t-video-video" ></video>
                                    `;
                                    dom.empty();
                                    dom.append(str);

                                    // console.log(obj.data.name);
                                    // console.log(obj.data.flv);

                                    if (flvjs.isSupported()) {
                                        var videoElement = document.getElementById('poput-m-t-video-video');
                                        var flvPlayer = flvjs.createPlayer({
@@ -383,9 +449,6 @@
                                    dom.empty();
                                    dom.append(str);
                                }



                                $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                                $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                            } else if (layEvent === 'edit') {

 widgets/searchTabaPopup/Widget.html

@@ -1,11 +1,14 @@
<div>
    <div class="popup">
        <div class="p-main two" id="twovideo">
             <div class="cloce"><i class="layui-icon">&#x1006;</i></div>
            <div class="cloce"><i class="layui-icon">&#x1006;</i></div>
            <div class="header">江豚湾--实时视频</div>
            <div id="poput-m-t-video">
                <!-- <video id="poput-m-t-video-video" ></video> -->
            </div> 
            </div>
            <div id="poput-m-t-quanjing">
                <!-- <iframe id="poput-m-t-quanjing-iframe" src="http://vr.jxpskj.com/pyhyjpt/wxbhxz/QJ1/" frameborder="0"></iframe> -->
            </div>
        </div>
        <div class="p-main three">
            <div class="cloce"><i class="layui-icon">&#x1006;</i></div>

 widgets/searchTabaPopup/Widget.js

@@ -46,6 +46,11 @@
                    that.myChart2.clear();
                    $('.myCHosetimeinput').val("");
                    that.times = [1];

                    var dom = $('#poput-m-t-video');
                    dom.empty();
                    dom = $('#poput-m-t-quanjing');
                    dom.empty();
                })

                $('.jimu-widget-searchTabaPopup').find('#query').click(() => {
@@ -81,7 +86,7 @@

            onOpen: function () {
                var that = this;
				


                // $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                // $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
@@ -218,7 +223,7 @@
                    //     text: '折线图堆叠'
                    // },
                    animationDuration: 1000,
                    color: ['#1AD4AD', '#5AB1EF', '#F96D85', '#FFBD87', '#0067A5','#CABDE7','#D87C82','#A0BEFF','#D9D0C7','#8DAD9C'],
                    color: ['#1AD4AD', '#5AB1EF', '#F96D85', '#FFBD87', '#0067A5', '#CABDE7', '#D87C82', '#A0BEFF', '#D9D0C7', '#8DAD9C'],
                    dataZoom: [{
                        type: 'slider'
                    }, {

 widgets/searchTabaPopup/css/style.css

@@ -77,12 +77,14 @@
  overflow: hidden;
}

/* .jimu-widget-searchTabaPopup .two #poput-m-t-video .title{
  color: #409EFF;
  width: 92%;
  font-size: 25px;
  padding: 20px 0 8px 0;
} */

.jimu-widget-searchTabaPopup .two #poput-m-t-quanjing-iframe{
  width: 100%;
  height: 560px;
  position: absolute;
  top: 40px;
  /* z-index: 14; */
}

.jimu-widget-searchTabaPopup .two .header {
  background-color: #409EFF;