<!--
* @Description: 地图坐标拾取工具
* @Author: 王晓颖
* @Date: 2020-09-09 10:18:08
-->
<template>
<div style="width: 100%; height:100%">
<div style="width:100%; height:100%;position:relative">
<f-map :type="type" :plugins="plugins" :layers="layers" @ready="mapReady">
<!--乡镇边界-->
<f-map-features :data="boundaryData" type="ArcgisPolygon" geoField="geo" layer="boundary"/>
<!--工地-->
<f-map-features :data="constructionData" x="X" y="Y" :visible="layersShow.constructionShow" layer="construction"/>
<!--渣土车-->
<f-map-features :data="truckData" x="longitude" y="latitude" :visible="layersShow.truckShow" layer="car"/>
<!--人员-->
<f-map-features :data="peopleData" x="longitude" y="latitude" :visible="layersShow.peopleShow" layer="volunteer"/>
<!--三种状态的案件-->
<f-map-features :data="caseWaitData" x="longitude" y="latitude" :visible="layersShow.caseShow" layer="caseWait"/>
<f-map-features :data="caseHandleData" x="longitude" y="latitude" :visible="layersShow.caseShow" layer="caseHandle"/>
<f-map-features :data="caseOvertimeData" x="longitude" y="latitude" :visible="layersShow.caseShow" layer="caseOvertime"/>
<!--摄像头-->
<f-map-features :data="videoChannels" x="gpsX" y="gpsY" :visible="layersShow.cameraShow" layer="boxCamera"/>
</f-map>
<!--选项卡-->
<div style="position:absolute;top:20px;right:80px;z-index:100">
<!--<button1 v-model="layersShow.roadShow" @click.native="layersShow.roadShow=!layersShow.roadShow">网格</button1><br/>-->
<button1 v-model="layersShow.cameraShow" @click.native="showCameras">摄像头</button1><br/>
<!--<button1 v-model="layersShow.peopleShow" @click.native="showShuangChuang">人员</button1><br/>-->
<button1 v-model="layersShow.constructionShow" @click.native="showConstruction">工地</button1><br/>
<button1 v-model="layersShow.truckShow" @click.native="showConstructionCars">渣土车</button1><br/>
<button1 v-model="layersShow.caseShow" @click.native="showCase">事件</button1>
</div>
<!-- 统计面板-->
<camera :raw-data="cameraStaticData" v-if="layersShow.cameraShow"/>
<people v-if="layersShow.peopleShow"/>
<case v-if="layersShow.caseShow"/>
<!-- 视频播放器 -->
<div v-show="videoShow" class="videoBox">
<div class="videoBox-subBox" v-show="videoShow">
<span class="videoClose" @click="videoShow = false;videoUrl = '';">关闭</span>
<div class="prism-player" id="player-con"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import FMap from '@/components/fMap/components/fMap'
import {fetchConstructionCars, fetchShuangchuang, fetchCase} from '@/api/cityManage'
import FMapFeatures from '@/components/fMap/components/fMapFeatures'
import Button1 from '@/components/button/button1'
import MapWindow from '../../components/mapWindow/mapWindow'
import {fetchBoundary, fetchAreaBoundary} from '@/api/geojson'
import {fetchConstructions} from '@/api/construction'
import {fetchVideoToken, fetchFlushVideoToken, fetchChannels, fetchVideo} from '@/api/camera'
import Zhatu from './components/zhatu'
import People from './panelBoard/people'
import Case from './panelBoard/case'
import Camera from './panelBoard/camera'
export default {
name: 'JyMap2D',
components: {Case, Zhatu, People, Camera, MapWindow, FMapFeatures, FMap, Button1},
data () {
var that = this
return {
type: 'blackVector', // 地图类型
plugins: ['mapswitch', 'mouseposition'], // 插件
zoom: 13, // 缩放等级
layers: {
default: {name: 'default', title: '默认图层', symbol: ''},
boundary: {name: 'boundary', title: '边界图层', selectable: false, style: 'fill:rgba(3,89,164,0.1);stroke-color:#00FFFF;stroke-width:2;'},
areaBoundary: {name: 'areaBoundary', title: '乡镇图层', selectable: false, style: 'fill:rgba(3,89,164,0.1);stroke-color:#FFFFF;stroke-width:2;'},
car: {name: 'car', title: '车辆', bubbleable: true, bubble: 'truckBB', symbol: 'track-ztc'},
construction: {name: 'construction', title: '工地', bubbleable: true, bubble: 'constructionBB', symbol: 'construction'},
police: {name: 'police', title: '交通', symbol: 'police'},
volunteers: {name: 'volunteers', type: 'Clust', animation: true, bubble: 'myclustBB', title: '志愿者', symbol: 'volunteers'},
volunteer: {name: 'volunteer', bubbleable: true, bubble: 'volunteerBB', title: '志愿者1', symbol: 'volunteer'},
caseHandle: {name: 'caseHandle', bubbleable: true, bubble: 'caseBB', title: '已处理事件', symbol: 'case-handle'},
caseOvertime: {name: 'caseOvertime', bubbleable: true, bubble: 'caseBB', title: '超期事件', symbol: 'case-over'},
caseWait: {name: 'caseWait', bubbleable: true, bubble: 'caseBB', title: '待处理事件', symbol: 'case-wait'},
boxCamera: {name: 'boxCamera',
title: '摄像头',
bubble: 'cameraBB',
textable: true,
text: '11111',
onmousein: function (data) {
that.fmap.singleSelectedFeature(data.feature)
},
onmouseout: function (data) {
that.fmap.closeSingleBubble()
},
onclick: function (event) { that.getVideo(event.feature.values_.clients.channelId) },
symbol: 'camera2'}
}, // 往fmap注入的图层
boundaryData: [], // 边界数据
areaBoundaryData: [], // 乡镇级行政区数据
constructionData: [], // 工地数据
truckData: [], // 渣土车位置数据
cameraStaticData: {}, // 摄像头统计数据
cameraData: [], // 摄像头位置数据
peopleData: [], // 网格员数据
caseHandleData: [], // 案件数据
caseOvertimeData: [], // 案件数据
caseWaitData: [], // 案件数据
videoToken: '', // 视频云token
videoTimer: null, // 视频定时器
videoCount: 60, // 倒计时
videoChannels: [], // 视频通道
onlineVideoChannels: [], // 在线视频通道列表
offlineVideoChannels: [], // 离线视频通道列表
videoUrl: '', // 视频地址
videoShow: false, // 视频的显示
player: null, // 播放器1
currentPlayer: 'player', // 当前切换palyer
layersShow: {
roadShow: true, // 道路是否显示
cameraShow: false, // 摄像头图层显示
peopleShow: false, // 双创志愿者图层显示
caseShow: false, // 案件图层显示
truckShow: false, // 渣土车图层显示
constructionShow: false // 工地图层显示
}
}
},
mounted () {
this.getBoundary()
},
methods: {
// 地图准备好后的操作，返回fmap对象
mapReady ({fmap}) {
this.fmap = fmap
this.showCase()
},
// 获取行政区划
getBoundary () {
// 精一接口
fetchBoundary().then(response => {
if (response.code === '1') {
const data = response.data.data[0].data
this.boundaryData = data
}
})
},
// 获取乡镇区划
getAreaBoundary () {
fetchAreaBoundary().then(response => {
if (response.code === '1') {
const data = response.data.data[0].data
this.areaBoundaryData = data
}
})
},
// 处理渣土车按钮点击后的操作
showConstructionCars () {
this.controlLayersShow('truckShow')
this.getConstructionCars()
},
// 获取渣土车数据
getConstructionCars () {
fetchConstructionCars().then(response => {
if (response.code === 200) {
this.truckData = response.data
}
})
},
// 处理人员按钮后的操作
showShuangChuang () {
this.controlLayersShow('shuangchuangShow')
this.getShuangchuangData()
},
// 获取人员数据
getShuangchuangData () {
fetchShuangchuang().then(response => {
if (response.code === 200) {
this.shuangchuangData = response.data
}
})
},
// 处理事件按钮后的操作
showCase () {
this.controlLayersShow('caseShow')
this.getCaseData()
},
// 获取事件数据
getCaseData () {
fetchCase().then(response => {
if (response.code === 200) {
const data = response.data
// 按照不同类型过滤
this.caseOvertimeData = data.filter((v) => { return v.normState === '5' })
this.caseHandleData = data.filter((v) => { return v.status === '2' })
this.caseWaitData = data.filter((v) => { return v.status === '3' })
}
})
},
// 显示工地
showConstruction () {
this.controlLayersShow('constructionShow')
this.getConstructionData()
},
// 获取在建工地数据
getConstructionData () {
fetchConstructions().then(response => {
if (response.code === '1') {
const data = response.data.data[0].data
this.constructionData = data
}
})
},
// 处理摄像头按钮点击后的操作
showCameras () {
this.controlLayersShow('cameraShow')
this.getCamerasData()
},
// 获取摄像头点位数据
getCamerasData () {
this.getVideoToken() // 获取视频token
// fetchTrafficCameras().then(response => {
// if (response.code === '1') {
// this.cameraStaticData = {
// total: response.data.total,
// online: response.data.total
// }
// this.cameraData = response.data.data[0].data
// }
// })
}, // 处理事件按钮后的操作
// 控制各层显示
controlLayersShow (layerName) {
for (const key in this.layersShow) {
if (key === layerName) {
this.layersShow[key] = true
} else {
if (key !== 'roadShow') {
this.layersShow[key] = false
}
}
}
},
// 获取视频相关参数
getVideoToken () {
fetchVideoToken().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
}
fetchFlushVideoToken(params).then(res => {
if (res.code === 1) {
this.videoToken = res.data
}
})
},
// 获取所有通道
getChannels () {
let params = {
'token': this.videoToken
}
fetchChannels(params).then(res => {
if (res.code === 1) {
// this.videoChannels = res.data
this.videoChannels = res.data.filter((item) => {
return item.online === '1'
})
this.offlineVideoChannels = res.data.filter((item) => {
return item.online !== '1'
})
this.cameraStaticData = {
total: res.data.length,
online: this.videoChannels.length
}
}
})
},
// 获取视频
getVideo (channelId) {
let params = {
'token': this.videoToken,
'channelId': channelId
}
fetchVideo(params).then(res => {
if (res.code === 1) {
const videoUrl = res.data.url
if (videoUrl) {
if (this.currentPlayer === 'player') {
this.videoUrl = videoUrl
this.videoShow = true
this.videoPlay1(videoUrl)
this.currentPlayer = 'player'
}
} else {
alert('no videoUrl')
}
}
})
},
// 视频播放1
videoPlay1 (videoUrl) {
let id = 'player-con'
!this.player && (this.player = new Aliplayer({
id: id,
width: '100%',
height: '100%',
autoplay: true, // 自动播放
isLive: true,
// rePlay: true, // 重复播放
// 支持播放地址播放,此播放优先级最高
source: 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()
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.button {
float: left;
min-width: 150px;
max-width: 250px;
display: block;
margin: 1em;
padding: 1em 2em;
border: none;
/*background: none;*/
color: white;
vertical-align: middle;
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.button--round-s {
border-radius: 5px;
}
.button--border-thin {
border: 1px solid;
}
button--saqui {
border-color: #ECEFF1;
overflow: hidden;
color: #fff;
background: #37474f;
-webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
.button--inverted {
background: #fff;
color: #37474f;
}
button--inverted::after {
color: #fff;
}
}
.button--saqui::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em 2em;
color: #37474f;
-webkit-transform-origin: -25% 50%;
transform-origin: -25% 50%;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.videoBox{
position:absolute;
bottom:0;
right:0;
z-index:999;
width:3.8rem;
height:2.55rem;
background:#000000;
display:flex;
align-items: start;
flex-wrap: wrap;
.videoBox-subBox{
width: 100%;
height:100%;
position:relative;
}
}
.videoClose{
position: absolute;
right: .05rem;
top: .06rem;
display: inline-block;
color:#fff;
font-size: .09rem;
z-index:999;
cursor: pointer;
}
</style>
