<!--
* @Description: 塌陷专题
* @Author: 王晓颖
* @Date: 2021-04-09
-->
<template>
<layout-map>
<!--地图-->
<Map :url="configUrl" @onload="onMapload" >
<pipe-layer :show="true"/>
<manage-station-layer ref="manageStation" :show="stationShow"/>
<threat-layer ref="threat" :colorful="true" :show="positionShow" type="sinkThreat" popup-type="popupWindow"/>
</Map>
<div class="map-btn-group">
<!--<select-button :select="heatShow" name="热力图" icon="icon-heat" @click="showHeat(heatShow)"/>-->
<select-button :select="positionShow" name="点位分布" icon="icon-position" @click="showPosition(positionShow)"/>
<select-button :select="stationShow" name="管理处" icon="icon-station" @click="showStation(stationShow)"/>
</div>
</layout-map>
</template>
<script>
import LayoutMap from '@/layout/layoutMap'
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import SelectAllConstruction from './components/selectAllConstruction'
import SelectButton from '@/components/SelectTool/components/selectButton'
import { getTimes } from '@/utils/dateutils'
import ManageStationLayer from '@/components/Map/components/manageStationLayer'
import ThreatLayer from '@/components/Map/components/threatLayer'
import PipeLayer from '@/components/Map/components/pipeLayer'
export default {
name: 'SinkThreat',
components: {
PipeLayer,
ThreatLayer,
ManageStationLayer,
LayoutMap,
SelectAllConstruction,
Map,
SelectButton
},
filters: {
boardNameFilter(val) {
if (val === '全部' || val === '') {
return '全省塌陷'
} else {
return val + '区域塌陷'
}
}
},
data() {
return {
map: null, // 地图
configUrl: 'static/config/config.json',
alpha: 100, // 透明度
underground: null, // ？
heatShow: false, // 显示热力图
stationShow: true, // 显示管理处
positionShow: true, // 显示位置
boardData: {
name: '全部',
value: ''
}, // 统计版展示数据
manageStations: [],
sinkThreatsStation: [],
sinkThreats: [], // 塌陷列表
threatArea: [], // 塌陷隐患列表
stationLayer: null, // 管理站图层
heatLayer: null, // 塌陷热力图
threatLayer: null, // 塌陷分布图层
graphicLayer: 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
},
// 选框发生变化
selectChange({ area, state, time, level }) {
area = area === '全部' ? '' : area
time = time === '全部' ? '' : time
level = level === '全部' ? '' : level
// 解析时间
let beginTime = ''
let endTime = ''
if (time) {
const result = getTimes(time)
beginTime = result.beginDate
endTime = result.endDate
}
this.boardData.name = area
// 查询数据
let count = 0
debugger
for (const hca of this.sinkThreats) {
let flag = true // 标记是否合格
// 比较区域
if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) {
flag = false
}
// 比较时间
if (time) {
const real_date = new Date(hca['识别时间'])
if (real_date && (real_date < beginTime || real_date > endTime)) {
flag = false
}
}
// 比较级别
if (level && hca['隐患等级'] && hca['隐患等级'] === level) {
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.sinkThreatsStation) {
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 class="label-content">
<div class="data-li">
<div class="data-label">塌陷数量：</div>
<div class="data-value"><span class="label-num">${station.count}</span><span class="label-unit">个</span>
</div>
</div>
<div class="data-li">
<div class="data-label">经度：</div>
<div class="data-value"><span class="label-num">${station.x}</span>
</div>
</div>
<div class="data-li">
<div class="data-label">纬度：</div>
<div class="data-value"><span class="label-num">${station.y}</span>
</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
}
},
// 是否显示热力图
showHeat(show) {
// 现在正在显示
if (show) { // 移除
this.heatShow = false
this.map.removeLayer(this.heatLayer, true)
} else {
this.heatShow = true
this.addSinkHeat()
}
},
// 显示管理处
showStation(show) {
this.stationShow = !this.stationShow
},
// 显示隐患分布
showPosition(show) {
this.positionShow = !this.positionShow
}
}
}
</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>
<style rel="stylesheet/scss" lang="scss">
/*整个容器*/
.mapcontainer {
position: relative;
height: 100%;
width: 100%;
background-color: transparent;
/*background-color: #051151;*/
}
/*logo遮罩*/
.mask{
position: fixed;
padding-left:10px;
padding-right:10px;
bottom:0px;
left:0px;
background-color:#000000;
color:#ffffff;
line-height:2
}
</style>
