<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" style="display:none;">
<ul>
<li v-for="(value,index) in totalData" :key="index">
<p>{{value.name}}</p>
<h3>{{value.num}}</h3>
</li>
</ul>
</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 class="menu-wrap">
<div class="menuTitle-wrap">
<div :class="baseMap.name === 'layerGray'?'menu-map active':'menu-map'" @click="changeBaseLayer(layerGray, 'layerGray')">
<img :src="require('@/assets/images/mapGray.png')" />
<span>影像地图</span>
</div>
<div :class="baseMap.name === 'layerBlu'?'menu-map active':'menu-map'" @click="changeBaseLayer(layerBlu, 'layerBlu')">
<img :src="require('@/assets/images/mapBlu.png')" />
<span>蓝底地图</span>
</div>
<div :class="baseMap.name === 'layerVector'?'menu-map active':'menu-map'" @click="changeBaseLayer(layerVector, 'layerVector')">
<img :src="require('@/assets/images/mapVector.png')" />
<span>矢量地图</span>
</div>
</div>
<div v-if="isShowMenuTree" class="menuTree-wrap">
<div class="menuTree-head">
<span>{{baseMap.name === 'layerGray'?'影像地图':baseMap.name === 'layerBlu'?'蓝色地图':'矢量地图'}}</span>
<i @click="isShowMenuTree = false">X</i>
</div>
<div class="menuTree-box">
<div class="menuTree-tab">
<ul>
<li v-for="(item,index) in menuTree" :key="index" @click="changeMenu1(index)" :class="menuTab == index?'active':''">
<span>{{item.title}}</span>
</li>
</ul>
</div>
<!-- 没有下级 -->
<div v-if="!menuTree[menuTab].children[0].children" class="menuTree-main">
<ul class="menuTree-children">
<li v-for="(item,index) in menuTree[menuTab].children" :key="index">
<div>
<label @click="changeSingleLayers(item)">
<input type='radio' :checked="layerSingle.title == item.title?true:false" />
<a>{{item.title}}</a>
</label>
</div>
</li>
</ul>
</div>
<!-- 有下级 -->
<div v-else class="menuTree-main" style="color:#333;">
<ul class="menuTree-parent">
<li v-for="(item,index) in menuTree[menuTab].children" :key="index">
<div v-if="item.children" class="menuTree-title2">
<a>{{index+1}}、{{item.title}}</a>
</div>
<ul v-if="item.children" class="menuTree-children">
<li v-for="(item1,index1) in item.children" :key="index1">
<div>
<label @click="changeGroupLayers(item1,index)">
<input type='radio' :name="index" />
<a>{{item1.title}}</a>
</label>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="menuTree-footer" @click="isShowMenuTree = false">
<a>隐 藏</a>
</div>
</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'
import MenuTree from '@/components/menu/MenuTree'
export default {
components: {
MenuTree
},
data () {
return {
// rquestUrl: 'http://10.18.0.5:8090',
rquestUrl: 'http://11.100.6.163:8086/monitor',
menuTree: this.$store.state.menuTreeSL,
isShowMenuTree: true,
menuTab: 0,
map: null,
baseMap: {layer: null, name: ''}, // 底图
layersGroup: {}, // 多层叠加图层
layerSingle: {layer: null, title: ''}, // 单独显示的图层
totalData: [
{ name: '面积', num: '130' },
{ name: '门户接入', num: '11' },
{ name: '一卡通用户', num: '1744' },
{ name: '数据共享', num: '1568' },
{ name: '物联网', num: '3971' },
{ name: '视频', num: '146' },
{ name: '云资源', num: '76' }
],
videoToken: '',
videoTimer: null,
videoCount: 60,
videoChannels: [],
videoUrl: '',
videoShow: false,
vidioMarkers: [],
player: null,
trafficData: [], // 交通点位数据
baseMakerData: [],
baseMakers: []
}
},
mounted () {
this.initMap()
this.getVideoToken()
if (!this.menuTree) {
this.menuTree = this.$store.state.menuTreeSL
}
},
methods: {
...mapActions(['changeStatus']),
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});
this.layerBlu = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/00555e76078e4d15a39ac10fa28f97c3/886e60bb7e014f22a707de23e6f6505d', {noWrap: true})
this.layerGray = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/dbddf7afb8c84f22865dd42f29c58ab1/886e60bb7e014f22a707de23e6f6505d', {noWrap: true})
// this.layerVector = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/143f8cbbe83e44faaa15ae87cb93c4ad/886e60bb7e014f22a707de23e6f6505d', {noWrap: true})
this.layerVector = wmtsLayer('http://10.18.0.3:8081/geoesb/proxy/143f8cbbe83e44faaa15ae87cb93c4ad/886e60bb7e014f22a707de23e6f6505d', {noWrap: true})
this.map = L.map('map', {
center: [25.771484971135607, 114.87543404061392],
maxZoom: 21,
minZoom: 10,
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])
})
})
this.baseMap = {layer: this.layerBlu, name: 'layerBlu'}
this.baseMap.layer.addTo(this.map)
// 获取交通专项坐标信息
// this.getTraffic();
},
changeBaseLayer (layer, name) {
this.isShowMenuTree = true
if (name === this.baseMap.name) {
return
}
if (this.layerSingle.layer) {
this.layerSingle.title = ''
this.layerSingle.layer.remove()
}
for (var index in this.layersGroup) {
if (this.layersGroup[index] && this.layersGroup[index].layer) {
this.layersGroup[index].title = ''
this.layersGroup[index].layer.remove()
}
}
this.baseMakers.map((item, index) => {
item.remove()
})
this.baseMap.layer.remove()
this.baseMap = {layer: layer, name: name}
this.baseMap.layer.addTo(this.map)
this.vidioMarker()
},
changeSingleLayers (item) {
let title = item.title
let url = item.url
let id = item.id
if (id) {
this.getBaseMaker(id)
}
this.vidioMarkers.map((item, index) => {
item.remove()
})
this.baseMakers.map((item, index) => {
item.remove()
})
if (this.layerSingle.layer) {
this.layerSingle.title = ''
this.layerSingle.layer.remove()
}
for (let i in this.layersGroup) {
this.layersGroup[i].title = ''
this.layersGroup[i].layer.remove()
}
this.layerSingle.title = title
this.layerSingle.layer = tiledMapLayer(url)
this.layerSingle.layer.addTo(this.map)
},
changeGroupLayers (item, index) {
let title = item.title
let url = item.url
let id = item.id
if (id) {
this.getBaseMaker(id)
}
this.vidioMarkers.map((item, index) => {
item.remove()
})
if (this.layersGroup[index] && this.layersGroup[index].layer) {
this.layersGroup[index].title = ''
this.layersGroup[index].layer.remove()
}
if (this.layerSingle.layer) {
this.layerSingle.title = ''
this.layerSingle.layer.remove()
}
this.layersGroup[index] = {layer: tiledMapLayer(url), title: title}
this.layersGroup[index].layer.addTo(this.map)
},
changeMenu1 (index) {
this.menuTab = index
},
getBaseMaker (id) {
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/' + id + '?',
method: 'get',
params
}).then(res => {
// 注意：有些数据没有名称，编码和坐标信息，不知道是什么数据
this.baseMakers.length && this.baseMakers.map((item, index) => {
item.remove()
})
this.baseMakerData = res.rows
this.baseMarker()
})
},
// 添加图标
baseMarker () {
var greenIcon = L.icon({
iconUrl: require('@/assets/images/icon-camera-red.png'),
iconSize: [40, 40],
shadowSize: [50, 64]
})
let markerArr = []
this.baseMakerData.map((item, index) => {
this.baseMakers[index] = L.marker([item.SMY, item.SMX], {icon: greenIcon, title: item.ADRESS, riseOnHover: true, data: item})
.addTo(this.map)
.bindPopup(`<b>名称：${item.NAME}</b><br>地址：${item.ADRESS}`)
})
},
// 添加图标
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) => {
this.vidioMarkers[index] = L.marker([item.gpsY, item.gpsX], {icon: greenIcon, title: item.name, riseOnHover: true, data: item.channelId})
.addTo(this.map)
// .bindPopup("<b>添加</b><br>信息")
.on('click', (e) => {
this.videoUrl = ''
this.getVideo(e.target.options.data)
})
})
// 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') // 切换页面
// })
},
// 获取交通点位
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()
})
},
// 添加交通图标
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': 'dlxxgly',
'pwd': 'dlxxgly123'
}
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
}, 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()
}
}
},
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:0;
right:0;
z-index:999;
width:3.8rem;
height:2.55rem;
background:#eee;
}
.videoClose{
position: absolute;
right: .05rem;
top: .06rem;
display: inline-block;
color:#fff;
font-size: .09rem;
z-index:999;
cursor: pointer;
}
/* 菜单 */
.menu-wrap{
z-index: 99;
position: absolute;
bottom: 0;
right:0;
width: 400px;
padding: .05rem;
background: rgba(255, 255, 255, 1);
}
.menu-wrap, .menuTitle-wrap{
border-radius: 10px 10px;
}
.menu-map{
width: 32%;
float: left;
position: relative;
margin-right:1.33%;
border: 2px solid #ededed;
cursor: pointer;
}
.menu-map:hover{
border: 2px solid #527de3;
}
.menu-map>img{
width: 100%;
display: block;
}
.menu-map>span{
font-size: 13px;
position: absolute;
right:0;
bottom:0;
display: inline-block;
background: #527de3;
padding: .02rem .04rem;
}
.menu-map.active{
border: 2px solid #527de3;
}
.menuTree-wrap{
position: absolute;
bottom: 130px;
right:0;
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: .06rem;
/* box-shadow: 2px 2px 4px #ededed; */
}
.menuTree-head{
width: 100%;
background: #527de3;
border-radius: 10px 10px 0 0;
color:#fff;
padding: 10px 15px;
font-size: 15px;
display:flex;
justify-content: space-between;
}
.menuTree-head i{
cursor: pointer;
}
.menuTree-tab{
width: 100%;
border-bottom: 1px solid #eaeaea;
}
.menuTree-tab ul{
padding: 0 5px;
}
.menuTree-tab li{
display: inline-block;
color:#333;
font-weight: bold;
font-size: 14px;
cursor: pointer;
padding: 0px 7px;
}
.menuTree-tab li:hover{
color:#527de3;
}
.menuTree-tab li span{
padding: 12px 3px;;
display: inline-block;
}
.menuTree-tab li.active span{
color:#527de3;
border-bottom: 2px solid #527de3
}
.menuTree-footer{
width: 100%;
padding: 5px 0 ;
text-align: center;
border-top: 1px solid #eaeaea;
}
.menuTree-footer a{
cursor: pointer;
font-size: 14px;
color:#999;
}
.menuTree-box{
width: 100%;
height: 100%;
}
.menuTree-box input{
margin-right:5px;
vertical-align: -2px;
}
.menuTree-main{
padding: 10px 20px;
height: 200px;
overflow: auto;
font-size: 12px;
}
.menuTree-main a{
font-size: 12px;
cursor: pointer;
}
.menuTree-main .menuTree-children{
overflow: hidden;
}
.menuTree-main .menuTree-children>li{
width:50%;
float:left;
margin: 5px 0;
display: inline-block;
}
.menuTree-title2 a{
color:#527de3;
font-weight: bold;
padding: 7px 0;
display: inline-block;
}
</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>
