<!--
* @Description: 储量专题
* @Author: 王晓颖
* @Date: 2021-04-08
-->
<template>
<layout-map>
<!--选择区-->
<!--<select-all-storage @change="selectChange" />-->
<!--统计结果显示-->
<!--<div class="label-container">-->
<!--<div class="label-div">-->
<!--<div class="label">-->
<!--{{ liquidFactoryData.name | liquidNameFilter }}-->
<!--</div>-->
<!--<div class="value">-->
<!--{{ liquidFactoryData.value }}-->
<!--</div>-->
<!--</div>-->
<!--<div class="label-div">-->
<!--<div class="label">-->
<!--{{ gasStationData.name | gasNameFilter }}-->
<!--</div>-->
<!--<div class="value">-->
<!--{{ gasStationData.value }}-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--地图-->
<Map :url="configUrl" @onload="onMapload" />
<div class="map-btn-group">
<select-button :select="factoryStorageShow" name="液化工厂储量" icon="icon-liquidFactory" @click="showFactoryStorage(factoryStorageShow)"/>
<select-button :select="stationStorageShow" name="加气站储量" icon="icon-gasStation" @click="showStationStorage(stationStorageShow)"/>
<select-button :select="factoryShow" name="液化工厂加气站分布" icon="icon-position" @click="showPosition(factoryShow)"/>
</div>
<!--遮罩-->
</layout-map>
</template>
<script>
import 'mars3d-echarts'
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import axios from 'axios'
import SelectAllStorage from './components/selectAllStorage'
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '@/layout/layoutMap'
import { getIndex } from '@/utils/mathUtils'
export default {
name: 'StorageTopic',
components: {
LayoutMap,
SelectAllStorage,
Map,
SelectButton
},
filters: {
liquidNameFilter(val) {
return val + '液化工厂'
},
gasNameFilter(val) {
return val + '加气站'
}
},
data() {
return {
map: null, // 地图
configUrl: 'static/config/config.json',
alpha: 100, // 透明度
underground: null, // ？
storageIndex: null, // 储量放大倍数
factoryShow: false, // 显示液化工厂
// gasStationShow: false, // 显示加气站
factoryStorageShow: true, // 液化工厂储量
stationStorageShow: false, // 加气站储量
liquidFactoryData: {
name: '全部',
value: 196
},
gasStationData: {
name: '全部',
value: 196
}, // 统计版展示数据
liquidFactory: [], // 液化工厂数据
gasStation: [], // 加气站
factoryStorageLayer: null, // 液化工厂分布图层
stationStorageLayer: null, // 加气站存储层
factoryModelLayer: null, // 液化工厂模型层
stationModelLayer: null, // 加气站模型层
factoryLineLayer: null, // 飞线层
pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
colorList: ['#d75111', '#d75111', '#d75111', '#fcaf17', '#fcaf17', '#fcaf17', '#4fffc3', '#4fffc3', '#4fffc3', '#39c53d', '#39c53d'],
graphicLayer: null, // 管理站标签图层
timer: null, // 定时器, 刷新数据的
tooltipTimer: null, // 定时器，弹出tooltip的
clock: 120 // 间隔时间
}
},
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.addFactoryStorage()
this.refreshData()
},
// 液化工厂储量效果图
addFactoryStorage() {
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
// 获取液化工厂数据
this.liquidFactory = res.data[0].data
this.liquidFactoryData.value = res.data[0].total
// 加气站数据
this.gasStation = res.data[1].data
this.gasStationData.value = res.data[1].total
if (this.storageIndex == null) {
this.storageIndex = getIndex(this.liquidFactory.map(item => item.liquid_level))
console.log('storageIndex', this.storageIndex)
}
// 添加点位
this.addFeatures(this.liquidFactory, 'liquidFactory')
// this.addFeatures(this.gasStation, 'gasStation')
// this.addFactoryPosition()
}
})
},
// 液化工厂三维模型
addFactoryModel() {
const { mars3d } = this
const factoryModelLayer = new mars3d.layer.ModelLayer({
name: '液化工厂',
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
heading: 0,
minimumPixelSize: 30,
clampToGround: true
},
positions: this.liquidFactory.map(item => {
return { lng: parseFloat(item.value[0]), lat: parseFloat(item.value[1]), alt: 0 }
})
})
this.factoryModelLayer = factoryModelLayer
this.map.addLayer(factoryModelLayer)
},
addStationModel() {
const { mars3d } = this
const stationModelLayer = new mars3d.layer.ModelLayer({
name: '加气站',
url: 'static/gltf/output/jiaqizhan.gltf',
style: {
scale: 10,
heading: 0,
minimumPixelSize: 30,
clampToGround: true
},
positions: this.gasStation.map(item => {
return { lng: parseFloat(item.value[0]), lat: parseFloat(item.value[1]), alt: 0 }
})
})
this.stationModelLayer = stationModelLayer
this.map.addLayer(stationModelLayer)
},
// 液化工厂和加气站位置飞线
addFactoryPosition() {
this.addFactoryModel() // 添加液化工厂三维模型
// this.addStationModel() // 添加加气站三维模型
const lineColor = ['#f6fb05', '#f6fb05', '#00fcff']
// 城市点位图标
const symbol1 = 'image://static/images/map/symbol2.png'
const symbol2 = 'image://static/images/map/symbol1.png'
// 线上的动态运动点图标
var pointSymbol = 'image://static/images/map/linePoint1.png'
// 工厂加symbol
const factorys = this.liquidFactory.map(item => {
return { ...item, symbol: symbol1 }
})
// 加气站加symbol
const stations = this.gasStation.map(item => {
return { ...item, symbol: symbol2 }
})
// 遍历获取关联关系
const lineArr = []
for (const station of stations) {
if (station.belong && station.value[0] !== '0') {
for (const factory of factorys) {
if (station.belong === factory.name && factory.value[0] !== '0') {
lineArr.push([
{ coord: [parseFloat(factory.value[0]), parseFloat(factory.value[1])] },
{ coord: [parseFloat(station.value[0]), parseFloat(station.value[1])] }
])
break
}
}
}
}
const curveness = 0.5
var seriesZero = [
{
type: 'effectScatter',
layout: 'none',
coordinateSystem: 'GLMap',
symbolSize: [20, 20],
symbolOffset: [0, -10],
zlevel: 3,
circular: {
rotateLabel: true
},
itemStyle: {
normal: {
shadowColor: 'none'
}
},
data: factorys
}
]
var seriesOne = [
{
type: 'effectScatter',
layout: 'none',
coordinateSystem: 'GLMap',
symbolSize: [16, 16],
symbolOffset: [0, -8],
zlevel: 3,
circular: {
rotateLabel: true
},
// label: {
// normal: {
// show: true,
// position: 'bottom',
// formatter: '{b}',
// fontSize: 12,
// color: '#fff',
// textBorderColor: '#2aa4e8',
// offset: [0, 20]
// }
// },
itemStyle: {
normal: {
shadowColor: 'none'
}
},
data: stations
}
]
var seriesThree = [
{
name: '',
type: 'lines',
coordinateSystem: 'GLMap',
zlevel: 1,
blendMode: 'lighter',
effect: {
show: true,
smooth: false,
trailLength: 0,
symbol: pointSymbol,
symbolSize: [10, 30],
period: 4
},
lineStyle: {
width: 2,
color: lineColor[0],
curveness: curveness
},
data: lineArr
}
]
var seriesData = [...seriesZero, ...seriesThree]
const option = {
animation: false,
GLMap: {},
series: seriesData
}
var echartsLayer = new this.mars3d.layer.EchartsLayer(option)
this.factoryLineLayer = echartsLayer
this.map.addLayer(echartsLayer)
},
// 添加点位储量柱状图
addFeatures(arr, type) {
const { mars3d, colorList } = this
if (type === 'liquidFactory') {
if (this.factoryStorageLayer) {
this.map.removeLayer(this.factoryStorageLayer)
}
const factoryStorageLayer = new mars3d.layer.GraphicLayer()
this.factoryStorageLayer = factoryStorageLayer
this.map.addLayer(factoryStorageLayer)
for (const item of arr) {
const realData = item.liquid_level
const totalData = item.contain
const position = [parseFloat(item.value[0]), parseFloat(item.value[1])]
const html = `${item['name']}<br/>
<span style="color:#63AEFF">库容：${realData} 吨</span><br/>
<span style="color:#FFB861">储量：${totalData} 吨</span><br/>
<span style="color:#FFB861">液位值：${realData} 米</span>`
const color = colorList[Math.floor(realData / totalData * 10)]
this.addColumn(factoryStorageLayer, position, realData * this.storageIndex, totalData * this.storageIndex, color, html, 6000)
}
} else if (type === 'gasStation') {
if (this.stationStorageLayer) {
this.map.removeLayer(this.stationStorageLayer)
}
const stationStorageLayer = new mars3d.layer.GraphicLayer()
this.stationStorageLayer = stationStorageLayer
this.map.addLayer(stationStorageLayer)
for (const item of arr) {
const realData = item.liquid_level
const totalData = item.contain
const position = [parseFloat(item.value[0]), parseFloat(item.value[1])]
const color = colorList[Math.floor(realData / totalData * 10)]
const html = `${item['name']}<br/>
<span style="color:#63AEFF">库容：${realData} 吨</span><br/>
<span style="color:#FFB861">储量：${totalData} 吨</span><br/>
<span style="color:#FFB861">液位值：${realData} 米</span>`
this.addColumn(stationStorageLayer, position, realData * 1000, totalData * 1000, color, html, 2000, false)
}
}
},
// 添加柱子
addColumn(graphicLayer, position, realData, totalData, color = '#63AEFF', html, radius, showColumn2 = true) {
const { mars3d, Cesium } = this
// 下方实际数据
const p = Cesium.Cartesian3.fromDegrees(position[0], position[1], realData / 2)
const height = realData
var graphic1 = new mars3d.graphic.CylinderEntity({
position: p,
style: {
length: height,
topRadius: radius,
bottomRadius: radius,
opacity: 1,
color: color
}
})
graphic1.bindTooltip(html)
graphicLayer.addGraphic(graphic1)
// 上方空缺白色，表示未空余容量
if (showColumn2) {
const p2 = Cesium.Cartesian3.fromDegrees(position[0], position[1], Math.floor(realData + (totalData - realData) / 2))
const height2 = totalData - realData
var graphic2 = new this.mars3d.graphic.CylinderEntity({
position: p2,
style: {
length: height2,
topRadius: radius,
bottomRadius: radius,
opacity: 0.3,
color: '#edf4ff'
}
})
graphicLayer.addGraphic(graphic2)
graphic2.bindTooltip(html)
}
},
// 添加文字
addText(graphicLayer, data, position, height) {
const { mars3d, Cesium } = this
var primitive = new mars3d.graphic.LabelPrimitive({
position: Cesium.Cartesian3.fromDegrees(position[0], position[1], height),
style: {
text: data,
font_size: 18,
font_family: '楷体',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.fromCssColorString('#00ff00'),
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -20)
}
})
graphicLayer.addGraphic(primitive)
},
// 选框发生变化
selectChange({ area, dept }) {
area = area === '全部' ? '' : area
this.boardData.name = area
},
// 显示工厂
showFactoryStorage(show) {
// 现在正在显示
if (show) { // 移除
this.factoryStorageShow = false
this.map.removeLayer(this.factoryStorageLayer, true)
} else {
this.factoryStorageShow = true
this.addFeatures(this.liquidFactory, 'liquidFactory')
}
},
// 显示加气站
showStationStorage(show) {
debugger
// 现在正在显示
if (show) { // 移除
this.stationStorageShow = false
this.map.removeLayer(this.stationStorageLayer, true)
} else {
this.stationStorageShow = true
this.addFeatures(this.gasStation, 'gasStation')
}
},
// 显示隐患分布
showPosition(show) {
if (show) { // 移除
this.factoryShow = false
this.map.removeLayer(this.factoryModelLayer, true)
// this.map.removeLayer(this.stationModelLayer, true)
this.map.removeLayer(this.factoryLineLayer, true)
} else {
this.factoryShow = true
this.addFactoryPosition()
}
},
// 打开轮询,定时刷新数据
refreshData() {
this.timer = setInterval(() => {
console.log('refreshData')
this.addFactoryStorage()// 刷新液化工厂和加气站数据
}, this.clock * 1000)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.label-container{
position: absolute;
top: 140px;
left:31rem;
z-index:100;
.label-div{
color: white;
padding:1.5rem 2.5rem 1rem 2.5rem;
background-image: url("../../assets/button_images/board-box1.png");
background-size: 100% 100%;
margin-bottom: 20px;
.label{
margin-bottom: 1rem;
font-size:1rem;
}
.value{
font-family: DS-DigitalBold;
font-size:2rem;
}
}
}
.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>
