<template>
|
<div>
|
<div :id="newMapId" class="map"></div>
|
</div>
|
</template>
|
<script>
|
/* eslint-disable */
|
let settingMapHtml = `<div class="pl10 pt20 pr10 pb20">
|
<h3 class="pl30 pb20">区域信息</h3>
|
<div class="el-form settingMap-text" >
|
<div class="el-form-item">
|
<label class="el-form-item__label" style="width: 100px;">区域名称 ：</label>
|
<div class="el-form-item__content" style="margin-left: 100px;">
|
<div class="el-input">
|
<input id="settingMapName" autocomplete="off" type="text" rows="2" class="el-input__inner">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pt20 pb20 text-center">
|
<button type="button" id="settingMapInfoBtn" class="el-button el-button--primary pl30 pr30">
|
<span>立即创建</span>
|
</button>
|
</div>
|
</div>`
|
import { Table, TableColumn, Collapse, CollapseItem } from 'element-ui'
|
import { findInArrJson } from '@/components/common/util.js'
|
import vxg from './vxg'
|
export default {
|
name: 'home-map',
|
metaInfo: {
|
title: '首页地图'
|
},
|
components: {
|
Table,
|
TableColumn,
|
Collapse,
|
CollapseItem,
|
vxg
|
},
|
props: {
|
// 自定义id
|
newId:{
|
default:'',
|
type:String
|
}
|
},
|
data() {
|
return {
|
/** 地图对象 */
|
bMapObj: {},
|
/** 摄像头全局对象 */
|
cameraMarkers: [],
|
/** 定义视频播放起的编号 */
|
indexPlayer: 1
|
}
|
},
|
computed: {
|
newMapId() {
|
return this.newId && this.newId !== '' ? this.newId : 'allMap'
|
},
|
newDefaultMapZoom() {
|
return this.defaultMapZoom && this.defaultMapZoom !== ''
|
? this.defaultMapZoom
|
: 12
|
}
|
},
|
methods: {
|
/* 地图初始化 */
|
bmapinit() {
|
/* eslint-disable */
|
/*地图init*/
|
this.bMapObj = new BMap.Map(this.newMapId, {
|
enableMapClick: false,
|
minZoom: 14
|
})
|
let point = new BMap.Point(116.331398, 39.897445) // 初始化位置(116.331398,39.897445);
|
this.bMapObj.centerAndZoom(point, this.newDefaultMapZoom)
|
let bottom_right_navigation = new BMap.NavigationControl({
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
type: BMAP_NAVIGATION_CONTROL_ZOOM
|
}) //右上角，仅包含平移和缩放按钮
|
this.bMapObj.addControl(bottom_right_navigation) //添加控件
|
// 启动滚轮缩放
|
this.bMapObj.enableScrollWheelZoom()
|
// 设置地图点击事件
|
this.bMapObj.addEventListener('rightclick',this.mapClick)
|
|
// this.bMapObj.addEventListener('mousedown', this.listenMouseDown)
|
// this.bMapObj.addEventListener('mousemove', this.listenMouseOve)
|
// 监听鼠标松开事件
|
// this.bMapObj.addEventListener('mouseup', this.listenMouseUp)
|
|
//创建全局弹窗
|
this.textInfoWindow = new BMap.InfoWindow('', {
|
width: 480,
|
height: 420,
|
offset: new BMap.Size(0, -10)
|
})
|
|
// 创建全局右键菜单对象
|
// let txtMenuItem = [
|
// {
|
// text:'放置设备',
|
// callback:function () {
|
// this.setDevice()
|
// }
|
// }
|
// ]
|
// let menu = new BMap.ContextMenu()
|
// for(var i=0; i < txtMenuItem.length; i++){
|
// menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,80));
|
// }
|
// this.bMapObj.addContextMenu(menu)
|
|
/** 测试marker */
|
let mapdata =[
|
{
|
id:'1',
|
lng:'116.331398',
|
lat:'39.897445',
|
status: 'online',
|
data:{
|
lng:'116.331398',
|
lat:'39.897445',
|
},
|
url:'rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream'
|
},
|
{
|
id:'2',
|
lng:'116.318912',
|
lat:'39.923854',
|
status: 'unOnline',
|
url:'rtsp://admin:a1234567@192.168.1.64:554/h264/ch1/main/av_stream',
|
data:{
|
lng:'116.318912',
|
lat:'39.923854',
|
}
|
}
|
]
|
this.bmapCreateMarker(mapdata)
|
},
|
/**城市ip定位 */
|
bmaSetCenterByIp() {
|
const myCity = new BMap.LocalCity()
|
myCity.get(result => {
|
var cityName = result.name
|
this.bMapObj.setCenter(cityName)
|
})
|
},
|
bmapPto(lng, lat) {
|
if (lng && lat) {
|
this.bMapObj.panTo(new BMap.Point(lng, lat))
|
}
|
},
|
//创建一个标记点信息窗口
|
creatMarkInfoWindow(arr) {
|
if (!arr || arr.length < 2) {
|
return false
|
}
|
let htmlStr = settingMapHtml || ''
|
let marker = new BMap.Marker(new BMap.Point(arr[0], arr[1]))
|
this.bMapObj.addOverlay(marker)
|
//弹窗
|
let textInfoWindow = new BMap.InfoWindow('', {
|
width: 400,
|
height: 200,
|
offset: new BMap.Size(0, 20)
|
})
|
textInfoWindow.setContent(htmlStr)
|
|
let _this = this
|
|
const opentextInfoWindow = () => {
|
marker.openInfoWindow(textInfoWindow)
|
|
// document.querySelector( `#${this.newMapId} #settingMapInfoBtn`).onclick=()=>{
|
// let mapName = document.querySelector( `#${this.newMapId} #settingMapName`).value;
|
// _this.settingMapInfo.name = mapName;
|
// if(mapName!==''){
|
// //创建方法
|
// this.addArea(_this.settingMapInfo);
|
// }else{
|
// this.$message({message: '区域名称还没有填写！',type: 'error'});
|
// }
|
// };
|
}
|
setTimeout(() => {
|
opentextInfoWindow()
|
}, 100)
|
marker.addEventListener('click', opentextInfoWindow)
|
return marker
|
},
|
//设备marker渲染
|
bmapCreateMarker(arr){
|
let mapData = arr || []
|
//更改地图中心
|
if(mapData && mapData.length > 0 && mapData[0]){
|
let arrIndex = mapData.length - 1
|
this.bmapPto(mapData[arrIndex].lng, mapData[arrIndex].lat)
|
} else {
|
return false
|
}
|
console.log(arr,'--------------ViewMap arr')
|
/** 摄像头全局对象 */
|
let cameraMarkers = []
|
/** 渲染marker */
|
for(let i = 0; i < mapData.length; i++){
|
if (
|
mapData[i].lng &&
|
mapData[i].lat &&
|
mapData[i].lng !== 'None' &&
|
mapData[i].lat !== 'None'
|
) {
|
let pt = new BMap.Point(mapData[i].lng, mapData[i].lat)
|
let iconStr = '/static/img/map/bmap_camera.png'
|
/* 图标设置 */
|
//不在线图标0 高亮
|
let cameraIcon_active= new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{ anchor: new BMap.Size(18, 45) }
|
)
|
//在线图标1
|
let cameraIcon_online = new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{
|
anchor: new BMap.Size(18, 45),
|
imageOffset: new BMap.Size(0, -47)
|
}
|
)
|
//图标
|
let cameraIcon_unOnline = new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{
|
anchor: new BMap.Size(18, 45),
|
imageOffset: new BMap.Size(0, -94)
|
}
|
)
|
//摄像头的icon
|
// let cameraIcon = new BMap.Icon('/static/img/map/camera_device_online.png',new BMap.Size(43,45))
|
let marker
|
if(mapData[i].status === 'online'){
|
marker = new BMap.Marker(pt, {
|
icon:cameraIcon_online
|
})
|
} else if(mapData[i].status === 'unOnline'){
|
marker = new BMap.Marker(pt, {
|
icon:cameraIcon_unOnline
|
})
|
}
|
|
this.bMapObj.addOverlay(marker)
|
/** 设置标注点可拖拽 测试*/
|
marker.enableDragging()
|
|
/** 将设备信息存储到marker中 */
|
marker.index = i
|
marker.data = mapData[i]
|
marker.id = mapData[i].id
|
|
marker.Icon_unOnline = cameraIcon_unOnline
|
marker.Icon_online = cameraIcon_online
|
marker.Icon_active = cameraIcon_active
|
if (findInArrJson(mapData[i].id, this.cameraMarkers, 'id') === -1) {
|
this.cameraMarkers.push(marker)
|
}
|
console.log(this.cameraMarkers, 'this.cameraMarkers')
|
//是否点击摄像机
|
let _this = this
|
const opentextInfoWindow = async() => {
|
/* 查询设备情况 */
|
// await this.getSchoolInfoData(marker.id)
|
console.log('进入打开弹窗')
|
let labelHtml = `<div class="pb10">
|
<div style="height:70%;width:100%">
|
<div id="dynamicallyPlayers"></div>
|
</div>
|
<div style="height:30%;" class="">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备类型:</span>
|
</div>
|
<div id="toDetails" class="flex-row-right">
|
<a href="javascript:console.log()">详情</a>
|
</div>
|
</div>
|
|
<div class="flex-row-left">
|
<span>设备编码:</span>
|
</div>
|
<div class="flex-row-left">
|
<span>设备位置:</span>
|
</div>
|
</div>
|
</div>`
|
|
this.textInfoWindow.setContent(labelHtml)
|
marker.openInfoWindow(this.textInfoWindow)
|
//添加事件
|
document.querySelector(
|
`#${this.newMapId} #toDetails`
|
).onclick = () => {
|
_this.$emit('toDetails', marker)
|
}
|
// document.querySelector(
|
// `#${this.newMapId} #mapEmergencyBtn`
|
// ).onclick = () => {
|
// _this.$emit('mapEmergencyfn', marker)
|
// }
|
|
/** 渲染弹框中的视频插件*/
|
console.log('能否走到这一步')
|
this.indexPlayer++
|
var playerId = 'vxg_media_player1'+this.indexPlayer
|
var div = document.createElement('div')
|
div.setAttribute("id", playerId)
|
div.setAttribute("class", "vxgplayer")
|
var runtimePlayers = document.getElementById('dynamicallyPlayers')
|
runtimePlayers.appendChild(div)
|
console.log(vxgplayer,'vxgplayer')
|
vxgplayer(playerId, {
|
url: '',
|
nmf_path: 'media_player.nmf',
|
nmf_src: '/static/vxgplayer-1.8.31/pnacl/Release/media_player.nmf',
|
latency: 300000,
|
width: "460",
|
height: "320",
|
aspect_ratio_mode: 1,
|
autohide: 3,
|
controls: true,
|
connection_timeout: 5000,
|
connection_udp: 0,
|
custom_digital_zoom: false
|
}).ready(function(){
|
console.log(' =>ready player '+playerId)
|
vxgplayer(playerId).src(mapData[i].url)
|
vxgplayer(playerId).play()
|
console.log(' <=ready player '+playerId)
|
})
|
}
|
marker.addEventListener('click', opentextInfoWindow)
|
|
}
|
}
|
},
|
// 接收父组件传递过来的数据，用以渲染地图组件
|
reciveParentData(arr){
|
console.log(arr,'地图组件中接收父组件传递过来的数据')
|
console.log(this.cameraMarkers,'地图中的所有标记点数据')
|
if(arr&&arr.length!==0){
|
/**迭代渲染每一个标记点 */
|
arr.forEach((item,index)=>{
|
// 获取设备位置信息
|
let point = new BMap.Point(item.lng,item.lat)
|
// 创建标记点marker
|
let marker
|
/* 图标设置 */
|
let iconStr = '/static/img/map/bmap_camera.png'
|
//不在线图标0 高亮
|
let cameraIcon_active= new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{ anchor: new BMap.Size(18, 45) }
|
)
|
//在线图标1
|
let cameraIcon_online = new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{
|
anchor: new BMap.Size(18, 45),
|
imageOffset: new BMap.Size(0, -47)
|
}
|
)
|
//图标
|
let cameraIcon_unOnline = new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{
|
anchor: new BMap.Size(18, 45),
|
imageOffset: new BMap.Size(0, -94)
|
}
|
)
|
// 根据设备状态选择标签
|
if(item.status === 'online'){
|
marker = new BMap.Marker(point,{
|
icon:cameraIcon_online
|
})
|
} else if (item.status === 'unOnline'){
|
marker = new BMap.Marker(point,{
|
icon:cameraIcon_unOnline
|
})
|
} else {
|
marker = new BMap.Marker(point,{
|
icon:cameraIcon_active
|
})
|
}
|
/** 将设备信息存在marker中 */
|
// marker.index = index
|
// marker.data = item
|
// marker.id = item.id
|
|
/** 查找每一个设备是否在全局设备列表中，然后进行相关操作 */
|
this.cameraMarkers.forEach((x,index)=>{
|
/** 判断设备id是否相等 */
|
if(x.id ===item.id ){
|
/** 如果id相等，对这个设备在地图上的点进行高亮或跳动 */
|
x.setIcon(x.Icon_active)
|
}
|
})
|
|
// 将标记点渲染到地图上去
|
this.bMapObj.addOverlay(marker)
|
// 设置标记点跳动
|
marker.setAnimation(BMAP_ANIMATION_BOUNCE)
|
// 将标记点信息装进全局变量中
|
// this.cameraMarkers.push(marker)
|
|
//是否点击摄像机
|
let _this = this
|
const opentextInfoWindow = async() => {
|
/* 查询设备情况 */
|
// await this.getSchoolInfoData(marker.id)
|
console.log('进入打开弹窗')
|
let labelHtml = `<div class="pb10">
|
<div style="height:70%;width:100%">
|
<div id="dynamicallyPlayers"></div>
|
</div>
|
<div style="height:30%;" class="">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备类型:</span>
|
</div>
|
<div id="toDetails" class="flex-row-right">
|
<a href="javascript:console.log()">详情</a>
|
</div>
|
</div>
|
|
<div class="flex-row-left">
|
<span>设备编码:</span>
|
</div>
|
<div class="flex-row-left">
|
<span>设备位置:</span>
|
</div>
|
</div>
|
</div>`
|
|
this.textInfoWindow.setContent(labelHtml)
|
marker.openInfoWindow(this.textInfoWindow)
|
//添加事件
|
document.querySelector(
|
`#${this.newMapId} #toDetails`
|
).onclick = () => {
|
_this.$emit('toDetails', marker)
|
}
|
|
/** 渲染弹框中的视频插件*/
|
console.log('能否走到这一步')
|
this.indexPlayer++
|
var playerId = 'vxg_media_player1'+this.indexPlayer
|
var div = document.createElement('div')
|
div.setAttribute("id", playerId)
|
div.setAttribute("class", "vxgplayer")
|
var runtimePlayers = document.getElementById('dynamicallyPlayers')
|
runtimePlayers.appendChild(div)
|
console.log(vxgplayer,'vxgplayer')
|
vxgplayer(playerId, {
|
url: '',
|
nmf_path: 'media_player.nmf',
|
nmf_src: '/static/vxgplayer-1.8.31/pnacl/Release/media_player.nmf',
|
latency: 300000,
|
width: "460",
|
height: "320",
|
aspect_ratio_mode: 1,
|
autohide: 3,
|
controls: true,
|
connection_timeout: 5000,
|
connection_udp: 0,
|
custom_digital_zoom: false
|
}).ready(function(){
|
console.log(' =>ready player '+playerId)
|
vxgplayer(playerId).src(item.url)
|
vxgplayer(playerId).play()
|
console.log(' <=ready player '+playerId)
|
})
|
}
|
marker.addEventListener('click', opentextInfoWindow)
|
})
|
}
|
},
|
//设置高亮
|
setActiveCameraMarkers(arr) {
|
let idArr = arr || []
|
let markers = this.cameraMarkers || []
|
/** 在设置高亮之前先把之前设置的高亮去掉 */
|
if (idArr.length === 0) {
|
return false
|
}
|
|
let activeDevices = []
|
//遍历id查找高亮
|
idArr.forEach((idItem, index) => {
|
for (let iteam of this.cameraMarkers) {
|
if (iteam.id == idItem.id) {
|
activeDevices.push(iteam)
|
//iteam.setIcon(iteam.Icon_active);
|
//移动到第0个的位置
|
if (index === 0) {
|
this.bmapPto(iteam.data.lng, iteam.data.lat)
|
}
|
} else {
|
// console.log(iteam,'iteam ')
|
if(iteam.data.status === 'online'){
|
iteam.setIcon(iteam.Icon_online)
|
iteam.setAnimation(null)
|
} else if(iteam.data.status === 'unOnline'){
|
iteam.setIcon(iteam.Icon_unOnline)
|
iteam.setAnimation(null)
|
}
|
}
|
}
|
})
|
//设置高亮图标
|
for (let val of activeDevices) {
|
val.setIcon(val.Icon_active)
|
// 设置标记点跳动
|
val.setAnimation(BMAP_ANIMATION_BOUNCE)
|
}
|
},
|
//删除高亮
|
removeActiveCameraMarkers() {
|
let markers = this.cameraMarkers || []
|
for (let iteam of markers) {
|
if(iteam.status === 'online'){
|
iteam.setIcon(iteam.Icon_online)
|
} else if(iteam.status === 'unOnline'){
|
iteam.setIcon(iteam.Icon_unOnline)
|
}
|
iteam.setAnimation(null)
|
}
|
},
|
// 放置设备
|
setDevice(e){
|
console.log(this.unUseDevice, '放置设备')
|
if(this.unUseDevice.length!==0){
|
// 说明还有未分配的设备
|
|
}
|
},
|
// 地图点击事件
|
mapClick(e){
|
let point = new BMap.Point(e.point.lng,e.point.lat)
|
console.log(point,'point')
|
},
|
// 地图中监听鼠标松开事件，获取松开的经纬度
|
listenMouseUp(e){
|
let point = new BMap.Point(e.point.lng,e.point.lat)
|
console.log(point,'鼠标在这里松开')
|
this.$emit('getPoint',point)
|
},
|
listenMouseOve(e){
|
let point = new BMap.Point(e.point.lng,e.point.lat)
|
// console.log(point,'鼠标在这里移动')
|
},
|
listenMouseDown(e){
|
let point = new BMap.Point(e.point.lng,e.point.lat)
|
console.log(point,'鼠标在这里按下鼠标')
|
}
|
},
|
created() {},
|
mounted() {
|
/* 地图初始化 */
|
setTimeout(() => {
|
this.bmapinit()
|
}, 100)
|
},
|
watch: {}
|
}
|
</script>
|
<style lang="scss">
|
.map {
|
height: 700px;
|
width: 100%;
|
}
|
</style>
|
