<template>
<div id="centerDiv" class="mapcontainer">
<!--时钟-->
<clock/>
<!--天气-->
<weather/>
<!--选择区-->
<select-all/>
<!--统计结果显示-->
<div class="label-div">
<div class="label">
全省高后果区
</div>
<div class="value">
77
</div>
</div>
<!--地图-->
<Map :url="configUrl" @onload="onMapload" />
<!--遮罩-->
<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'
export default {
name: 'Index',
components: {
SelectAll,
Weather,
Clock,
Map
},
data() {
return {
map: null, // 地图
configUrl: 'static/config/config.json',
alpha: 100, // 透明度
underground: null, // ？
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': '临汾管理处' }
],
highSequence: [
{ 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 }
],
stationLayer: null, // 管理站图层
hqaLayer: 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.addPipe()
// 创建entity图层
const graphicLayer = new this.mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
this.addHighConsequenceArea()
// 添加管理处
this.addStation(graphicLayer)
// this.addLine()
// this.addProvinceWall(graphicLayer)
// this.addProvinceLine(graphicLayer)
// 开启炫光
// var bloomEffect = new this.mars3d.effect.BloomEffect()
// map.addEffect(bloomEffect)
// this.addGraphic_05(graphicLayer)
},
// 高后果区热力图
addHighConsequenceArea() {
const { mars3d } = this
const hqaLayer = new mars3d.layer.HeatLayer({
positions: this.highSequence.map(item => {
return { lng: item.x, lat: item.y, value: item.count }
}),
heatStyle: {
radius: 50, // 半径
blur: 0.85 // 模糊因子
},
// 以下为矩形矢量对象的样式参数
style: {
opacity: 1.0,
clampToGround: true
},
redrawZoom: true,
flyTo: false
})
this.hqaLayer = hqaLayer
this.map.addLayer(hqaLayer)
},
// 管理处
addStation(graphicLayer) {
const { mars3d } = this
const stationLayer = new mars3d.layer.ModelLayer({
name: '管理处',
url: './static/gltf/house02.gltf',
// url: './static/gltf/qwe.gltf',
style: {
scale: 10,
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)
// for (const station of this.manageStations) {
// console.log(station.name)
// var primitive = new mars3d.graphic.ModelPrimitive({
// position: [station.x, station.y, station.z],
// style: {
// url: './static/gltf/house02.gltf',
// scale: 10, // 比例
// minimumPixelSize: 50, // 最近像素大小，不考虑缩放
// heading: 0,
// label: {
// text: station.name,
// font_size: 18,
// color: '#ffffff',
// pixelOffsetY: -50,
// distanceDisplayCondition: true,
// distanceDisplayCondition_far: 500000,
// distanceDisplayCondition_near: 0
// }
// }
// })
// graphicLayer.addGraphic(primitive)
// }
},
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]
debugger
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)
}
})
},
// 自定义的弹窗
addGraphic_05(graphicLayer) {
const { Cesium, mars3d } = this
var graphic = new mars3d.graphic.DivGraphic({
position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100),
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">燃气管线</div>
<div class="label-content">
<div class="data-li">
<div class="data-label">管径：</div>
<div class="data-value"><span class="label-num">1200</span><span class="label-unit">mm</span>
</div>
</div>
<div class="data-li">
<div class="data-label">材质：</div>
<div class="data-value"><span class="label-num">3pe</span>
</div>
</div>
<div class="data-li">
<div class="data-label">压力等级：</div>
<div class="data-value"><span class="label-num">中</span>
</div>
</div>
<div class="data-li">
<div class="data-label">铺设年代：</div>
<div class="data-value"><span class="label-num">2000</span><span class="label-unit">年</span>
</div>
</div>
<!--<div class="data-li">-->
<!--<div class="data-label">出水阀门：</div>-->
<!--<div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span-->
<!--class="label-tag data-value-status-2" alt="打开状态">2号</span></div>-->
<!--</div>-->
</div>
</div>
</div>
<div class="b-t-l"></div>
<div class="b-b-r"></div>
</div>
<div class="arrow" ></div>
</div>`,
// anchor: [0, 0],
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示
scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
})
graphicLayer.addGraphic(graphic)
graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.label-div{
position: absolute;
top: 6rem;
left:30rem;
z-index:100;
color: white;
.label{
margin-bottom: 1rem;
font-size:1.5rem;
}
.value{
font-family: DS-DigitalBold;
font-size:3rem;
}
}
</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>
