<template>
|
<div v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
v-loading.fullscreen.lock="loading">
|
|
<soilWater :legendsDetail="legendData"></soilWater>
|
|
<div id="popup"
|
class="ol-popup"
|
style="width: 72px;"
|
v-show="bigRiverVisible">
|
<a href="#"
|
id="popup-closer"
|
class="ol-popup-closer"></a>
|
<div id="popup-content"
|
class="real-river-box">
|
{{bigRiverRealData != null ? bigRiverRealData.NAME : ''}}
|
</div>
|
</div>
|
|
<div class="soil-time-change">
|
<el-date-picker v-model="tableTime"
|
type="date"
|
placeholder="选择日期"
|
align="right"
|
:picker-options="timePickerOptions"
|
size="small"
|
@change="searchTable">
|
</el-date-picker>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
import { Style, Fill } from 'ol/style.js'
|
import Feature from 'ol/Feature.js'
|
import { Polygon } from 'ol/geom'
|
import Overlay from 'ol/Overlay.js'
|
import ImageStatic from 'ol/source/ImageStatic.js'
|
import Image from 'ol/layer/Image.js'
|
|
import store from '@/store/' // 全局状态
|
import { getSoilList, getSoilPng } from '@/api/soilOrWater/index.js'
|
|
export default {
|
|
data () {
|
return {
|
// 表格事件查询
|
tableTime: new Date().setTime(new Date().getTime() - 3600 * 1000),
|
// 左侧底部时间
|
timePickerOptions: {
|
shortcuts: [
|
{
|
text: '今天',
|
onClick (picker) {
|
picker.$emit('pick', new Date())
|
}
|
},
|
{
|
text: '昨天',
|
onClick (picker) {
|
const date = new Date()
|
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
picker.$emit('pick', date)
|
}
|
},
|
{
|
text: '一周前',
|
onClick (picker) {
|
const date = new Date()
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', date)
|
}
|
}
|
]
|
},
|
layerPng: null,
|
boxShow: false,
|
overlay: null,
|
bigRiverVisible: false,
|
bigRiverRealData: null,
|
// 加载中// 所有图层
|
soilIconLayerOne: store.state.openlayers.soilIconLayerOne,
|
soilIconLayerTwo: store.state.openlayers.soilIconLayerTwo,
|
soilIconLayerThree: store.state.openlayers.soilIconLayerThree,
|
soilIconLayerFour: store.state.openlayers.soilIconLayerFour,
|
map2D: store.state.openlayers.map2D,
|
loading: true,
|
// 图例组件的数据
|
legendData: [
|
{
|
title: '山洪灾害图例',
|
content: [
|
{
|
label: '0-30',
|
type: 'soilIconLayerOne',
|
btnClass: 'btn-one'
|
},
|
{
|
label: '30-48',
|
type: 'soilIconLayerTwo',
|
btnClass: 'btn-two'
|
},
|
{
|
label: '48-60',
|
type: 'soilIconLayerThree',
|
btnClass: 'btn-three'
|
},
|
{
|
label: '60以上',
|
type: 'soilIconLayerFour',
|
btnClass: 'btn-four'
|
}
|
]
|
}
|
]
|
}
|
},
|
created () {
|
this.$parent.leftShowClick(false)
|
},
|
mounted () {
|
this.$parent.resize('0', '0', true, '前期土壤含水量')
|
this.map2D.addLayer(this.soilIconLayerOne)
|
this.map2D.addLayer(this.soilIconLayerTwo)
|
this.map2D.addLayer(this.soilIconLayerThree)
|
this.map2D.addLayer(this.soilIconLayerFour)
|
this.$nextTick(function () {
|
this.map2D.on('singleclick', this.layerClick)
|
})
|
this.bigRiverVisible = false
|
// this.getArcgisData()
|
|
this.getTurData()
|
},
|
methods: {
|
// 数据表查询事件
|
searchTable () {
|
if (this.tableTime.length == 0) return
|
|
this.getTurData()
|
},
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? '0' + s : s
|
},
|
getTurData () {
|
var that = this
|
|
if (that.tableTime.length == 0) {
|
that.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
|
const startTime = new Date(that.tableTime)
|
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
that.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
that.disposeTime(startTime.getDate())
|
|
getSoilPng({ time: start }).then(res => {
|
if (this.layerPng != null) {
|
this.map2D.removeLayer(this.layerPng)
|
}
|
|
var extent = [114.7, 25.5, 117.7, 28.5]
|
|
var img = 'img/' + res.data.data.url
|
|
this.layerPng = new Image({
|
zIndex: 6,
|
opacity: 1,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: img,
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
})
|
|
this.map2D.addLayer(this.layerPng)
|
|
setTimeout(() => {
|
this.loading = false
|
}, 2000)
|
})
|
},
|
boxResize (val) {
|
this.boxShow = val
|
},
|
getArcgisData () {
|
var that = this
|
|
that.soilIconLayerOne.getSource().clear()
|
that.soilIconLayerTwo.getSource().clear()
|
that.soilIconLayerThree.getSource().clear()
|
that.soilIconLayerFour.getSource().clear()
|
|
getSoilList().then(res => {
|
var arr = []
|
|
for (var key in res.data.data[0].listx) {
|
if (key != '') {
|
var a = 0
|
|
res.data.data[0].listx[key].forEach(item => {
|
if (item.soilv > a) {
|
a = item.soilv
|
}
|
})
|
|
var obj = {}
|
|
obj[key] = a
|
|
arr.push(obj)
|
}
|
}
|
|
for (var keyt in res.data.data[0].listz) {
|
if (keyt != '') {
|
var b = 0
|
|
res.data.data[0].listz[keyt].forEach(item => {
|
if (item.soilv > b) {
|
b = item.soilv
|
}
|
})
|
|
var objt = {}
|
|
objt[keyt] = b
|
|
arr.push(objt)
|
}
|
}
|
|
axios.get('http://59.55.128.156:6080/arcgis/rest/services/fuzhouxzq/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => {
|
resultData.data.features.forEach((item, index) => {
|
if (item.attributes.NAME != '') {
|
arr.forEach(it => {
|
if (String(it[item.attributes.NAME])) {
|
var a = it[item.attributes.NAME]
|
if (a >= 0 && a < 30) {
|
that.addPolygon(item, 'soilIconLayerOne', '#3399ff')
|
} else if (a >= 30 && a < 48) {
|
that.addPolygon(item, 'soilIconLayerTwo', '#ffff66')
|
} else if (a >= 48 && a < 60) {
|
that.addPolygon(item, 'soilIconLayerThree', '#ff6633')
|
} else if (a >= 60) {
|
that.addPolygon(item, 'soilIconLayerFour', '#ff0000')
|
}
|
}
|
})
|
}
|
})
|
this.loading = false
|
})
|
})
|
},
|
// 控制图层显示隐藏事件
|
layerControl (item) {
|
if (item.type == 'soilIconLayerOne') {
|
this.legendData[0].content[0].btnClass == '' ? this.legendData[0].content[0].btnClass = 'btn-one' : this.legendData[0].content[0].btnClass = ''
|
} else if (item.type == 'soilIconLayerTwo') {
|
this.legendData[0].content[1].btnClass == '' ? this.legendData[0].content[1].btnClass = 'btn-two' : this.legendData[0].content[1].btnClass = ''
|
} else if (item.type == 'soilIconLayerThree') {
|
this.legendData[0].content[2].btnClass == '' ? this.legendData[0].content[2].btnClass = 'btn-three' : this.legendData[0].content[2].btnClass = ''
|
} else if (item.type == 'soilIconLayerFour') {
|
this.legendData[0].content[3].btnClass == '' ? this.legendData[0].content[3].btnClass = 'btn-four' : this.legendData[0].content[3].btnClass = ''
|
}
|
|
this[item.type].setVisible(!this[item.type].getVisible())
|
},
|
layerClick (e) {
|
const that = this
|
|
that.bigRiverVisible = false
|
|
// 在点击时获取像素区域
|
that.bigRiverRealData = null
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
if (features.length > 0) {
|
var ind = 0
|
var cont = null
|
var data = null
|
|
features.forEach(item => {
|
if (item.values_.realData) {
|
if (item.values_.realData.mapZindex > ind) {
|
ind = item.values_.realData.mapZindex
|
cont = item.values_.realData
|
data = item.values_
|
}
|
}
|
})
|
|
this.zoomToExtent(data.geometry.extent_)
|
|
if (cont == null) return
|
|
var container = document.getElementById('popup')
|
|
var closer = document.getElementById('popup-closer')
|
|
that.overlay = new Overlay(/** @type {olx.OverlayOptions} */({
|
element: container,
|
autoPan: false,
|
autoPanAnimation: {
|
duration: 0 // 当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
|
}
|
}))
|
|
closer.onclick = function () {
|
that.overlay.setPosition(undefined)
|
closer.blur()
|
this.bigRiverVisible = false
|
return false
|
}
|
|
var coordinate = e.coordinate
|
|
that.overlay.setPosition(coordinate)
|
that.map2D.addOverlay(that.overlay)
|
|
that.bigRiverVisible = true
|
that.bigRiverRealData = cont
|
}
|
},
|
// 地图缩放，通过extent范围 extent数据类型为int数组，不能为字符串，如果为字符串则先转换为int数组。
|
zoomToExtent (extent) {
|
var MapZoom = extent
|
var mapPadding = [120, 110, 120, 410]
|
// 添加map.getSize()，可以让地图在正常的缩放级别内，而不是出现地图级别小数。
|
this.map2D.getView().fit(MapZoom, this.map2D.getSize(), {
|
constrainResolution: false,
|
earest: false,
|
padding: mapPadding
|
})
|
// 以下为另外一种方法
|
// var r = map.getView().getResolutionForExtent(extent, map.getSize());
|
// map.getView().setResolution(r);
|
// map.getView().setCenter(ol.extent.getCenter(extent));
|
},
|
getRandomColor () {
|
var r = Math.floor(Math.random() * 256)
|
var g = Math.floor(Math.random() * 256)
|
var b = Math.floor(Math.random() * 256)
|
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
// return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
|
},
|
addPolygon (data, type, color) {
|
data.attributes.mapZindex = this[type].values_.zIndex
|
|
var polygonFeature = new Feature({
|
type: 'polygon',
|
geometry: new Polygon(data.geometry.rings),
|
realData: data.attributes
|
})
|
|
polygonFeature.setStyle(new Style({
|
|
fill: new Fill({
|
color: color
|
})
|
|
}))
|
|
this[type].getSource().addFeature(polygonFeature)
|
}
|
|
},
|
destroyed () {
|
this.soilIconLayerOne.getSource().clear()
|
this.soilIconLayerTwo.getSource().clear()
|
this.soilIconLayerThree.getSource().clear()
|
this.soilIconLayerFour.getSource().clear()
|
|
if (this.overlay != null) {
|
this.map2D.removeOverlay(this.overlay)
|
}
|
|
if (this.layerPng != null) {
|
this.map2D.removeLayer(this.layerPng)
|
}
|
|
this.map2D.un('singleclick', this.layerClick)
|
|
this.map2D.removeLayer(this.soilIconLayerOne)
|
this.map2D.removeLayer(this.soilIconLayerTwo)
|
this.map2D.removeLayer(this.soilIconLayerThree)
|
this.map2D.removeLayer(this.soilIconLayerFour)
|
|
this.$parent.leftShowClick(true)
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
.soil-time-change {
|
position: fixed;
|
top: 90px;
|
left: 50%;
|
right: auto;
|
bottom: auto;
|
margin: auto;
|
transform: translate(-50%, 0);
|
width: auto;
|
height: 36px;
|
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
z-index: 11;
|
|
& > div {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.el-date-editor {
|
height: 36px;
|
display: flex;
|
align-items: center;
|
|
.el-input__inner {
|
height: 36px;
|
line-height: 36px;
|
}
|
}
|
}
|
</style>
|
