显示围栏 【围栏效果是由多个经纬度点连接起来的】
data(){
return{
map:{
Alldata:{
}, //所属有数据
map:null, //地图实例
polyArr:[], //图层覆盖物暂存 [针对区域围栏]
polyLineArr:[], //图层覆盖物暂存 [针对消防通道线]
lopyColor:'#1507e3', //区域围栏是颜色 默认
polyLineColor:'#33b100', //消防通道线的颜色 默认
},
}
}
for(let i=0; i<data.length; i++){
//重新回显描绘
_this.openPoly(arr[i]);
}
//绘制围栏
openPoly(data){
//格式化点数据
let newArr = _this.lnglatFormat(data)
var polygon = new AMap.Polygon({
path: newArr,
//自定义的围栏颜色
strokeColor: _this.map.lopyColor,
strokeOpacity: 1,
strokeWeight: 3,
strokeOpacity: 1,
fillColor: '#1791fc',
fillOpacity: 0,
// 线样式还支持 'dashed'
// strokeStyle: "solid",
strokeStyle: "dashed",
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
});
//将图层压入地图实例中
_this.map.map.add(polygon);
//将所有的覆盖物存储起来，清除使用
_this.map.polyArr.push(polygon);
//图层覆盖物居中
_this.map.map.setFitView(polygon);
}
//开启绘制消防通道
openLine(data){
//开启格式化
let newArr = _this.lnglatFormat(data)
//拿到所有的点
let polyline = new AMap.Polyline({
path: newArr,
//线条颜色
strokeColor: _this.map.polyLineColor,
strokeOpacity: 1,
strokeWeight: 4,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
});
_this.map.map.add(polyline);
//将所有的覆盖物存储起来，清除使用
_this.map.polyLineArr.push(polyline);
},
//开启格式话经纬度
lnglatFormat(data){
let arr = [];
for(let i=0; i<data.length; i++){
let newArr = [];
newArr.push(data[i].lng)
newArr.push(data[i].lat)
arr.push(newArr)
}
return arr;
}
//显示设备图表
setTimeout(function(){
_this.map.map = new AMap.Map('videoMap', {
zoom: 17,
pitch: 25,
viewMode: '3D',
resizeEnable: true,
layers: [new AMap.TileLayer.Satellite()],
})
_this.map.map.addControl(new AMap.MapType({
defaultType:0 //0代表默认，1代表卫星
}));
//摄像头设备数据
// let ddc = marker1.ddc;
// let dwdl = marker1.dwdl;
// let hy = marker1.hy;
let ddc = [];
let dwdl = [];
let hy = [];
let xftd = marker1.xftd;
//报警设备显示 --中心点设备
let ddcImgsrc = require('@/assets/gif/12.gif');
let dwdlImgsrc = require('@/assets/gif/22.gif');
let hyImgsrc = require('@/assets/gif/32.gif');
let xftdImgsrc = require('@/assets/gif/42.gif');
ddc.forEach(item=>{
if(!item.lng || !item.lat){
return};
let marker = new AMap.Marker({
map:_this.map.map ,
position:[item.lng,item.lat],
content: `<div><img class="imgRotate" src="${
ddcImgsrc}" style="width:30px;height:30px;"/></div>`, //设置文本标注内容
offset: new AMap.Pixel(-15, -15), //此处应设为图标尺寸的一半
title:`${
item.address}`
});
marker.setExtData(item);
//marker增加的点击事件
marker.on('click', _this.markerClick);
});
dwdl.forEach(item=>{
if(!item.lng || !item.lat){
return};
let marker = new AMap.Marker({
map:_this.map.map ,
position:[item.lng,item.lat],
content: `<div><img class="imgRotate" src="${
dwdlImgsrc}" style="width:30px;height:30px;"/></div>`, //设置文本标注内容
offset: new AMap.Pixel(-15, -15), //此处应设为图标尺寸的一半
title:`${
item.address}`
});
marker.setExtData(item);
//marker增加的点击事件
marker.on('click', _this.markerClick);
});
xftd.forEach(item=>{
if(!item.lng || !item.lat){
return};
let marker = new AMap.Marker({
map:_this.map.map ,
position:[item.lng,item.lat],
content: `<div><img class="imgRotate" src="${
xftdImgsrc}" style="width:30px;height:30px;"/></div>`, //设置文本标注内容
offset: new AMap.Pixel(-15, -15), //此处应设为图标尺寸的一半
title:`${
item.address}`
});
marker.setExtData(item);
//marker增加的点击事件
marker.on('click', _this.markerClick);
});
hy.forEach(item=>{
if(!item.lng || !item.lat){
return};
let marker = new AMap.Marker({
map:_this.map.map ,
position:[item.lng,item.lat],
content: `<div><img class="imgRotate" src="${
hyImgsrc}" style="width:30px;height:30px;"/></div>`, //设置文本标注内容
offset: new AMap.Pixel(-15, -15), //此处应设为图标尺寸的一半
title:`${
item.address}`
});
marker.setExtData(item);
//marker增加的点击事件
marker.on('click', _this.markerClick);
});
//marker点显示到视觉页面内
// 第一个参数为空，表明用图上所有覆盖物 setFitview
// 第二个参数为false, 非立即执行
// 第三个参数设置上左下右的空白
_this.map.map .setFitView(null,false,[100,100,100,100]);
});