<!--
* @Description: 巡线专题
* @Author: 王晓颖
* @Date: 2021-04-12
-->
<template>
<layout-map>
<select-route @change="selectChange"/>
<!--统计结果显示-->
<div class="label-div">
<div class="label">
{{ boardData.name }}
</div>
<div class="value">
{{ boardData.value }}
</div>
</div>
<!--地图-->
<Map :url="configUrl" @onload="onMapload" />
<!--地图切换按钮-->
<div class="map-btn-group">
<select-button :select="routeShow" name="巡检人员" icon="icon-people" @click="showRoute(routeShow)"/>
<select-button :select="hcaShow" name="高后果区" icon="icon-heat" @click="showHca(hcaShow)"/>
<select-button :select="constructionThreatShow" name="第三方施工" icon="icon-construction" @click="showConstructionThreat(constructionThreatShow)"/>
<select-button :select="sinkThreatShow" name="塌陷隐患" icon="icon-sink" @click="showSinkThreat(sinkThreatShow)"/>
<select-button :select="waterThreatShow" name="水保隐患" icon="icon-water" @click="showWaterThreat(waterThreatShow)"/>
<select-button :select="stationShow" name="管理处" icon="icon-station" @click="showStation"/>
</div>
<threat-dialog ref="threatDialog"/>
<high-consequence-dialog ref="hcaDialog"/>
</layout-map>
</template>
<script>
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import axios from 'axios'
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '../../layout/layoutMap'
import SelectRoute from './components/selectRoute'
import ThreatDialog from './components/threatDialog'
import HighConsequenceDialog from './components/highConsequenceDialog'
export default {
name: 'WaterThreat',
components: {
HighConsequenceDialog,
ThreatDialog,
SelectRoute,
LayoutMap,
Map,
SelectButton
},
filters: {
},
data() {
return {
map: null, // 地图
configUrl: 'static/config/config.json',
alpha: 100, // 透明度
underground: null, // ？
routeShow: true, // 显示巡检人员
hcaShow: false, // 显示高后果区
stationShow: true, // 显示管理处
waterThreatShow: false, // 显示水保隐患位置
constructionThreatShow: false, // 显示第三方施工位置
sinkThreatShow: false, // 显示塌陷隐患位置
boardData: {
name: '巡检人员',
value: 6
}, // 统计版展示数据
threatLevel: {
'1': 'A级',
'2': 'B级',
'3': 'C级',
'4': '问题'
}, // 隐患等级
manageStations: [
{ 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' },
{ 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' },
{ 'x': 112.929902, 'y': 39.622888, 'z': 0, 'name': '同朔管理处' },
{ 'x': 112.72496, 'y': 38.415485, 'z': 0, 'name': '忻州管理处' },
{ 'x': 113.58249, 'y': 37.851892, 'z': 0, 'name': '阳泉管理处' },
{ 'x': 110.980927, 'y': 35.010828, 'z': 0, 'name': '运城管理处' },
{ 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' },
{ 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' }
],
routeData: [], // 巡检人员数据
highConsequence: [], // 高后果区列表
constructionThreatArea: [], // 第三方施工隐患列表
waterThreatArea: [], // 水保隐患列表
sinkThreatArea: [], // 塌陷列表
stationLayer: null, // 管理站图层
hcaLayer: null, // 高后果区图层
constructionThreatLayer: null, // 第三方施工分布图层
waterThreatLayer: null, // 水保隐患分布图层
sinkThreatLayer: null, // 塌陷隐患分布图层
pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
routeLayer: null // 巡检图层
}
},
methods: {
// 地图构造完成回调
onMapload(map) {
// 以下为演示代码
this.map = map
// 背景透明
this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0)
this.map._viewer.scene.globe.baseColor.alpha = 0
// this.addHcaPosition()
// 添加管理处
this.addStation()
this.addRoute()
// this.addStationDiv()
// 添加水保隐患隐患点
// this.addWaterThreatPosition()
},
// 添加巡线人员位置
addRoute() {
const { mars3d, Cesium } = this
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.routeLayer = graphicLayer
this.map.addLayer(graphicLayer)
graphicLayer.on(mars3d.EventType.click, event => {
console.log('监听layer，单击了矢量对象', event)
})
graphicLayer.bindPopup(event => {
const route = event.graphic.attr
const lastPosition = route.lineTrackingList[0]
const html =
'<div>姓名：' + route.name +
'<br/>所属管理处：' + route['depname'] +
'<br/>电话：' + route['phone'] +
'<br/>站名：' + route['unitname'] +
'<br/>时间：' + lastPosition.locationdate +
'<br/>gps状态：' + lastPosition['gprs'] + '</div>'
return html
})
axios.get('static/config/patrolReal.json').then((res) => {
res = res.data
if (res.code === 200) {
this.routeData = res.data
this.boardData.value = this.routeData.length
for (const route of this.routeData) {
const lastPosition = route.lineTrackingList[0]
const graphic = new mars3d.graphic.DivGraphic({
position: [lastPosition.lon, lastPosition.lat, 10000],
style: {
html: '<img src="static/images/map/pe02.gif" style="width:50px;height:50px;" ></img>',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.CENTER
},
attr: route,
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
})
graphicLayer.addGraphic(graphic)
}
}
})
},
// 高后果区位置
addHcaPosition() {
const { mars3d } = this
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.hcaLayer = graphicLayer
this.map.addLayer(graphicLayer)
graphicLayer.on(mars3d.EventType.click, event => {
console.log('监听layer，单击了矢量对象', event)
this.$refs.hcaDialog.initDialog(event.graphic.attr)
})
axios.get('static/config/highConsequence.json').then((res) => {
res = res.data
if (res.code === 200) {
// 过滤掉经度为null的
this.highConsequence = res.data.filter(item => item['经度'] !== null)
this.addFeatures(graphicLayer, this.highConsequence, 'hca', '#f79a2c')
}
})
},
// 水保隐患位置
addWaterThreatPosition() {
const { mars3d } = this
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.waterThreatLayer = graphicLayer
graphicLayer.on(mars3d.EventType.click, event => {
console.log('监听layer，单击了矢量对象', event)
this.$refs.threatDialog.initDialog(event.graphic.attr)
})
this.map.addLayer(graphicLayer)
axios.get('static/config/waterThreat.json').then((res) => {
res = res.data
if (res.code === 200) {
// 过滤掉经度为null的
this.waterThreatArea = res.data.filter(item => item['经度'] !== null)
this.addFeatures(graphicLayer, this.waterThreatArea, 'waterThreat', '#1ffee6')
}
})
},
// 第三方施工隐患位置
addConstructionThreatPosition() {
const { mars3d } = this
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.constructionThreatLayer = graphicLayer
graphicLayer.on(mars3d.EventType.click, event => {
console.log('监听layer，单击了矢量对象', event)
this.$refs.threatDialog.initDialog(event.graphic.attr)
})
this.map.addLayer(graphicLayer)
axios.get('static/config/threat.json').then((res) => {
res = res.data
if (res.code === 200) {
// 过滤掉经度为null的
this.constructionThreatArea = res.data.filter(item => item['经度'] !== null)
this.addFeatures(graphicLayer, this.constructionThreatArea, 'construction', '#fbfe2d')
}
})
},
// 塌陷隐患位置
addSinkThreatPosition() {
const { mars3d } = this
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.sinkThreatLayer = graphicLayer
this.map.addLayer(graphicLayer)
graphicLayer.on(mars3d.EventType.click, event => {
console.log('监听layer，单击了矢量对象', event)
this.$refs.threatDialog.initDialog(event.graphic.attr)
})
axios.get('static/config/sinkThreat.json').then((res) => {
res = res.data
if (res.code === 200) {
// 过滤掉经度为null的
this.sinkThreatArea = res.data.filter(item => item['经度'] !== null)
this.addFeatures(graphicLayer, this.sinkThreatArea, 'sinkThreat', '#2c06a1')
}
})
},
// 添加隐患点: type类型，arr数组， clr颜色
addFeatures(graphicLayer, arr, type, clr) {
const { mars3d, Cesium } = this
// 创建DIV数据图层\
for (var i = 0, len = arr.length; i < len; i++) {
const item = arr[i]
var jd = item['经度']
var wd = item['纬度']
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(jd, wd, 0),
style: {
html: '<div class="mars3d-animation-point" style="color:' + clr + ';"><p></p></div>',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000) // 按视距距离显示
},
attr: item
})
graphicLayer.addGraphic(graphic)
}
},
// 管理处
addStation() {
const { mars3d } = this
var graphicLayer = new mars3d.layer.GraphicLayer()
this.stationLayer = graphicLayer
this.map.addLayer(graphicLayer)
for (const station of this.manageStations) {
const graphic = new mars3d.graphic.ModelEntity({
name: station.name,
position: [station.x, station.y, 10000],
style: {
url: 'static/gltf/output/guanlizhan.gltf',
scale: 10,
heading: 90,
minimumPixelSize: 30
},
tooltip: station.name
})
graphicLayer.addGraphic(graphic)
}
},
// 选框发生变化
selectChange({ area }) {
debugger
area = area === '全部' ? '' : area
// 查询数据
let count = 0
for (const item of this.routeData) {
let flag = true // 标记是否合格
// 比较区域
if (area && item['depname'] && item['depname'].indexOf(area) === -1) {
flag = false
}
if (flag) {
count++
}
}
this.boardData.value = count
},
// 自定义的弹窗
addStationDiv() {
const { Cesium, mars3d } = this
const graphicLayer = new mars3d.layer.GraphicLayer()
this.graphicLayer = graphicLayer
this.map.addLayer(graphicLayer)
for (const station of this.highConsequenceStation) {
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 10100),
style: {
html: `<div class="divpoint divpoint-theme-29baf1">
<div class="divpoint-wrap">
<div class="area">
<div class="arrow-lt"></div>
<div class="b-t"></div>
<div class="b-r"></div>
<div class="b-b"></div>
<div class="b-l"></div>
<div class="arrow-rb"></div>
<div class="label-wrap">
<div class="title">${station.name}</div>
</div></div></div></div>
`,
// anchor: [0, 0],
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示
scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1),
clampToGround: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
})
graphicLayer.addGraphic(graphic)
graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css
}
},
// 是否显示高后果区
showHca(show) {
// 现在正在显示
if (show) { // 移除
this.hcaShow = false
this.map.removeLayer(this.hcaLayer, true)
} else {
this.hcaShow = true
this.addHcaPosition()
}
},
// 是否显示水保隐患
showWaterThreat(show) {
// 现在正在显示
if (show) { // 移除
this.waterThreatShow = false
this.map.removeLayer(this.waterThreatLayer, true)
} else {
this.waterThreatShow = true
this.addWaterThreatPosition()
}
},
// 是否显示第三方施工
showConstructionThreat(show) {
// 现在正在显示
if (show) { // 移除
this.constructionThreatShow = false
this.map.removeLayer(this.constructionThreatLayer, true)
} else {
this.constructionThreatShow = true
this.addConstructionThreatPosition()
}
},
// 是否显示塌陷
showSinkThreat(show) {
// 现在正在显示
if (show) { // 移除
this.sinkThreatShow = false
this.map.removeLayer(this.sinkThreatLayer, true)
} else {
this.sinkThreatShow = true
this.addSinkThreatPosition()
}
},
// 显示管理处
showStation(show) {
// 现在正在显示
if (show) { // 移除
this.stationShow = false
this.map.removeLayer(this.stationLayer, true)
// this.map.removeLayer(this.graphicLayer, true)
} else {
this.stationShow = true
this.addStation()
// this.addStationDiv()
}
},
showRoute(show) {
if (show) { // 移除
this.routeShow = false
this.map.removeLayer(this.routeLayer, true)
} else {
this.routeShow = true
this.addRoute()
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.label-div{
position: absolute;
top: 140px;
left:31rem;
z-index:100;
color: white;
padding:2rem 3rem 1.5rem 3rem;
background-image: url("../../assets/button_images/board-box1.png");
background-size: 100% 100%;
.label{
margin-bottom: 1rem;
font-size:1.2rem;
}
.value{
font-family: DS-DigitalBold;
font-size:2.5rem;
}
}
.map-btn-group{
position: absolute;
bottom:3rem;
left:50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
</style>
