<template>
<div>
<div id="map_container" ref="container" class="map-container"></div>
<input type="checkbox" v-model="xjcheck"> 巡检
</div>
</templat>
<script>
const carIcon = require("xxx/xxx.png");
import { darkStyle } from "./darkStyle.js"; //自定义模式
export default {
data() {
return {
map: null,
xjcheck: false,
carView: null,
timer: null
}
},
watch: {
xjcheck (newVal, oldVal) {
this.destoryCar();
if(this.timer != null){
clearInterval(this.timer);
}
if (newVal) {
this.loadCar(); //加载车辆信息
this.timer = setInterval(() => {
this.destoryCar();
this.loadCar();
}, 60000)
}
}
},
mounted() {
this.init();
},
methods: {
initMap() {
// 地图初始化
const center = [113.55934, 22.271431];
this.map = new BMapGL.Map(this.$refs.container, {
restrictCenter: false,
maxZoom: 25,
minZoom: 8,
displayOptions: {
building: false,
},
});
this.map.setMapStyleV2({
styleJson: darkStyle
//参考链接https://lbsyun.baidu.com/custom/list.htm
});
this.map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 21); //设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true); //允许地图可被鼠标滚轮缩放
this.map.enableKeyboard(); //启用键盘操作,默认禁用
this.map.enableInertialDragging(); //启用地图惯性拖拽,默认禁用
this.map.setDisplayOptions({
indoor: false
});
//监听地图缩放事件;
this.map.addEventListener("zoomend", ()=> {
this.map.setTilt(0); // 设置地图的倾斜角度
this.map.setHeading(0); //方向偏移
});
const engine = new Engine(this.map, {
rendering: {
enableAnimationLoop: true
}
});
},
destoryCar(){
if(this.carView != null){
this.carView.removeAllLayers();
this.carView.destroy();
this.carView = null;
}
},
loadCar() {
this.carView = new mapvgl.View({
map: this.map
});
this.carView.startAnimation();
//车数据;
this.$axios.get('xxxxx').then(res => {
let carData = res.data;
//汽车数据
let carList = [];
carData.forEach((i) => {
carList.push({
'properties': {
'text': i.devName,
"dept": i.orgName
},
'geometry': {
'type': 'Point',
'coordinates': [i.bdlng,i.bdlat]
}
});
});
//小汽车 图标
let carLayer = new mapvgl.IconLayer({
width: 72,
height: 42,
offset: [0, 0],
opacity: 1,
icon: carIcon,
enablePicked: true, // 是否可以拾取
autoSelect: true,
selectedIndex: -1, // 选中项
onClick: (e) => { // 点击事件
if(e.dataItem!=undefined){
let sContent =`<div style='margin:0;line-height:50px;'>`+
`<p style='margin-bottom: 0;font-size:30px;'> xxx:`+e.dataItem.properties.text+`</p >`+
`<p style='margin-bottom: 0;font-size:30px;'> xxx:`+e.dataItem.properties.dept+`</p >`+
`</div>`;
let opts = {
width: 600,
height: 100,
title: ''
};
let infoWindow = new BMapGL.InfoWindow(sContent, opts);
let point = new BMapGL.Point(e.dataItem.geometry.coordinates[0],e.dataItem.geometry.coordinates[1]);
this.map.openInfoWindow(infoWindow, point);
}
},
});
this.carView.addLayer(carLayer);
carLayer.setData(carList);
//标题 车牌号
var textLayer = new mapvgl.TextLayer({
enablePicked: true,
autoSelect: true,
selectedColor: '#f00', // 选中项颜色
color: '#ff0',
fontSize: 34,
offset: [0, -50],
});
this.carView.addLayer(textLayer);
textLayer.setData(carList);
});
},
}
}
</script>
<style scoped>
::v-deep .BMap_bubble_content{
width: 500px !important;
color: #fff !important;
top: -20px !important;
line-height: 55px !important;
font-size: 23px !important;
}
::v-deep .BMap_bubble_pop {
background-color: #121b4d !important;
border: 5px solid #408bde !important;
width: 550px !important;
text-align: center;
}
</style>
效果图如下: