<!--
* @Description: 路灯
* @Author: 王晓颖
* @Date: 2021-11-22 17:13:40
-->
<template>
<div>
</div>
</template>
<script>
import Leaflet from 'leaflet'
import commonMixin from '@/components/leafletMap/base/mixins/common.js'
import { getPathBounds, getCenterByBounds, getZoomByBounds } from '@/utils/maputils'
export default {
name: 'LampLayer',
mixins: [commonMixin('layer')],
props: {
show: {
type: Boolean,
default: true
}, // 是否显示
iconSize: {
type: Array,
default: () => {
return [20, 20]
}
}, // 图标大小
iconAnchor: {
type: Array,
default: () => {
return [10, 20]
}
}, // 图标位移
popupAnchor: {
type: Array,
default: () => {
return [0, -20]
}
}, // 弹窗位移
refreshTime: {
type: Number,
default: 60
} // 定时刷新时间
},
data () {
return {
maxWindow:false, // 窗口最大化
videoShow: false,
onLampList: [], // 路灯亮列表
offLampList: [], // 路灯关列表
offlineLampList: [], // 离线路灯列表
alarmLampList: [], // 报警路灯列表
onLampLayer: null, // 路灯亮图层
offLampLayer: null, // 路灯关图层
offlineLampLayer: null, // 离线路灯图层
alarmLampLayer: null, // 报警路灯图层
layerGroup: [], // 图层组
onLampIcon: require('@/assets/img/map/lamp-on.png'),
offLampIcon: require('@/assets/img/map/lamp-off.png'),
offlineLampIcon: require('@/assets/img/map/lamp-offline.png'),
alarmLampIcon: require('@/assets/img/map/lamp-alarm.png'),
timer: null // 定时器
}
},
watch: {
show (val) {
if (val) {
console.log('showLampLayer')
this.initLayer()
} else {
this.clearLayer()
}
}
},
methods: {
load () {
if (this.show) {
this.initLayer()
}
},
// 初始化图层
initLayer () {
const {map} = this
this.layerGroup = [] // 先清空LayerGroup
// 初始化图层组
/* eslint-disable new-cap */
this.onLampLayer = new Leaflet.layerGroup().addTo(map)
this.offLampLayer = new Leaflet.layerGroup().addTo(map)
this.offlineLampLayer = new Leaflet.layerGroup().addTo(map)
this.alarmLampLayer = new Leaflet.layerGroup().addTo(map)
this.layerGroup.push(this.onLampLayer)
this.layerGroup.push(this.offLampLayer)
this.layerGroup.push(this.offlineLampLayer)
this.layerGroup.push(this.alarmLampLayer)
console.log('initLayer')
this.loadData()
},
// 清除图层
clearLayer () {
console.log('clearLayer')
const {map, layerGroup} = this
layerGroup.forEach(item => map.removeLayer(item))
},
// 加载全部数据
loadData () {
const {onLampIcon, offLampIcon, offlineLampIcon, alarmLampIcon} = this
// 获取待核实案卷
const rows = [
{lampCode:'260',status:'1',statusName:'开灯',longitude:113.494987, latitude:22.295537},
{lampCode:'233',status:'1',statusName:'开灯',longitude:113.494040, latitude:22.294264},
{lampCode:'234',status:'1',statusName:'开灯',longitude:113.493943, latitude:22.294196},
{lampCode:'235',status:'1',statusName:'开灯',longitude:113.494001, latitude:22.294189},
{lampCode:'236',status:'1',statusName:'开灯',longitude:113.493377, latitude:22.293284},
{lampCode:'237',status:'1',statusName:'开灯',longitude:113.493339, latitude:22.293308},
{lampCode:'238',status:'1',statusName:'开灯',longitude:113.493260, latitude:22.293243},
{lampCode:'239',status:'1',statusName:'开灯',longitude:113.493067, latitude:22.293107},
{lampCode:'240',status:'1',statusName:'开灯',longitude:113.493104, latitude:22.293082},
{lampCode:'241',status:'1',statusName:'开灯',longitude:113.492742, latitude:22.292916},
{lampCode:'242',status:'1',statusName:'开灯',longitude:113.492340, latitude:22.292695},
{lampCode:'225',status:'1',statusName:'开灯',longitude:113.494672, latitude:22.295297},
{lampCode:'243',status:'1',statusName:'开灯',longitude:113.492369, latitude:22.292661},
{lampCode:'244',status:'1',statusName:'开灯',longitude:113.492152, latitude:22.292594},
{lampCode:'245',status:'1',statusName:'开灯',longitude:113.492183, latitude:22.292560},
{lampCode:'246',status:'1',statusName:'开灯',longitude:113.495161, latitude:22.295458},
{lampCode:'247',status:'1',statusName:'开灯',longitude:113.494815, latitude:22.295200},
{lampCode:'248',status:'1',statusName:'开灯',longitude:113.494789, latitude:22.295175},
{lampCode:'249',status:'1',statusName:'开灯',longitude:113.494546, latitude:22.294904},
{lampCode:'250',status:'1',statusName:'开灯',longitude:113.494336, latitude:22.294577},
{lampCode:'251',status:'1',statusName:'开灯',longitude:113.494169, latitude:22.294271},
{lampCode:'252',status:'1',statusName:'开灯',longitude:113.494151, latitude:22.294230},
{lampCode:'226',status:'1',statusName:'开灯',longitude:113.494716, latitude:22.295267},
{lampCode:'253',status:'1',statusName:'开灯',longitude:113.494109, latitude:22.294155},
{lampCode:'254',status:'1',statusName:'开灯',longitude:113.493483, latitude:22.293212},
{lampCode:'255',status:'1',statusName:'开灯',longitude:113.493390, latitude:22.293142},
{lampCode:'256',status:'1',statusName:'开灯',longitude:113.493190, latitude:22.293003},
{lampCode:'257',status:'1',statusName:'开灯',longitude:113.492839, latitude:22.292808},
{lampCode:'258',status:'1',statusName:'开灯',longitude:113.492436, latitude:22.292587},
{lampCode:'259',status:'1',statusName:'开灯',longitude:113.492252, latitude:22.292487},
{lampCode:'227',status:'1',statusName:'开灯',longitude:113.494639, latitude:22.295269},
{lampCode:'228',status:'1',statusName:'开灯',longitude:113.494348, latitude:22.294940},
{lampCode:'229',status:'1',statusName:'开灯',longitude:113.494165, latitude:22.294612},
{lampCode:'230',status:'1',statusName:'开灯',longitude:113.494063, latitude:22.294305},
{lampCode:'231',status:'1',statusName:'开灯',longitude:113.494011, latitude:22.294321},
{lampCode:'232',status:'1',statusName:'开灯',longitude:113.493988, latitude:22.294280},
{lampCode:'003',status:'1',statusName:'开灯',longitude:113.491901, latitude:22.292426},
{lampCode:'092',status:'1',statusName:'开灯',longitude:113.491975, latitude:22.292320},
{lampCode:'004',status:'1',statusName:'开灯',longitude:113.492034, latitude:22.292512},
{lampCode:'087',status:'1',statusName:'开灯',longitude:113.492143, latitude:22.292399},
{lampCode:'012',status:'1',statusName:'开灯',longitude:113.492250, latitude:22.292629},
{lampCode:'082',status:'1',statusName:'开灯',longitude:113.492276, latitude:22.292472},
{lampCode:'015',status:'1',statusName:'开灯',longitude:113.492589, latitude:22.292815},
{lampCode:'067',status:'1',statusName:'开灯',longitude:113.492695, latitude:22.292701},
{lampCode:'019',status:'1',statusName:'开灯',longitude:113.492880, latitude:22.292977},
{lampCode:'060',status:'1',statusName:'开灯',longitude:113.492992, latitude:22.292860},
{lampCode:'024',status:'1',statusName:'开灯',longitude:113.493152, latitude:22.293145},
{lampCode:'051',status:'1',statusName:'开灯',longitude:113.493308, latitude:22.293044},
{lampCode:'200',status:'1',statusName:'开灯',longitude:113.493390, latitude:22.293337},
{lampCode:'043',status:'1',statusName:'开灯',longitude:113.493512, latitude:22.293206},
{lampCode:'194',status:'1',statusName:'开灯',longitude:113.493878, latitude:22.294037},
{lampCode:'188',status:'1',statusName:'开灯',longitude:113.494034, latitude:22.294329},
{lampCode:'105',status:'1',statusName:'开灯',longitude:113.494084, latitude:22.294052},
{lampCode:'185',status:'1',statusName:'开灯',longitude:113.494147, latitude:22.294544},
{lampCode:'118',status:'1',statusName:'开灯',longitude:113.494199, latitude:22.294271},
{lampCode:'181',status:'1',statusName:'开灯',longitude:113.494306, latitude:22.294859},
{lampCode:'123',status:'1',statusName:'开灯',longitude:113.494314, latitude:22.294488},
{lampCode:'178',status:'1',statusName:'开灯',longitude:113.494362, latitude:22.294939},
{lampCode:'133',status:'1',statusName:'开灯',longitude:113.494451, latitude:22.294728},
{lampCode:'175',status:'1',statusName:'开灯',longitude:113.494486, latitude:22.295098},
{lampCode:'140',status:'1',statusName:'开灯',longitude:113.494635, latitude:22.294987},
{lampCode:'171',status:'1',statusName:'开灯',longitude:113.494709, latitude:22.295317},
{lampCode:'147',status:'1',statusName:'开灯',longitude:113.494844, latitude:22.295198},
{lampCode:'089',status:'1',statusName:'开灯',longitude:113.492124, latitude:22.292352},
{lampCode:'085',status:'1',statusName:'开灯',longitude:113.492213, latitude:22.292401},
{lampCode:'080',status:'1',statusName:'开灯',longitude:113.492311, latitude:22.292454},
{lampCode:'079',status:'1',statusName:'开灯',longitude:113.492349, latitude:22.292475},
{lampCode:'076',status:'1',statusName:'开灯',longitude:113.492398, latitude:22.292502},
{lampCode:'075',status:'1',statusName:'开灯',longitude:113.492436, latitude:22.292522},
{lampCode:'070',status:'1',statusName:'开灯',longitude:113.492525, latitude:22.292571},
{lampCode:'069',status:'1',statusName:'开灯',longitude:113.492621, latitude:22.292623},
{lampCode:'066',status:'1',statusName:'开灯',longitude:113.492715, latitude:22.292675},
{lampCode:'065',status:'1',statusName:'开灯',longitude:113.492811, latitude:22.292728},
{lampCode:'204',status:'1',statusName:'开灯',longitude:113.492887, latitude:22.292768},
{lampCode:'059',status:'1',statusName:'开灯',longitude:113.493028, latitude:22.292842},
{lampCode:'058',status:'1',statusName:'开灯',longitude:113.493124, latitude:22.292893},
{lampCode:'057',status:'1',statusName:'开灯',longitude:113.493218, latitude:22.292946},
{lampCode:'052',status:'1',statusName:'开灯',longitude:113.493309, latitude:22.293004},
{lampCode:'050',status:'1',statusName:'开灯',longitude:113.493395, latitude:22.293065},
{lampCode:'047',status:'1',statusName:'开灯',longitude:113.493466, latitude:22.293122},
{lampCode:'046',status:'1',statusName:'开灯',longitude:113.493499, latitude:22.293150},
{lampCode:'041',status:'1',statusName:'开灯',longitude:113.493561, latitude:22.293205},
{lampCode:'203',status:'1',statusName:'开灯',longitude:113.493589, latitude:22.293232},
{lampCode:'036',status:'1',statusName:'开灯',longitude:113.493657, latitude:22.293299},
{lampCode:'035',status:'1',statusName:'开灯',longitude:113.493722, latitude:22.293370},
{lampCode:'103',status:'1',statusName:'开灯',longitude:113.494072, latitude:22.293953},
{lampCode:'107',status:'1',statusName:'开灯',longitude:113.494120, latitude:22.294044},
{lampCode:'110',status:'1',statusName:'开灯',longitude:113.494139, latitude:22.294078},
{lampCode:'113',status:'1',statusName:'开灯',longitude:113.494180, latitude:22.294155},
{lampCode:'116',status:'1',statusName:'开灯',longitude:113.494223, latitude:22.294239},
{lampCode:'120',status:'1',statusName:'开灯',longitude:113.494268, latitude:22.294323},
{lampCode:'121',status:'1',statusName:'开灯',longitude:113.494311, latitude:22.294405},
{lampCode:'122',status:'1',statusName:'开灯',longitude:113.494356, latitude:22.294489},
{lampCode:'127',status:'1',statusName:'开灯',longitude:113.494390, latitude:22.294552},
{lampCode:'128',status:'1',statusName:'开灯',longitude:113.494411, latitude:22.294587},
{lampCode:'130',status:'1',statusName:'开灯',longitude:113.494457, latitude:22.294664},
{lampCode:'131',status:'1',statusName:'开灯',longitude:113.494499, latitude:22.294733},
{lampCode:'136',status:'1',statusName:'开灯',longitude:113.494544, latitude:22.294810},
{lampCode:'138',status:'1',statusName:'开灯',longitude:113.494600, latitude:22.294888},
{lampCode:'206',status:'1',statusName:'开灯',longitude:113.494661, latitude:22.294965},
{lampCode:'142',status:'1',statusName:'开灯',longitude:113.494727, latitude:22.295039},
{lampCode:'143',status:'1',statusName:'开灯',longitude:113.494798, latitude:22.295110},
{lampCode:'144',status:'1',statusName:'开灯',longitude:113.494873, latitude:22.295178},
{lampCode:'157',status:'1',statusName:'开灯',longitude:113.494924, latitude:22.295220},
{lampCode:'156',status:'1',statusName:'开灯',longitude:113.494954, latitude:22.295245},
{lampCode:'155',status:'1',statusName:'开灯',longitude:113.494993, latitude:22.295274},
{lampCode:'154',status:'1',statusName:'开灯',longitude:113.495026, latitude:22.295299},
{lampCode:'160',status:'1',statusName:'开灯',longitude:113.495104, latitude:22.295358},
{lampCode:'163',status:'1',statusName:'开灯',longitude:113.495187, latitude:22.295420},
{lampCode:'095',status:'1',statusName:'开灯',longitude:113.491991, latitude:22.292273},
{lampCode:'088',status:'1',statusName:'开灯',longitude:113.492116, latitude:22.292362},
{lampCode:'086',status:'1',statusName:'开灯',longitude:113.492187, latitude:22.292411},
{lampCode:'081',status:'1',statusName:'开灯',longitude:113.492301, latitude:22.292463},
{lampCode:'078',status:'1',statusName:'开灯',longitude:113.492339, latitude:22.292485},
{lampCode:'077',status:'1',statusName:'开灯',longitude:113.492389, latitude:22.292511},
{lampCode:'074',status:'1',statusName:'开灯',longitude:113.492428, latitude:22.292532},
{lampCode:'062',status:'1',statusName:'开灯',longitude:113.492930, latitude:22.292803},
{lampCode:'048',status:'1',statusName:'开灯',longitude:113.493455, latitude:22.293130},
{lampCode:'045',status:'1',statusName:'开灯',longitude:113.493488, latitude:22.293157},
{lampCode:'097',status:'1',statusName:'开灯',longitude:113.493505, latitude:22.293120},
{lampCode:'042',status:'1',statusName:'开灯',longitude:113.493549, latitude:22.293212},
{lampCode:'207',status:'1',statusName:'开灯',longitude:113.493578, latitude:22.293239},
{lampCode:'037',status:'1',statusName:'开灯',longitude:113.493610, latitude:22.293284},
{lampCode:'102',status:'1',statusName:'开灯',longitude:113.494060, latitude:22.293958},
{lampCode:'106',status:'1',statusName:'开灯',longitude:113.494103, latitude:22.294048},
{lampCode:'109',status:'1',statusName:'开灯',longitude:113.494124, latitude:22.294082},
{lampCode:'108',status:'1',statusName:'开灯',longitude:113.494158, latitude:22.294051},
{lampCode:'126',status:'1',statusName:'开灯',longitude:113.494375, latitude:22.294557},
{lampCode:'129',status:'1',statusName:'开灯',longitude:113.494397, latitude:22.294591},
{lampCode:'132',status:'1',statusName:'开灯',longitude:113.494487, latitude:22.294738},
{lampCode:'150',status:'1',statusName:'开灯',longitude:113.494911, latitude:22.295228},
{lampCode:'151',status:'1',statusName:'开灯',longitude:113.494942, latitude:22.295251},
{lampCode:'158',status:'1',statusName:'开灯',longitude:113.494964, latitude:22.295215},
{lampCode:'152',status:'1',statusName:'开灯',longitude:113.494980, latitude:22.295281},
{lampCode:'153',status:'1',statusName:'开灯',longitude:113.495014, latitude:22.295307},
{lampCode:'162',status:'1',statusName:'开灯',longitude:113.495170, latitude:22.295435},
{lampCode:'000',status:'1',statusName:'开灯',longitude:113.491831, latitude:22.292432},
{lampCode:'094',status:'1',statusName:'开灯',longitude:113.491961, latitude:22.292278},
{lampCode:'006',status:'1',statusName:'开灯',longitude:113.492053, latitude:22.292565},
{lampCode:'090',status:'1',statusName:'开灯',longitude:113.492065, latitude:22.292354},
{lampCode:'033',status:'1',statusName:'开灯',longitude:113.493523, latitude:22.293479},
{lampCode:'034',status:'1',statusName:'开灯',longitude:113.493702, latitude:22.293383},
{lampCode:'196',status:'1',statusName:'开灯',longitude:113.493862, latitude:22.294005},
{lampCode:'101',status:'1',statusName:'开灯',longitude:113.494049, latitude:22.293961},
{lampCode:'104',status:'1',statusName:'开灯',longitude:113.494077, latitude:22.294016},
{lampCode:'183',status:'1',statusName:'开灯',longitude:113.494259, latitude:22.294774},
{lampCode:'179',status:'1',statusName:'开灯',longitude:113.494344, latitude:22.294940},
{lampCode:'174',status:'1',statusName:'开灯',longitude:113.494474, latitude:22.295106},
{lampCode:'135',status:'1',statusName:'开灯',longitude:113.494497, latitude:22.294801},
{lampCode:'167',status:'1',statusName:'开灯',longitude:113.495084, latitude:22.295577},
{lampCode:'164',status:'1',statusName:'开灯',longitude:113.495189, latitude:22.295462},
{lampCode:'005',status:'1',statusName:'开灯',longitude:113.492051, latitude:22.292536},
{lampCode:'007',status:'1',statusName:'开灯',longitude:113.492126, latitude:22.292563},
{lampCode:'016',status:'1',statusName:'开灯',longitude:113.492689, latitude:22.292882},
{lampCode:'022',status:'1',statusName:'开灯',longitude:113.493064, latitude:22.293116},
{lampCode:'021',status:'1',statusName:'开灯',longitude:113.493073, latitude:22.293108},
{lampCode:'215',status:'1',statusName:'开灯',longitude:113.493214, latitude:22.292981},
{lampCode:'201',status:'1',statusName:'开灯',longitude:113.493373, latitude:22.293338},
{lampCode:'029',status:'1',statusName:'开灯',longitude:113.493414, latitude:22.293386},
{lampCode:'030',status:'1',statusName:'开灯',longitude:113.493461, latitude:22.293433},
{lampCode:'217',status:'1',statusName:'开灯',longitude:113.493842, latitude:22.294010},
{lampCode:'193',status:'1',statusName:'开灯',longitude:113.493875, latitude:22.294063},
{lampCode:'191',status:'1',statusName:'开灯',longitude:113.493946, latitude:22.294220},
{lampCode:'190',status:'1',statusName:'开灯',longitude:113.493958, latitude:22.294215},
{lampCode:'111',status:'1',statusName:'开灯',longitude:113.494131, latitude:22.294141},
{lampCode:'180',status:'1',statusName:'开灯',longitude:113.494298, latitude:22.294868},
{lampCode:'168',status:'1',statusName:'开灯',longitude:113.494994, latitude:22.295536},
{lampCode:'010',status:'1',statusName:'开灯',longitude:113.492150, latitude:22.292576},
{lampCode:'073',status:'1',statusName:'开灯',longitude:113.492441, latitude:22.292563},
{lampCode:'014',status:'1',statusName:'开灯',longitude:113.492525, latitude:22.292780},
{lampCode:'064',status:'1',statusName:'开灯',longitude:113.492823, latitude:22.292770},
{lampCode:'023',status:'1',statusName:'开灯',longitude:113.492894, latitude:22.292988},
{lampCode:'056',status:'1',statusName:'开灯',longitude:113.493197, latitude:22.292972},
{lampCode:'031',status:'1',statusName:'开灯',longitude:113.493247, latitude:22.293217},
{lampCode:'049',status:'1',statusName:'开灯',longitude:113.493556, latitude:22.293246},
{lampCode:'192',status:'1',statusName:'开灯',longitude:113.493918, latitude:22.294116},
{lampCode:'187',status:'1',statusName:'开灯',longitude:113.494098, latitude:22.294449},
{lampCode:'117',status:'1',statusName:'开灯',longitude:113.494179, latitude:22.294232},
{lampCode:'182',status:'1',statusName:'开灯',longitude:113.494271, latitude:22.294803},
{lampCode:'125',status:'1',statusName:'开灯',longitude:113.494354, latitude:22.294566},
{lampCode:'173',status:'1',statusName:'开灯',longitude:113.494500, latitude:22.295114},
{lampCode:'137',status:'1',statusName:'开灯',longitude:113.494550, latitude:22.294879},
{lampCode:'149',status:'1',statusName:'开灯',longitude:113.494799, latitude:22.295161},
{lampCode:'170',status:'1',statusName:'开灯',longitude:113.494816, latitude:22.295402},
{lampCode:'161',status:'1',statusName:'开灯',longitude:113.495120, latitude:22.295411},
{lampCode:'099',status:'1',statusName:'开灯',longitude:113.494029, latitude:22.293954},
{lampCode:'032',status:'1',statusName:'开灯',longitude:113.493516, latitude:22.293405},
{lampCode:'002',status:'1',statusName:'开灯',longitude:113.491848, latitude:22.292374},
{lampCode:'009',status:'1',statusName:'开灯',longitude:113.492120, latitude:22.292626},
{lampCode:'011',status:'1',statusName:'开灯',longitude:113.492175, latitude:22.292562},
{lampCode:'084',status:'1',statusName:'开灯',longitude:113.492304, latitude:22.292422},
{lampCode:'013',status:'1',statusName:'开灯',longitude:113.492454, latitude:22.292711},
{lampCode:'018',status:'1',statusName:'开灯',longitude:113.492756, latitude:22.292874},
{lampCode:'020',status:'1',statusName:'开灯',longitude:113.493036, latitude:22.293028},
{lampCode:'224',status:'1',statusName:'开灯',longitude:113.493216, latitude:22.293258},
{lampCode:'212',status:'1',statusName:'开灯',longitude:113.493293, latitude:22.293209},
{lampCode:'096',status:'1',statusName:'开灯',longitude:113.493463, latitude:22.293087},
{lampCode:'221',status:'1',statusName:'开灯',longitude:113.493942, latitude:22.294279},
{lampCode:'189',status:'1',statusName:'开灯',longitude:113.494034, latitude:22.294264},
{lampCode:'186',status:'1',statusName:'开灯',longitude:113.494165, latitude:22.294518},
{lampCode:'114',status:'1',statusName:'开灯',longitude:113.494238, latitude:22.294205},
{lampCode:'184',status:'1',statusName:'开灯',longitude:113.494285, latitude:22.294766},
{lampCode:'177',status:'1',statusName:'开灯',longitude:113.494451, latitude:22.295006},
{lampCode:'220',status:'1',statusName:'开灯',longitude:113.494579, latitude:22.295272},
{lampCode:'172',status:'1',statusName:'开灯',longitude:113.494676, latitude:22.295245},
{lampCode:'146',status:'1',statusName:'开灯',longitude:113.494863, latitude:22.295128},
{lampCode:'169',status:'1',statusName:'开灯',longitude:113.494959, latitude:22.295467},
{lampCode:'166',status:'1',statusName:'开灯',longitude:113.495110, latitude:22.295570},
{lampCode:'008',status:'1',statusName:'开灯',longitude:113.492131, latitude:22.292568},
{lampCode:'017',status:'1',statusName:'开灯',longitude:113.492693, latitude:22.292876},
{lampCode:'054',status:'1',statusName:'开灯',longitude:113.493221, latitude:22.292987},
{lampCode:'028',status:'1',statusName:'开灯',longitude:113.493383, latitude:22.293334},
{lampCode:'112',status:'1',statusName:'开灯',longitude:113.494127, latitude:22.294138},
{lampCode:'216',status:'1',statusName:'开灯',longitude:113.494308, latitude:22.294866},
{lampCode:'093',status:'1',statusName:'开灯',longitude:113.491951, latitude:22.292284},
{lampCode:'211',status:'1',statusName:'开灯',longitude:113.493902, latitude:22.294016},
{lampCode:'001',status:'1',statusName:'开灯',longitude:113.491841, latitude:22.292448},
{lampCode:'083',status:'1',statusName:'开灯',longitude:113.492230, latitude:22.292481},
{lampCode:'202',status:'1',statusName:'开灯',longitude:113.492312, latitude:22.292722},
{lampCode:'072',status:'1',statusName:'开灯',longitude:113.492432, latitude:22.292590},
{lampCode:'071',status:'1',statusName:'开灯',longitude:113.492493, latitude:22.292523},
{lampCode:'068',status:'1',statusName:'开灯',longitude:113.492672, latitude:22.292716},
{lampCode:'061',status:'1',statusName:'开灯',longitude:113.492960, latitude:22.292874},
{lampCode:'053',status:'1',statusName:'开灯',longitude:113.493239, latitude:22.293027},
{lampCode:'223',status:'1',statusName:'开灯',longitude:113.493286, latitude:22.293323},
{lampCode:'044',status:'1',statusName:'开灯',longitude:113.493483, latitude:22.293216},
{lampCode:'098',status:'1',statusName:'开灯',longitude:113.493558, latitude:22.293159},
{lampCode:'038',status:'1',statusName:'开灯',longitude:113.493591, latitude:22.293324},
{lampCode:'222',status:'1',statusName:'开灯',longitude:113.493962, latitude:22.294315},
{lampCode:'100',status:'1',statusName:'开灯',longitude:113.494018, latitude:22.293983},
{lampCode:'119',status:'1',statusName:'开灯',longitude:113.494169, latitude:22.294269},
{lampCode:'115',status:'1',statusName:'开灯',longitude:113.494261, latitude:22.294239},
{lampCode:'209',status:'1',statusName:'开灯',longitude:113.494289, latitude:22.294501},
{lampCode:'210',status:'1',statusName:'开灯',longitude:113.494422, latitude:22.294751},
{lampCode:'176',status:'1',statusName:'开灯',longitude:113.494435, latitude:22.295040},
{lampCode:'218',status:'1',statusName:'开灯',longitude:113.494436, latitude:22.295040},
{lampCode:'141',status:'1',statusName:'开灯',longitude:113.494591, latitude:22.294990},
{lampCode:'219',status:'1',statusName:'开灯',longitude:113.494603, latitude:22.295304},
{lampCode:'148',status:'1',statusName:'开灯',longitude:113.494796, latitude:22.295203},
{lampCode:'145',status:'1',statusName:'开灯',longitude:113.494876, latitude:22.295151},
{lampCode:'159',status:'1',statusName:'开灯',longitude:113.495046, latitude:22.295394},
{lampCode:'165',status:'1',statusName:'开灯',longitude:113.495197, latitude:22.295499},
{lampCode:'091',status:'1',statusName:'开灯',longitude:113.491966, latitude:22.292329},
{lampCode:'198',status:'1',statusName:'开灯',longitude:113.491984, latitude:22.292503}
// {lampCode:'412021041201', status:'1', statusName:'开灯', latitude:22.294056 , longitude:113.488988, position:'105国道'},
// {lampCode:'412021041202', status:'1', statusName:'开灯', latitude:22.294256 , longitude:113.489450, position:'105国道'},
// {lampCode:'112021041234', status:'1', statusName:'开灯', latitude:22.294390 , longitude:113.489350, position:'105国道'},
// {lampCode:'412021041203', status:'1', statusName:'开灯', latitude:22.294299 , longitude:113.488800, position:'105国道'},
// {lampCode:'512021041234', status:'1', statusName:'开灯', latitude:22.294956 , longitude:113.488930, position:'105国道'},
// {lampCode:'412021041204', status:'1', statusName:'开灯', latitude:22.294556 , longitude:113.488580, position:'105国道'},
// {lampCode:'612021041234', status:'1', statusName:'开灯', latitude:22.292756 , longitude:113.490100, position:'105国道'},
]
this.setZoom(rows)
this.onLampList = rows.filter(item => item.status === '1') // 开灯
this.offLampList = rows.filter(item => item.status === '2') // 关灯
this.alarmLampList = rows.filter(item => item.status === '3') // 报警
this.offlineLampList = rows.filter(item => item.status === '4') // 离线
this.addPointOnMap(this.onLampList, this.onLampLayer, onLampIcon)
this.addPointOnMap(this.offLampList, this.offLampLayer, offLampIcon)
this.addPointOnMap(this.alarmLampList, this.alarmLampLayer, alarmLampIcon)
this.addPointOnMap(this.offlineLampList, this.offlineLampLayer, offlineLampIcon)
},
// 将点加到地图上
addPointOnMap(dataList, layer, iconType) {
const {iconSize, iconAnchor, popupAnchor} = this
layer.clearLayers()
// 图标
const icon = Leaflet.icon({
iconUrl: iconType,
iconSize: iconSize,
iconAnchor: iconAnchor,
popupAnchor: popupAnchor
})
dataList.forEach(item => {
let popupStr = '<div class="popup-div">' +
'<div class="popup-title">路灯详情</div>' +
'<div class="dashed-line"></div>' +
'<div class="popup-item"><label>编号</label>' + item.lampCode + '</div>' +
// '<div class="popup-item"><label>名称</label>' + item.lampName + '</div>' +
'<div class="popup-item"><label>状态</label>' + item.statusName + '</div>'
// '<div class="popup-item"><label>地址</label>' + item.streetName + item.address + '</div>'
// '<div class="popup-button" id="real-video">查看实时监控</div>'
popupStr += '</div>'
const popup = Leaflet.popup().setContent(popupStr)
if (item.longitude > 0 && item.latitude > 0) {
// 添加marker
Leaflet.marker([item.latitude, item.longitude], { icon: icon, id: item.lampId }).addTo(layer).bindPopup(popup)
}
})
},
setZoom (points) {
if (points.length > 0) {
// 计算边界
const { maxLng, minLng, maxLat, minLat } = getPathBounds(points,'longitude','latitude')
// 计算中心点
const { cenLat, cenLng } = getCenterByBounds({ maxLng, minLng, maxLat, minLat })
// 计算缩放
const zoom = getZoomByBounds({ maxLng, minLng, maxLat, minLat })
console.log({ lat: cenLat, lng: cenLng }, zoom)
this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.video-dialog{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
z-index:1000;
width: 600px;
height: 400px;
background-color: rgba(7,10,23,0.8);
border-radius: 10px;
.max-btn{
position: absolute;
top:20px;
right:60px;
}
.close-btn{
position: absolute;
top:20px;
right:20px;
}
.close-btn:hover{
animation:turn 1s linear infinite;
}
.video-div{
width: 100%;
padding: 0px 20px;
}
}
.max-window{
position: fixed;
top: 0;
left:0;
z-index:1000;
width: 100%;
height: 100%;
background-color: rgba(7,10,23,0.8);
border-radius: 10px;
.max-btn{
position: absolute;
top:20px;
right:60px;
}
.close-btn{
position: absolute;
top:20px;
right:20px;
}
.close-btn:hover{
animation:turn 1s linear infinite;
}
.video-div{
width: 100%;
padding: 0px 20px;
}
}
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
</style>
<style rel="stylesheet/scss" lang="scss" >
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
color: white;
background-color: rgba(10,26,123,0.8);
}
.leaflet-popup-content {
.popup-div {
font-size: 14px;
padding: 5px;
}
.popup-title {
font-weight: bold;
}
.dashed-line {
border-bottom: 1px dashed #dddddd;
margin: 10px -10px;
}
.popup-item {
padding-bottom: 6px;
label {
font-weight: bold;
padding-right: 15px;
}
}
.popup-subitem {
padding-bottom: 6px;
font-size: 12px;
}
.popup-button{
color:#67E0E3;
text-align: center;
margin-top: 5px;
text-decoration: underline;
}
.popup-button:hover{
color: #36b7ff;
cursor: pointer;
}
}
</style>
