132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<div class="vmap">
|
||
|
|
<div id="map" class="map-animation"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="js">
|
||
|
|
import './map.scss';
|
||
|
|
import { icons, MapDefaultData } from './constants.js';
|
||
|
|
import { onMounted } from 'vue';
|
||
|
|
import { deviceManageList } from '#/api/sis/deviceManage/index.js';
|
||
|
|
|
||
|
|
// 地图全局对象
|
||
|
|
let map = null;
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
mapFn.intiMap();
|
||
|
|
// 加载设备信息
|
||
|
|
deviceManageList({ deviceType: 1 }).then(({ rows = [], total = 0 }) => {
|
||
|
|
if (total > 0) {
|
||
|
|
// 渲染设备点位信息
|
||
|
|
let items = rows.map((item) => {
|
||
|
|
return {
|
||
|
|
icon: 'camera',
|
||
|
|
data: item,
|
||
|
|
lon: item.lon,
|
||
|
|
lat: item.lat,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
mapFn.renderOverLayersData(items, function (marker, data) {
|
||
|
|
// 渲染设备点击事件
|
||
|
|
marker.addEventListener('click', () => {
|
||
|
|
console.log(data);
|
||
|
|
// 查询当前设备的通道信息
|
||
|
|
|
||
|
|
//渲染设备播放列表
|
||
|
|
const html = [
|
||
|
|
'<div class="video-wrap" style="width: 530px;height: 350px;padding-top:50px">',
|
||
|
|
`<div class="wrap-title" style="margin-top: -35px;">${data.deviceName}</div>`,
|
||
|
|
`<div class="close" onclick="pageEvent.closeInfoWindow()">X</div>`,
|
||
|
|
`<div class="wrap-content">`,
|
||
|
|
`<div onclick="pageEvent.playClick()" class="content-left" style="height: 270px">`,
|
||
|
|
'<video id="video-player" ref="player1" muted autoplay></video>',
|
||
|
|
`</div>`,
|
||
|
|
`</div>`,
|
||
|
|
`</div>`,
|
||
|
|
];
|
||
|
|
const infoWindow = new BMap.InfoWindow(html.join(''), {
|
||
|
|
width: 530,
|
||
|
|
height: 350,
|
||
|
|
enableCloseOnClick: false,
|
||
|
|
});
|
||
|
|
map.openInfoWindow(infoWindow, marker.point);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
// 当前页面播放的对象
|
||
|
|
let currentPlayer = undefined;
|
||
|
|
|
||
|
|
window.pageEvent = {
|
||
|
|
closeInfoWindow() {
|
||
|
|
map.closeInfoWindow();
|
||
|
|
closeVideo(currentPlayer);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
function closeVideo(player) {
|
||
|
|
if (player) {
|
||
|
|
try {
|
||
|
|
player.pause();
|
||
|
|
player.unload();
|
||
|
|
player.destroy();
|
||
|
|
} catch (e) {
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 地图相关方法 */
|
||
|
|
const mapFn = {
|
||
|
|
renderOverLayersData(data, cb, clear = true) {
|
||
|
|
// 清楚地图上的图层
|
||
|
|
if (clear) {
|
||
|
|
mapFn.clearLayers();
|
||
|
|
}
|
||
|
|
data.forEach((v) => {
|
||
|
|
const { lon, lat, data, icon } = v;
|
||
|
|
const marker = new BMap.Marker(new BMap.Point(lon, lat), {
|
||
|
|
icon: icons[icon],
|
||
|
|
});
|
||
|
|
// 将数据放入marker
|
||
|
|
marker.data = data;
|
||
|
|
marker.setTop(true, 100);
|
||
|
|
// 保存自定义信息到marker对象中
|
||
|
|
map.addOverlay(marker);
|
||
|
|
if (cb) {
|
||
|
|
cb(marker, data);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 清除地图上的所有图层
|
||
|
|
*/
|
||
|
|
clearLayers: () => map.clearOverlays(),
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 初始化地图
|
||
|
|
* @param cb 地图初始化的回调函数
|
||
|
|
*/
|
||
|
|
intiMap: function (cb) {
|
||
|
|
// 创建地图实例
|
||
|
|
map = new BMap.Map('map', { enableMapClick: false });
|
||
|
|
// 设置地图中心和初始层级
|
||
|
|
map.centerAndZoom(
|
||
|
|
new BMap.Point(MapDefaultData.center[0], MapDefaultData.center[1]),
|
||
|
|
MapDefaultData.zoom,
|
||
|
|
);
|
||
|
|
// 设置地图样式
|
||
|
|
map.setMapStyleV2({
|
||
|
|
styleId: 'bbb822feddbffbb4dc419fc6c37f2e4e',
|
||
|
|
});
|
||
|
|
// 开启滚轮缩放
|
||
|
|
map.enableScrollWheelZoom(true);
|
||
|
|
map.clearOverlays();
|
||
|
|
if (cb) {
|
||
|
|
cb();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|