<template>
<div id="centerDiv" class="mapcontainer">
<!--时钟-->
<clock/>
<!--天气-->
<weather/>
<!--选择区-->
<select-all @change="selectChange" />
<!--统计结果显示-->
<div class="label-div">
<div class="label">
{{ boardData.name | boardNameFilter }}
</div>
<div class="value">
{{ boardData.value }}
</div>
</div>
<!--地图-->
<Map :url="configUrl" @onload="onMapload" />
<div class="map-btn-group">
<select-button :select="heatShow" name="热力图" icon="icon-heat" @click="showHeat"/>
<select-button :select="stationShow" name="管理处" icon="icon-station" @click="showStation"/>
</div>
<!--遮罩-->
<div class="mask">航天二院203所</div>
</div>
</template>
<script>
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import axios from 'axios'
import Weather from '@/components/weather/weather'
import Clock from '@/components/clock/Clock'
import SelectAll from './components/selectAll'
import SelectButton from '@/components/SelectTool/components/selectButton'
import { getTimes } from '@/utils/dateutils'
export default {
name: 'Index',
components: {
SelectAll,
Weather,
Clock,
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: true,
stationShow: true,
boardData: {
name: '全部',
value: 196
}, // 统计版展示数据
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': '临汾管理处' }
],
highConsequenceStation: [
{ x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 },
{ x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 },
{ x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 },
{ x: 112.72496, y: 38.415485, id: 0, name: '忻州管理处', count: 9 },
{ x: 113.58249, y: 37.851892, id: 0, name: '阳泉管理处', count: 21 },
{ x: 110.980927, y: 35.010828, id: 0, name: '运城管理处', count: 21 },
{ x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 },
{ x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 }
],
highConsequence: [],
stationLayer: null, // 管理站图层
hqaLayer: 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
this.addHighConsequenceArea()
// 添加管理处
this.addStation()
this.addStationDiv()
// this.addLine()
// this.addProvinceWall(graphicLayer)
// this.addProvinceLine(graphicLayer)
// this.addGraphic_05(graphicLayer)
},
// 高后果区热力图
addHighConsequenceArea() {
const { mars3d } = this
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.boardData.value = this.highConsequence.length
const hqaLayer = new mars3d.layer.HeatLayer({
positions: this.highConsequence.map(item => {
return { lng: item['经度'], lat: item['纬度'], value: 1 }
}),
heatStyle: {
radius: 30, // 半径
blur: 1 // 模糊因子
},
// 以下为矩形矢量对象的样式参数
style: {
opacity: 0.8,
clampToGround: true
},
redrawZoom: true,
flyTo: false
})
this.hqaLayer = hqaLayer
this.map.addLayer(hqaLayer)
}
})
},
// 管理处
addStation() {
const { mars3d } = this
const stationLayer = new mars3d.layer.ModelLayer({
name: '管理处',
url: './static/gltf/house02.gltf',
// url: './static/gltf/qwe.gltf',
style: {
scale: 20,
heading: 0,
minimumPixelSize: 30,
clampToGround: true
},
positions: this.manageStations.map(item => {
return { lng: item.x, lat: item.y, alt: item.z }
})
})
this.stationLayer = stationLayer
this.map.addLayer(stationLayer)
},
// 选框发生变化
selectChange({ area, people, time, level }) {
area = area === '全部' ? '' : area
time = time === '全部' ? '' : time
level = level === '全部' ? '' : level
// 获取人数范围
let min = 0
let max = 100000
switch (people) {
case '10-100':
min = 10
max = 100
break
case '101-150':
min = 101
max = 150
break
case '151-200':
min = 151
max = 200
break
case '200以上':
min = 200
break
}
// 解析时间
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.highConsequence) {
let flag = true // 标记是否合格
const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数'])
// 比较区域
if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) {
flag = false
}
// 比较人数
if (real_people && (real_people > max || real_people < min)) {
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
},
addProvinceWall(graphicLayer) {
const { mars3d, Cesium } = this
axios.get('static/geojson/140000_single.json').then((res) => {
if (res.status === 200) {
const feature = res.data.features[0]
var coordinates = feature.geometry.coordinates[0]
var graphic = new mars3d.graphic.WallEntity({
positions: coordinates,
style: {
diffHeight: 2000,
// color: '#bdf700',
// opacity: 0.6
material: new mars3d.material.LineFlowMaterialProperty({
image: './static/images/map/fence.png',
color: Cesium.Color.fromCssColorString('#bdf700'),
repeat: new Cesium.Cartesian2(5, 1),
axisY: true, // 方向，true时上下，false左右
speed: 10 // 速度，建议取值范围1-100
})
}
})
graphicLayer.addGraphic(graphic)
}
})
},
addProvinceLine(graphicLayer) {
const { mars3d, Cesium } = this
axios.get('static/geojson/140000_single.json').then((res) => {
if (res.status === 200) {
const feature = res.data.features[0]
const _color1 = Cesium.Color.fromCssColorString('#1fe1ff').withAlpha(0.2)
const _color2 = Cesium.Color.fromCssColorString('#1fe1ff').withAlpha(0.9)
let _color = _color1
setInterval(function() {
_color = _color === _color1 ? _color2 : _color1
}, 500)
var coordinates = feature.geometry.coordinates[0]
const graphic = new mars3d.graphic.PolylineEntity({
positions: coordinates,
style: {
width: 5,
material: new Cesium.ColorMaterialProperty(
new Cesium.CallbackProperty(function(time) {
return _color
}, false)
)
}
})
graphicLayer.addGraphic(graphic)
}
})
},
// 自定义的弹窗
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, 100),
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),
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.hqaLayer, true)
} else {
this.heatShow = true
this.addHighConsequenceArea()
}
},
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()
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.label-div{
position: absolute;
top: 6.5rem;
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>
