<template>
<div class="panel-container">
<div style="width: 96%;height: 97%;margin: 0 2%; position:relative;">
<div style="width: 100%;height:100%; position: relative;">
<!-- 彩色数字条 -->
<div class="totalBox">
<ul>
<li v-for="(value,index) in totalData" :key="index">
<p>{{value.name}}</p>
<h3>{{value.num}}</h3>
</li>
</ul>
</div>
<!-- <div style="position:absolute;bottom:.02rem; right:.02rem; z-index:99;">
<img @click="changeMap(1)" :src="require('@/assets/images/shiliang_1.png')" />
<img @click="changeMap(2)" :src="require('@/assets/images/shiliang_1.png')" />
</div> -->
<!-- 地图 -->
<div class="mapBox" id="map"></div>
<!-- 视频播放器 -->
<div v-show="videoShow" class="videoBox">
<span class="videoClose" @click="videoShow = false;videoUrl = '';">关闭</span>
<div class="prism-player" id="player-con"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import L from 'leaflet';
import {tiledMapLayer, wmtsLayer} from '@supermap/iclient-leaflet';
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'
// import '../../../static/videoPlay/video.js'
// import '../../../static/videoPlay/video.css'
export default {
components:{
},
data() {
return {
rquestUrl: 'http://10.18.0.5:8090',
map: null,
totalData:[
{ name: "面积", num: "100" },
{ name: "门户接入", num: "100" },
{ name: "一卡通用户", num: "100" },
{ name: "数据共享", num: "100" },
{ name: "物联网", num: "100" },
{ name: "视频", num: "100" },
{ name: "云资源", num: "100" }
],
videoToken: '',
videoTimer: null,
videoCount: 60,
videoChannels: [],
videoUrl: '',
videoShow: false,
player: null,
trafficData:[]
};
},
created() {
},
mounted() {
this.initMap()
this.getVideoToken()
},
methods: {
...mapActions(['changeStatus']),
// 获取交通点位
getTraffic(){
let params = {
request: 'getFeature',
page: '0',
rp: '2000',
}
this.request({
url: 'http://10.18.0.3:8080/webframe/biz/httpproxy/httpproxy.jsp?url=http://10.18.0.3:8080/dfc/services/sgssfs/2486?',
method: 'get',
params,
}).then(res => {
// 注意：有些数据没有名称，编码和坐标信息，不知道是什么数据
this.trafficData = res.rows;
this.trafficMarker();
// if (res.ret_code == 200) {
// let xAxisData = [];
// let seriesData = [];
// res.data.forEach(item=>{
// xAxisData.push(item.LX);
// seriesData.push(item.COUNT);
// })
// this.school_num.xAxisData = xAxisData;
// this.school_num.seriesData = seriesData;
// // 学校数量echart
// this.callEchart('school_num_box',this.school_num, 1);
// }
})
},
getTest(){
let params = {
request: 'getFeature',
page: '0',
rp: '2000',
}
this.request({
url: 'http://10.18.0.3:8080/webframe/biz/httpproxy/httpproxy.jsp?url=http://10.18.0.3:8080/dfc/services/sgssfs/2486?',
method: 'get',
params,
}).then(res => {
// 注意：有些数据没有名称，编码和坐标信息，不知道是什么数据
this.trafficData = res.rows;
this.trafficMarker();
// if (res.ret_code == 200) {
// let xAxisData = [];
// let seriesData = [];
// res.data.forEach(item=>{
// xAxisData.push(item.LX);
// seriesData.push(item.COUNT);
// })
// this.school_num.xAxisData = xAxisData;
// this.school_num.seriesData = seriesData;
// // 学校数量echart
// this.callEchart('school_num_box',this.school_num, 1);
// }
})
},
// 添加交通图标
trafficMarker(){
var redIcon = L.icon({
iconUrl: require('@/assets/images/icon-camera-red.png'),
iconSize: [40, 40],
shadowSize: [50, 64],
});
let markerArr = []
this.trafficData.map((item,index)=>{
L.marker([item.SMY, item.SMX], {icon: redIcon,title: item.NAME, riseOnHover:true, data:item.DEVICECODE})
.addTo(this.map)
.on('click', (e) => {
this.videoUrl = ''
})
})
},
// 获取视频相关参数
getVideoToken(){
let params = {
"userName" : "system",
"pwd" : "system123",
}
this.request({
url: this.rquestUrl+'/api/token',
method: 'get',
params,
}).then(res => {
if (res.code == 1) {
this.videoToken = res.data;
this.getChannels();
this.videoTimer = setInterval(() => {
if(this.videoCount > 1 ){
this.videoCount--;
}else{
this.getFlushVideoToken()
}
}, 1000);
}
})
},
// 刷新token
getFlushVideoToken(){
this.videoCount = 60;
let params = {
"token" : this.videoToken,
}
this.request({
url: this.rquestUrl+'/api/flushToken',
method: 'get',
params,
}).then(res => {
if (res.code == 1) {
this.videoToken = res.data;
}
})
},
// 获取所有通道
getChannels(){
let params = {
"token" : this.videoToken,
}
this.request({
url: this.rquestUrl + '/api/channels',
method: 'get',
params,
}).then(res => {
if (res.code == 1) {
this.videoChannels = res.data;
this.vidioMarker();
}
})
},
// 获取视频
getVideo(channelId){
this.videoShow = true;
let params = {
"token" : this.videoToken,
"channelId": channelId
}
this.request({
url: this.rquestUrl + '/api/video',
method: 'get',
params,
}).then(res => {
if (res.code == 1) {
this.videoUrl = res.data.url;
this.videoPlay()
}
})
},
// 视频播放
videoPlay(){
!this.player && (this.player = new Aliplayer({
id: 'player-con',
width: '100%',
height: '100%',
autoplay: true, //自动播放
isLive: true,
// rePlay: true, // 重复播放
//支持播放地址播放,此播放优先级最高
source : this.videoUrl,
// //播放方式二：点播用户推荐
// vid : '1e067a2831b641db90d570b6480fbc40',
// playauth : 'ddd',
// cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
// //播放方式三：仅MPS用户使用
// vid : '1e067a2831b641db90d570b6480fbc40',
// accId: 'dd',
// accSecret: 'dd',
// stsToken: 'dd',
// domainRegion: 'dd',
// authInfo: 'dd',
// //播放方式四：使用STS方式播放
// vid : '1e067a2831b641db90d570b6480fbc40',
// accessKeyId: 'dd',
// securityToken: 'dd',
// accessKeySecret: 'dd',
// region:'cn-shanghai',//eu-central-1,ap-southeast-1
},function(player){
console.log('播放器创建好了。')
}));
// 切换视频地址
this.player && this.player.loadByUrl(this.videoUrl);
// 播放器暂停/播放
var _video = document.querySelector('video');
this.player.on('play', function(e) {
_video.removeEventListener('click', play);
_video.addEventListener('click', pause);
});
this.player.on('pause', function(e) {
_video.removeEventListener('click', pause);
_video.addEventListener('click', play)
});
function play() {
if (this.player) this.player.play();
}
function pause() {
if (this.player) this.player.pause();
}
},
initMap(){
let res = [1.406249999998048, 0.703124999999024, 0.351562499999512, 0.175781249999756, 0.087890624999878, 0.043945312499939, 0.0219726562499695, 0.01098632812498475, 0.005493164062492375, 0.0027465820312461875, 0.0013732910156230938, 0.0006866455078115469, 0.00034332275390577344, 0.00017166137695288672, 0.00008583068847644336, 0.00004291534423822168, 0.00002145767211911084, 0.00001072883605955542, 0.00000536441802977771, 0.000002682209014888855, 0.0000013411045074444275];
// var bluUrl = tiledMapLayer('http://10.18.0.3:8081/geoesb/proxy/services/maps/rest/cb82b38250904ff38b7966c6dc47bf8d/7c0a01e2f80f4c8a9ecd1e9e0053a310', {noWrap:true});
var bluUrl = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/00555e76078e4d15a39ac10fa28f97c3/886e60bb7e014f22a707de23e6f6505d', {noWrap:true})
var grayUrl = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/dbddf7afb8c84f22865dd42f29c58ab1/886e60bb7e014f22a707de23e6f6505d',{noWrap:true});
var whiteUrl = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/143f8cbbe83e44faaa15ae87cb93c4ad/886e60bb7e014f22a707de23e6f6505d',{noWrap:true});
this.map = L.map('map', {
center: [25.771484971135607, 114.87543404061392],
// maxZoom: 20,
// minZoom: 13,
zoom: 15,
maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
crs: L.Proj.CRS("EPSG:4326",
{
origin: L.point(-180, 90),
resolutions: res,
bounds: L.bounds([-180, -90], [180, 90]),
}),
// 设置默认显示的图层数组
layers: [bluUrl]
});
var baseMaps = {
// '<img src="../../../static/shiliang_1.png" />': grayUrl,
// '<img src="../../../static/shiliang_1.png" />': bluUrl,
'影像图': grayUrl,
'蓝色图': bluUrl,
'矢量图': whiteUrl,
};
L.control.layers(baseMaps).addTo(this.map);
// 初始化图层 / 单个地图使用
// let url = "http://10.18.0.3:8081/geoesb/proxy/00555e76078e4d15a39ac10fa28f97c3/886e60bb7e014f22a707de23e6f6505d";
// let layer = wmtsLayer(url,
// {
// layer: "rjxqdzdt",
// style: "default",
// tilematrixSet: "CustomCRS4490Scalerjxqdzdt",
// format: "image/png",
// maxZoom: 20
// });
// layer.addTo(this.map);
// 获取交通专项坐标信息
// this.getTraffic();
this.getTest();
// 地图点击事件
this.map.on("click",(e)=>{
this.videoShow = false;
this.videoUrl = '';
// console.log(this.getCenter());
// console.log(this.getZoom());
})
},
changeMap(id){
console.log(L.control.layers()._layers)
// this.map.removeLayer(bluUrl)
// this.map.addLyer(grayUrl)
},
// 添加图标
vidioMarker(){
var greenIcon = L.icon({
iconUrl: require('@/assets/images/icon-camera-blu.png'),
iconSize: [40, 40],
shadowSize: [50, 64],
});
let markerArr = []
this.videoChannels.map((item,index)=>{
L.marker([item.gpsY, item.gpsX], {icon: greenIcon,title: item.name, riseOnHover:true, data:item.channelId})
.addTo(this.map)
.on('click', (e) => {
this.videoUrl = ''
this.getVideo(e.target.options.data);
// this.changeStatus('MapVideo') // 切换页面
})
})
// let markerLayer = L.layerGroup(markerArr).addTo(this.map)
// markerLayer.addTo(this.map)
// let marker = L.marker([25.776472928388976,114.86362913899589], {icon: greenIcon,title:'我是视频', riseOnHover:true, data:'22222'}).addTo(this.map);
// marker.on('click', (e) => {
// this.getVideo();
// console.log(e.target.options.data)
// // this.changeStatus('MapVideo') // 切换页面
// })
},
},
destroyed(){
clearInterval(this.videoTimer)
}
};
</script>
<style scoped>
.panel-container {
width: 100%;
flex: 1.1 !important;
height: 100%;
overflow: auto;
}
.mapBox{
width: 100%;
position:absolute;
top: 0;
bottom:0;
overflow: hidden;
z-index: 9;
}
.totalBox ul{
display: flex;
justify-content: space-between;
position:absolute;
top: .1rem;
right: .9rem;
left:.9rem;
z-index: 99;
}
.totalBox ul li p{
font-size: .14rem;
margin-bottom: .12rem;
}
.totalBox ul li h3{
font-size: .32rem;
font-family: DS-DigitalBold;
}
.totalBox ul li:nth-last-child(1) h3{
color:#52bd4b;
}
.totalBox ul li:nth-last-child(2) h3{
color:#d33c41;
}
.totalBox ul li:nth-last-child(3) h3{
color:#3deef8;
}
.totalBox ul li:nth-last-child(4) h3{
color:#ce14cd;
}
.totalBox ul li:nth-last-child(5) h3{
color:#ffbe00;
}
.totalBox ul li:nth-last-child(6) h3{
color:#beff0a;
}
.totalBox ul li:nth-last-child(7) h3{
color:#52bd4b;
}
.videoBox{
position:absolute;
bottom:.02rem;
right:.02rem;
z-index:99;
width:3.8rem;
height:2.5rem;
background:#eee;
}
.videoClose{
position: absolute;
right: .05rem;
top: .06rem;
display: inline-block;
color:#fff;
font-size: .09rem;
z-index:99;
cursor: pointer;
}
</style>
<style>
.leaflet-container .leaflet-control-attribution,.leaflet-container a>img{
display:none;
}
.leaflet-control-layers-selector{
width: .05rem;
height: .05rem;
}
.leaflet-container{
background: none !important;
}
::-webkit-scrollbar-thumb{
background-color: rgba(255, 255, 255,0) !important;
}
</style>
