<template>
<div>
<div id="map" class="leaflet_container">
<div style="padding-left: 20px;padding-top: 20px">
<el-row class="title">
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('1','','')">{{ status.openCount }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('2','','')">{{ status.closeCount }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('4','','')">{{ status.offlineCount }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('3','','')">{{ status.alarmCount }}</div>
</el-col>
</el-row>
<el-row class="title" style="padding-top: 5px">
<el-col :span="1">
<div class="icon-green"/>
</el-col>
<el-col :span="5">
<div class="titletext">开灯</div>
</el-col>
<el-col :span="1">
<div class="icon-gray"/>
</el-col>
<el-col :span="5">
<div class="titletext">灭灯</div>
</el-col>
<el-col :span="1">
<div class="icon-blue"/>
</el-col>
<el-col :span="5">
<div class="titletext">离线</div>
</el-col>
<el-col :span="1">
<div class="icon-red"/>
</el-col>
<el-col :span="5">
<div class="titletext">报警</div>
</el-col>
</el-row>
</div>
<div class="btn_bottom" style="margin-bottom: 10px">
<div style="width: 300px;position: relative;margin: 0px auto;text-align: center">
<el-radio-group v-model="bottombtn">
<el-radio-button label="lamp">
<el-image :src="require('../../assets/global_images/lamp-black.png')" fit="contain" class="image" style="width: 35px;height: 35px" @click="getlamp('','','')"/>
<div>路灯</div>
</el-radio-button>
<el-radio-button label="lampbox">
<el-image :src="require('../../assets/global_images/lampbox-black.png')" fit="contain" class="image" style="width: 35px;height: 35px;" @click="getlampbox"/>
<div>灯箱</div>
</el-radio-button>
<el-radio-button label="alarm">
<el-image :src="require('../../assets/global_images/alarm-black.png')" fit="contain" class="image" style="width: 35px;height: 35px;" @click="getalarm"/>
<div>报警</div>
</el-radio-button>
</el-radio-group>
</div>
</div>
</div>
<div class="list">
<div style="text-align: right;margin-right: 10px">
<el-button v-show="showtable" type="primary" size="mini" icon="el-icon-minus" circle @click="tableclick"/>
<el-button v-show="!showtable" type="primary" size="mini" icon="el-icon-plus" circle @click="tableclick"/>
</div>
<div v-show="showtable">
<el-tabs v-model="tab" type="border-card" @tab-click="tabClick">
<el-tab-pane label="路灯列表" name="lamp">
<lamp-tab-pane
:lamp-list="lamplist"
:lamp-query="lampQuery"
:list-loading="listLoading"
:show-list="showList"
@searchLamp="search"
@controlLamp="control(lampIds,'','',controlLamp)"
@rowClick="rowClick"
@changeType="resetLampQuery"/>
</el-tab-pane>
<el-tab-pane label="报警列表" name="alarm">
<div class="tab-block">
<el-row v-if="tab === 'alarm'" class="table-title" style="margin-top: -10px">
<el-col :span="7" style="margin-top:3px;margin-left: 5px">
<el-select v-model="alarmQuery.deviceType" size="small" placeholder="设备类型" filterable clearable>
<el-option v-for="item in deviceTypeList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-col>
<el-col :span="7" style="margin-top:3px;">
<el-select v-model="alarmQuery.alarmType" size="small" placeholder="报警类型" filterable clearable>
<el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-col>
<el-col :span="3" style="margin-top:6px;">
<el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
<el-table-column align="center" type="index" label="序号" width="50"/>
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
<span :class="column.class">{{ scope.row[column.value] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
// import { getAllStreet } from '@/api/street'
import { getLampStatus, getLampList, getlampDetail, getCircuitList, getLampBoxList, getLampBoxDetail, getAlarmList, getAlarmDetail, lampControl } from '@/api/overview'
import LampTabPane from './lampTabPane'
export default {
name: 'Overview',
components: { LampTabPane },
data() {
return {
bottombtn: 'lamp',
listLoading: false, // 加载动画
TianDiTu: {
Normal: {
Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Satellite: {
Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Terrain: {
Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
},
map: null,
tab: 'lamp',
showtable: true,
controlQuery: {
lampIds: [],
circuitId: '',
lampBoxId: '',
controlType: ''
},
columns: [
{
text: '路灯编号',
value: 'lampCode',
align: 'center'
},
{
text: '路灯名称',
value: 'lampName',
align: 'center'
},
{
text: '路灯状态',
value: 'statusName',
align: 'center',
width: 80
}
],
list: [],
multipleSelection: [], // 多选选中项
iconlist: [],
baselayer: [],
lamplist: [], // 路灯（map）
lampboxlist: [], // 灯箱（map）
alarmlist: [], // 报警 （map）
circuitlist: [], // 回路
statusList: [
{ value: '1', name: '开灯' }, { value: '2', name: '灭灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }
],
deviceTypeList: [
{ value: '1', name: '路灯控制器' },
{ value: '2', name: '灯杆' },
{ value: '3', name: '路灯' },
{ value: '4', name: '灯箱' },
{ value: '5', name: '回路' }
],
alarmTypeList: [
{ value: '1', name: '开灯异常' },
{ value: '2', name: '关灯异常' },
{ value: '3', name: '低电流告警' },
{ value: '4', name: '高电流告警' },
{ value: '5', name: '低电压告警' },
{ value: '6', name: '高电压告警' },
{ value: '7', name: '掉电告警' },
{ value: '8', name: '漏电告警' }
],
streetList: [],
status: {
alarmCount: 0,
offlineCount: 0,
closeCount: 0,
openCount: 0
},
lampQuery: {
lampCode: '',
status: '',
lampStreet: '',
lampArea: '',
lampboxCode: '',
lampboxStreet: '',
lampboxArea: '',
circuitCode: ''
},
circuitQuery: {
circuitCode: ''
},
lampboxQuery: {
lampboxCode: '',
streetId: ''
},
alarmQuery: {
deviceType: '',
alarmType: ''
},
showList: false
}
},
mounted() {
this.init()
this.initData()
},
methods: {
// 隐藏或显示左侧列表
tableclick() {
this.showtable = !this.showtable
},
// 点击列表中的行，调整地图视角
rowClick(row) {
if (this.tab === 'lamp') {
for (var i = 0; i < this.iconlist.length; i++) {
if (this.iconlist[i].options.id === row.lampId) {
console.log(this.iconlist[i])
this.map.setView(this.iconlist[i]._latlng, 19)
// this.map.setView({ lat: cenLat, lng: cenLng }, 18)
}
}
} else if (this.tab === 'circuit') {
this.getlamp('', row.id, '')
} else if (this.tab === 'lampbox') {
this.getlamp('', '', row.id)
} else if (this.tab === 'alarm') {
for (i = 0; i < this.iconlist.length; i++) {
if (this.iconlist[i].options.id === row.id) {
console.log(this.iconlist[i])
this.map.setView(this.iconlist[i]._latlng, 17)
// this.map.setView({ lat: cenLat, lng: cenLng }, 18)
}
}
}
},
async search() {
console.log('outQuery', this.lampQuery)
this.listLoading = true
if (this.tab === 'lamp') {
await this.getlamp()
this.showList = true
} else if (this.tab === 'circuit') {
const detail = await getCircuitList(this.circuitQuery)
this.ciulistlist = detail.data
this.list = this.ciulistlist
} else if (this.tab === 'lampbox') {
const detail = await getLampBoxList(this.lampboxQuery)
this.lampboxlist = detail.data
this.list = this.lampboxlist
} else if (this.tab === 'alarm') {
const detail = await getAlarmList(this.alarmQuery)
this.alarmlist = detail.data
this.list = this.alarmlist
}
this.listLoading = false
},
resetLampQuery() {
this.lampQuery = {
lampCode: '',
status: '',
lampStreet: '',
lampArea: '',
lampboxCode: '',
lampboxStreet: '',
lampboxArea: '',
circuitCode: ''
}
},
async tabClick(tab, event) {
this.listLoading = true
if (tab.name === 'lamp') {
this.bottombtn = 'lamp'
this.resetLampQuery()
this.showList = false
this.getlamp('', '', '')
this.lampQuery.status = ''
this.lampQuery.circuitId = ''
this.lampQuery.lampBoxId = ''
const resDetail = await getLampList(this.lampQuery)
this.lamplist = resDetail.data
this.list = this.lamplist
this.columns = [
{
text: '路灯编号',
value: 'lampCode',
align: 'center'
},
{
text: '路灯名称',
value: 'lampName',
align: 'center'
},
{
text: '路灯状态',
value: 'statusName',
align: 'center',
width: 80
}
]
} else if (tab.name === 'circuit') {
const circuitDetail = await getCircuitList()
this.circuitlist = circuitDetail.data
this.list = this.circuitlist
this.columns = [
{
text: '回路编号',
value: 'circuitCode',
align: 'center'
},
{
text: '回路名称',
value: 'circuitName',
align: 'center'
},
{
text: '关联灯箱名称',
value: 'lampboxName',
align: 'center'
}
]
} else if (tab.name === 'lampbox') {
this.bottombtn = 'lampbox'
this.getlampbox()
const lampboxDetail = await getLampBoxList()
this.lampboxlist = lampboxDetail.data
this.list = this.lampboxlist
this.columns = [
{
text: '灯箱编号',
value: 'lampboxCode',
align: 'center'
},
{
text: '灯箱名称',
value: 'lampboxName',
align: 'center'
},
{
text: '道路',
value: 'streetName',
align: 'center'
}, {
text: '地址',
value: 'address',
align: 'center'
}
]
} else if (tab.name === 'alarm') {
this.bottombtn = 'alarm'
this.getalarm()
const alarmDetail = await getAlarmList()
this.alarmlist = alarmDetail.data
this.list = this.alarmlist
this.columns = [
{
text: '报警设备',
value: 'deviceCode',
align: 'center',
width: 130
},
{
text: '设备类型',
value: 'deviceTypeName',
align: 'center'
},
{
text: '报警类型',
value: 'alarmTypeName',
align: 'center'
},
{
text: '报警值',
value: 'alarmValue',
align: 'center',
width: 70
}
]
}
this.listLoading = false
},
async initData() {
const resDetail = await getLampStatus()
this.status = resDetail.data
// const lampDetail = await getLampList(this.lampQuery)
// this.lamplist = lampDetail.data
// this.list = this.lamplist
// const circuitDetail = await getCircuitList()
// this.circuitlist = circuitDetail.data
const lampboxDetail = await getLampBoxList()
this.lampboxlist = lampboxDetail.data
const alarmDetail = await getAlarmList()
this.alarmlist = alarmDetail.data
this.getlamp()
// 获取道路列表
// const streetList = await getAllStreet(null)
// this.streetList = streetList.data
},
removemarkers() {
for (var i = 0; i < this.iconlist.length; i++) {
this.map.removeLayer(this.iconlist[i])
}
var base = this.baselayer
this.map.eachLayer(function(layer) {
if (layer !== base[0] && layer !== base[1]) {
layer.remove()
}
})
},
controlLamp(row, status) {
if (this.tab === 'circuit') {
this.control([], row.id, '', status)
} else if (this.tab === 'lampbox') {
this.control('', '', row.id, status)
} else if (this.tab === 'lamp') {
if (this.multipleSelection.length === 0) {
this.$message.warning('请选择路灯')
} else {
var selectlist = []
for (var i = 0; i < this.multipleSelection.length; i++) {
selectlist.push(this.multipleSelection[i].lampId)
}
this.control(selectlist, '', '', status)
}
// this.control(row, '', '', status)
}
},
async control(lampIds, circuitId, lampBoxId, controlType) {
this.controlQuery.lampIds = lampIds
this.controlQuery.circuitId = circuitId
this.controlQuery.lampBoxId = lampBoxId
this.controlQuery.controlType = controlType
const resDetail = await lampControl(this.controlQuery)
if (resDetail.code === 200) {
this.$message.success(resDetail.message)
} else {
this.$message.error(resDetail.message)
}
},
async getlamp(status, circuitId, lampBoxId) {
this.removemarkers()
// this.lampQuery.status = status
// this.lampQuery.circuitId = circuitId
// this.lampQuery.lampBoxId = lampBoxId
console.log('getLamp', this.lampQuery)
const resDetail = await getLampList(this.lampQuery)
this.lamplist = resDetail.data
if (this.lamplist.length === 0) {
return
}
var Icon
var poslist = []
this.iconlist = []
for (var i = 0; i < this.lamplist.length; i++) {
if (this.lamplist[i].status === '1') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-green.png'),
iconSize: [15, 15]
})
} else if (this.lamplist[i].status === '2') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-gray.png'),
iconSize: [15, 15]
})
} else if (this.lamplist[i].status === '4') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-blue.png'),
iconSize: [15, 15]
})
} else if (this.lamplist[i].status === '3') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-red.png'),
iconSize: [15, 15]
})
}
var item = L.marker([this.lamplist[i].latitude, this.lamplist[i].longitude], {
icon: Icon,
id: this.lamplist[i].lampId
}).addTo(this.map)
item.on('click', function(e) {
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
getlampDetail(e.target.options.id).then(response => {
var data = response.data
var str = `<div style="font-size: 14px;padding: 6px">`
// 标题：设备类型（路灯/灯箱）+设备编号+设备状态
str += `<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">` + '路灯' + data.lampCode
if (data.statusName) {
str += `——` + data.statusName
}
str += `</div>`
if (data.groupName) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>` + data.groupName + `</div>`
}
if (data.controllerCode) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>` + data.controllerCode + `</div>`
}
if (data.lamppostCode) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>` + data.lamppostCode + `</div>`
}
if (data.height) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度(m)：</label>` + data.height + `</div>`
}
if (data.latestVol) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">电压(V)：</label>` + data.latestVol + `</div>`
}
if (data.latestElec) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">电流(A)：</label>` + data.latestElec + `</div>`
}
if (data.latestPower) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">功率(W)：</label>` + data.latestPower + `</div>`
}
if (data.latestTime) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>` + data.latestTime + `</div>`
}
if (data.streetName || data.address) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>` + data.streetName + data.address + `</div>`
}
// todo 开关灯按钮
str += `</div>`
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup).openPopup()
e.target.dragging._marker.openPopup()
})
})
this.iconlist.push(item)
var pos = [Number(this.lamplist[i].latitude), Number(this.lamplist[i].longitude)]
poslist.push(pos)
}
if (this.lamplist.length !== 0) {
this.setZoom(poslist)
}
},
async getcircuit() {
const circuitDetail = await getCircuitList()
this.circuitlist = circuitDetail.data
},
async getlampbox() {
this.removemarkers()
const lampboxDetail = await getLampBoxList()
this.lampboxlist = lampboxDetail.data
var poslist = []
this.iconlist = []
for (var i = 0; i < this.lampboxlist.length; i++) {
var Icon = L.icon({
iconUrl: require('../../assets/global_images/lampbox-black.png'),
iconSize: [15, 15]
})
var item = L.marker([this.lampboxlist[i].latitude, this.lampboxlist[i].longitude], {
icon: Icon,
id: this.lampboxlist[i].id
}).addTo(this.map)
item.on('click', function(e) {
console.log(e.target.options)
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
getLampBoxDetail(e.target.options.id).then(response => {
var data = response.data
console.log(response.data)
var str = `<div style="font-size: 14px;padding: 6px">`
// 标题：设备类型（路灯/灯箱）+设备编号
str += `<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">` + '灯箱' + data.lampboxCode + `</div>`
if (data.lampboxName) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>` + data.lampboxName + `</div>`
}
if (data.elecA || data.elecB || data.elecC) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>` + data.elecA + `/` + data.elecB + `/` + data.elecC + `</div>`
}
if (data.volA || data.volB || data.volC) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>` + data.volA + `/` + data.volB + `/` + data.volC + `</div>`
}
if (data.powerA || data.powerB || data.powerC) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>` + data.powerA + `/` + data.powerB + `/` + data.powerC + `</div>`
}
if (data.latestTime) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>` + data.latestTime + `</div>`
}
if (data.streetName || data.address) {
str += `<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>` + data.streetName + data.address + `</div>`
}
str += `</div>`
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup).openPopup()
e.target.dragging._marker.openPopup()
})
})
this.iconlist.push(item)
var pos = [Number(this.lampboxlist[i].latitude), Number(this.lampboxlist[i].longitude)]
poslist.push(pos)
}
if (poslist.length !== 0) {
this.setZoom(poslist)
}
},
async getalarm() {
this.removemarkers()
const alarmDetail = await getAlarmList()
this.alarmlist = alarmDetail.data
var poslist = []
this.iconlist = []
for (var i = 0; i < this.alarmlist.length; i++) {
var Icon = L.icon({
iconUrl: require('../../assets/global_images/alarm-red.png'),
iconSize: [15, 15]
})
var item = L.marker([this.alarmlist[i].latitude, this.alarmlist[i].longitude], {
icon: Icon,
id: this.alarmlist[i].id
}).addTo(this.map)
item.on('click', function(e) {
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
getAlarmDetail(e.target.options.id).then(response => {
var data = response.data
var str = '<div style="font-size: 14px;padding: 6px"> ' +
'<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">报警详情信息</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备编号：</label>' + data.deviceCode + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备名称：</label>' + data.deviceName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备类型：</label>' + data.deviceTypeName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警类型：</label>' + data.alarmTypeName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警原因：</label>' + data.alarmReason + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警数值：</label>' + data.alarmValue + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警时间：</label>' + data.alarmTime + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">电流(A)：</label>' + data.electricity + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">电压(V)：</label>' + data.voltage + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">功率(W)：</label>' + data.power + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
'</div>'
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup).openPopup()
e.target.dragging._marker.openPopup()
})
})
this.iconlist.push(item)
var pos = [Number(this.alarmlist[i].latitude), Number(this.alarmlist[i].longitude)]
poslist.push(pos)
}
if (poslist.length !== 0) {
this.setZoom(poslist)
}
},
setZoom(points) {
if (points.length > 0) {
var maxLng = points[0][1]
var minLng = points[0][1]
var maxLat = points[0][0]
var minLat = points[0][0]
var res
for (var i = points.length - 1; i >= 0; i--) {
res = points[i]
if (res[1] > maxLng) maxLng = res[1]
if (res[1] < minLng) minLng = res[1]
if (res[0] > maxLat) maxLat = res[0]
if (res[0] < minLat) minLat = res[0]
}
var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
} else {
// 没有坐标，显示全中国
this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
}
},
getZoom(maxLng, minLng, maxLat, minLat) {
var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
var latlng = L.latLng(maxLat, maxLng)
var distance = latlng.distanceTo(L.latLng(minLat, minLng))
// var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
if (zoom[i] - distance > 0) {
return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
}
return 5
},
// 初始化地图
init() {
const map = L.map('map', {
minZoom: 2,
maxZoom: 18,
center: [27.75962, 116.06021],
zoom: 15,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857
})
map.doubleClickZoom.disable()
this.map = map // data上需要挂载
window.map = map
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
},
// 多选触发方法
handleSelectionChange(val) {
this.multipleSelection = val
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$tableTitleHeight:48px;
.leaflet_container{
width: 100%;
height: 90vh;
}
.title{
height: 40px;
width: 280px;
padding-top: 10px;
padding-left: 5px;
z-index: 100000;
background-color: rgba(255, 255, 255, 0.91);
}
.titletext{
text-align: center;
font-size: 15px;
}
.titlenumtext{
text-align: center;
font-size: 19px;
}
.icon-red {
width: 10px;
height: 10px;
background-color: #d0021b;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.icon-green {
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 10px;
background-color: #00b238;
border-radius: 50%;
}
.icon-gray {
width: 10px;
height: 10px;
margin-left: 10px;
background-color: #8e8e93;
margin-top: 5px;
border-radius: 50%;
}
.icon-blue {
width: 10px;
height: 10px;
background-color: #8eb4f6;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.list{
text-align:center;
width: 500px;
height: 40px;
z-index: 10000;
position: absolute;
right:20px;
top:20px;
}
.btn_bottom{
text-align:center;
width: 100%;
height:70px;
z-index: 1000;
position: fixed; bottom: 0; left: 0;right:0;
}
.table-name{
position:relative;
width: 100px;
top:20px;
margin:-10px auto; //外面的div高度的一半
z-index: 100001;
}
.table-title{
background-color:rgba(243, 243, 243, 1);
height: $tableTitleHeight;
.title-header{
line-height:$tableTitleHeight;
color: #606266;
font-size: 15px;
i{
margin-left: 5px;
margin-right: 5px;
}
}
}
</style>
