451 lines
14 KiB
Vue
451 lines
14 KiB
Vue
<template>
|
|
<div class="ele-body">
|
|
<a-card class="ele-card" :bordered="false">
|
|
<a-space>
|
|
|
|
<a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
|
|
placeholder="请输入需要搜索的点位">
|
|
</a-auto-complete>
|
|
|
|
<a-select @change="whereChange" name="year" v-model:value="where.monitorYear">
|
|
<a-select-option v-for="item in yearOptions" :key="item.value">
|
|
{{ item.label }}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
|
|
<a-radio-button value="市级"> 市级</a-radio-button>
|
|
<a-radio-button value="县级"> 县级</a-radio-button>
|
|
</a-radio-group>
|
|
<a-radio-group @change="whereChange" name="day" v-model:value="where.timeSlot">
|
|
<a-radio-button value="昼">昼</a-radio-button>
|
|
<a-radio-button value="夜">夜</a-radio-button>
|
|
</a-radio-group>
|
|
|
|
<a-button type="primary" :size="size" @click="checkType">{{ currentType == 0 ? '按功能区分类' : '按限值分类' }}</a-button>
|
|
|
|
<!-- <a-select placeholder="按功能区分类" style="width:200px" @select="selectCata">-->
|
|
<!-- <a-select-option :value="item.index" v-for="(item,index) in cate" v-bind:key="index">-->
|
|
<!-- {{ item.text }}-->
|
|
<!-- </a-select-option>-->
|
|
<!-- </a-select>-->
|
|
|
|
<!-- <a-button @click="exportMap">导出</a-button> -->
|
|
</a-space>
|
|
</a-card>
|
|
|
|
<div id="map" ref="map" style="overflow: hidden"></div>
|
|
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
|
<mapNominal :param="nominalList" v-if="currentType == 0"></mapNominal>
|
|
<mapNominalCate :param="cate" v-if="currentType == 1" @pointColor="pointColor"></mapNominalCate>
|
|
<map-table-center :rowData="gradeData"></map-table-center>
|
|
<map-table :rowData="pointData"></map-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getPlaceGis,
|
|
getColumnOptions,
|
|
getGradeAll
|
|
} from "@/api/ecology/noise/function-sound";
|
|
import tipTool from "@/views/components/tipToolPlace";
|
|
import mapNominal from "@/views/components/mapNominalPlace";
|
|
import mapTable from "@/views/components/mapTablePlace";
|
|
import mapTableCenter from "@/views/components/mapTableCenterPlace";
|
|
import mapNominalCate from "@/views/components/mapNominalCate";
|
|
|
|
let scene = null;
|
|
let pointLayer = null;
|
|
var that
|
|
|
|
export default {
|
|
components: {
|
|
tipTool,
|
|
mapNominal,
|
|
mapTable,
|
|
mapTableCenter,
|
|
mapNominalCate
|
|
},
|
|
data() {
|
|
return {
|
|
yearOptions: [2020, 2021],
|
|
arriveCoor: [108.33, 22.84],//坐标点
|
|
where: {
|
|
timeSlot: "昼",
|
|
regionLevel: "市级",
|
|
monitorYear: "2021",
|
|
},
|
|
map: {},
|
|
pointData: [],
|
|
currentY: 0,
|
|
currentX: 30000,
|
|
tipFlag: false,
|
|
tipData: [],
|
|
zoom: 13,
|
|
gradeData: [],
|
|
dataSource: [],
|
|
nominalList: [],
|
|
nominalListDay: [
|
|
{"text": "0类", "color": "#09952b", "data": "≤ 50", "min": "0", "max": "50", "common": "好"},
|
|
{"text": "1类", "color": "#669c08", "data": "50.1~55", "min": "50.1", "max": "55.0", "common": "较好"},
|
|
{"text": "2类", "color": "#9c9a07", "data": "55.1~60.0", "min": "55.1", "max": "60.0", "common": "一般"},
|
|
{"text": "3类", "color": "#eca5a0", "data": "60.1~65.0", "min": "60.1", "max": "65.0", "common": "较差"},
|
|
{"text": "4a类/4b类", "color": "#ca6e6e", "data": ">65.1", "min": "65.1", "max": "1000", "common": "差"},
|
|
],
|
|
nominalListNight: [
|
|
{"text": "0类", "color": "#09952b", "data": "≤ 40", "min": "0", "max": "40", "common": "好"},
|
|
{"text": "1类", "color": "#669c08", "data": "40.1~45", "min": "40.1", "max": "45.0", "common": "较好"},
|
|
{"text": "2类", "color": "#9c9a07", "data": "45.1~40.0", "min": "45.1", "max": "50.0", "common": "一般"},
|
|
{"text": "3类", "color": "#eca5a0", "data": "50.1~55.0", "min": "50.1", "max": "55.0", "common": "较差"},
|
|
{"text": "4a类", "color": "#ca6e6e", "data": "55.1~60.0", "min": "55.1", "max": "60", "common": "差"},
|
|
{"text": "4b类", "color": "#900000", "data": ">=60.1", "min": "60.1", "max": "1000", "common": "差"},
|
|
],
|
|
searchId: -1,
|
|
cate: [
|
|
{'text': '1类区域', 'color': '#ff0033', "common": "1类区域"},
|
|
{'text': '2类区域', 'color': '#119aee', "common": "2类区域"},
|
|
{'text': '3类区域', 'color': '#016812', "common": "3类区域"},
|
|
{'text': '4类区域', 'color': '#A020F0', "common": "4类区域"}
|
|
],
|
|
points: [],//数据准备
|
|
sourceData: [],
|
|
currentCate: -1,
|
|
currentType: 0,
|
|
cateId: -1
|
|
};
|
|
},
|
|
mounted() {
|
|
that = this
|
|
that.nominalList = that.nominalListDay
|
|
this.newInitMap();
|
|
},
|
|
methods: {
|
|
pointColor: function (e) {
|
|
console.log(e)
|
|
that.cateId = Number(e + 1)
|
|
|
|
let tem_arr = []
|
|
that.sourceData.forEach((item) => {
|
|
if (item.functionType == that.cateId) {
|
|
tem_arr.push(item)
|
|
}
|
|
})
|
|
that.map.clearOverlays();
|
|
that.pointData = tem_arr
|
|
that.addMarker()
|
|
},
|
|
checkType: function () {
|
|
that.currentType = that.currentType == 0 ? 1 : 0
|
|
that.map.clearOverlays();
|
|
that.addMarker()
|
|
},
|
|
selectCata: function (e) {
|
|
that.currentCate = e + 1
|
|
that.whereChange()
|
|
},
|
|
autoInput(e) {
|
|
that.dataSource.forEach((item, index) => {
|
|
if (item == e) {
|
|
if (that.searchId > 0) {
|
|
document.getElementById("id" + that.searchId).className = ""
|
|
}
|
|
that.searchId = index
|
|
console.log(that.pointData[that.searchId]['placeLng'])
|
|
// eslint-disable-next-line no-undef
|
|
that.map.centerAndZoom(new BMap.Point(Number(that.pointData[that.searchId]['placeLng']), Number(that.pointData[that.searchId]['placeLat'])), that.zoom); // 初始化地图,设置中心点坐标和地图级别
|
|
document.getElementById("id" + that.searchId).className += "animation_check"
|
|
}
|
|
})
|
|
},
|
|
newInitMap() {
|
|
// eslint-disable-next-line no-undef
|
|
that.map = new BMap.Map(this.$refs.map); // 创建Map实例
|
|
// eslint-disable-next-line no-undef
|
|
that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
|
|
that.map.addControl(
|
|
// eslint-disable-next-line no-undef
|
|
new BMap.MapTypeControl({
|
|
// eslint-disable-next-line no-undef
|
|
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
|
|
})
|
|
)
|
|
that.map.enableDragging();
|
|
that.map.enableScrollWheelZoom();
|
|
that.map.enableDoubleClickZoom();
|
|
that.map.enableKeyboard();
|
|
|
|
getColumnOptions("monitor_year").then((res) => {
|
|
if (res.data.code == 0) {
|
|
this.yearOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item,
|
|
value: item,
|
|
};
|
|
});
|
|
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
|
this.whereChange();
|
|
}
|
|
})
|
|
},
|
|
addMarker: function () { // 创建图标对象
|
|
//1、定义构造函数并继承Overlay
|
|
//定义自定义覆盖物的构造函数
|
|
function ComplexCustomOverlay(point, index, color) {
|
|
this._point = point
|
|
this._index = index
|
|
this._color = color
|
|
}
|
|
|
|
// eslint-disable-next-line no-undef
|
|
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
|
|
|
ComplexCustomOverlay.prototype.initialize = function (map) {
|
|
this._map = map;
|
|
var div = this._div = document.createElement("div");
|
|
div.style.position = "absolute";
|
|
div.style.float = "left"
|
|
div.style.cursor = "pointer"
|
|
// eslint-disable-next-line no-undef
|
|
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
|
|
div.style.height = "20px";
|
|
div.style.width = "10px";
|
|
|
|
var arrow = this._arrow = document.createElement("div");
|
|
arrow.style.width = "0px";
|
|
arrow.style.height = "0px";
|
|
arrow.style.borderLeftWidth = "10px"
|
|
arrow.style.borderLeftColor = "transparent"
|
|
arrow.style.borderStyle = "solid"
|
|
arrow.style.borderRightWidth = "10px"
|
|
arrow.style.borderRightColor = "transparent"
|
|
arrow.style.borderBottomWidth = "20px"
|
|
arrow.style.borderTopWidth = "0"
|
|
arrow.style.position = "absolute"
|
|
arrow.style.borderBottomColor = `${this._color}`
|
|
arrow.setAttribute("id", "id" + this._index)
|
|
arrow.style.top = "22px";
|
|
arrow.style.left = "10px";
|
|
div.appendChild(arrow);
|
|
that.map.getPanes().labelPane.appendChild(div);
|
|
return div;
|
|
}
|
|
ComplexCustomOverlay.prototype.draw = function () {
|
|
var map = this._map;
|
|
var pixel = map.pointToOverlayPixel(this._point);
|
|
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
|
|
this._div.style.top = pixel.y - 30 + "px";
|
|
}
|
|
ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
|
|
this._arrow['on' + event] = fun;
|
|
}
|
|
// 颜色
|
|
that.pointData.forEach(async (item, index) => {
|
|
let color = ""
|
|
if (that.currentType == 0) { // 限制
|
|
that.nominalList.forEach((it, ins) => {
|
|
if (Number(item.leq) >= Number(it.min) && Number(item.leq) <= Number(it.max)) {
|
|
color = that.nominalList[ins]['color']
|
|
return false
|
|
}
|
|
})
|
|
} else {
|
|
that.cate.forEach((i, j) => { // 区域
|
|
if (Number(item.functionType) == Number(j + 1)) {
|
|
color = that.cate[j]['color']
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
|
|
// eslint-disable-next-line no-undef
|
|
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.placeLng, item.placeLat), index, color);
|
|
that.map.addOverlay(myCompOverlay);//将标注添加到地图中
|
|
myCompOverlay.addEventListener('mouseover', function (e) {
|
|
let currentId = e.target.getAttribute("id")
|
|
|
|
|
|
setTimeout(() => {
|
|
}, 300)
|
|
let bodyInfo = document.getElementsByTagName("body")[0]
|
|
let screenWidth = bodyInfo.offsetWidth
|
|
// let screenHeight = bodyInfo.offsetHeight
|
|
|
|
let mapInfo = document.getElementById("map")
|
|
let mapWidth = mapInfo.offsetWidth; // 返回元素的总宽度
|
|
// let mapHeight = mapInfo.offsetHeight; // 返回元素的总高度
|
|
|
|
let calcWidth = screenWidth - mapWidth
|
|
// let calcHeight = screenHeight - mapHeight
|
|
console.log("=================================================================================================")
|
|
that.tipData = that.pointData[Number(currentId.substring(2, currentId.length))]
|
|
that.tipFlag = true
|
|
|
|
that.currentX = e.pageX - calcWidth
|
|
that.currentY = e.pageY - 80
|
|
})
|
|
|
|
myCompOverlay.addEventListener('mouseout', function () {
|
|
setTimeout(() => {
|
|
}, 300)
|
|
that.currentX = 30000
|
|
that.currentY = 0
|
|
that.tipFlag = false
|
|
})
|
|
})
|
|
},
|
|
whereChange(e) {
|
|
if (typeof (e) == "object") {
|
|
if (e.target.name == "area") {
|
|
that.where.regionLevel = e.target.value
|
|
if (that.where.regionLevel == "县级") {
|
|
that.zoom = 8
|
|
} else {
|
|
that.zoom = 13
|
|
}
|
|
}
|
|
if (e.target.name == "day") {
|
|
that.where.timeSlot = e.target.value
|
|
if (e.target.value == "昼") {
|
|
that.nominalList = that.nominalListDay
|
|
} else {
|
|
that.nominalList = that.nominalListNight
|
|
}
|
|
}
|
|
} else {
|
|
if (e > 0) {
|
|
that.where.monitorYear = e
|
|
}
|
|
}
|
|
|
|
that.map.clearOverlays();
|
|
// eslint-disable-next-line no-undef
|
|
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
|
// GIS
|
|
if (scene && pointLayer) {
|
|
scene.removeLayer(pointLayer)
|
|
}
|
|
getGradeAll(this.where.monitorYear).then(res=>{
|
|
that.gradeData = []
|
|
if (res.data.code == 0 && res.data.data.length > 0) {
|
|
this.gradeData = res.data.data
|
|
}
|
|
})
|
|
getPlaceGis(this.where).then((res) => {
|
|
that.pointData = []
|
|
if (res.data.code == 0 && res.data.data.length > 0) {
|
|
that.pointData = res.data.data
|
|
that.sourceData = res.data.data
|
|
that.pointData.forEach(item => {
|
|
that.dataSource.push(`${item.placeName}`)
|
|
})
|
|
|
|
if (that.currentCate > 0) { // 筛选种类
|
|
let tem = []
|
|
let tem_str = []
|
|
that.sourceData.forEach((item) => {
|
|
if (Number(item.functionType) == that.currentCate) {
|
|
tem.push(item)
|
|
tem_str.push(`${item.placeName}`)
|
|
}
|
|
})
|
|
that.pointData = tem
|
|
that.dataSource = tem_str
|
|
}
|
|
that.addMarker()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.ele-body {
|
|
position: relative;
|
|
padding: 16px 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.ele-card {
|
|
z-index: 10;
|
|
margin: 0 16px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.anchorBL {
|
|
display: none;
|
|
}
|
|
|
|
::v-deep .amap-logo {
|
|
right: 0 !important;
|
|
left: auto !important;
|
|
display: none !important;
|
|
}
|
|
|
|
::v-deep .amap-copyright {
|
|
right: 70px !important;
|
|
left: auto !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
::v-deep .amap-info-content {
|
|
background-color: rgba(0, 0, 0, .4);
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
padding: 0;
|
|
}
|
|
|
|
::v-deep .bottom-center .amap-info-sharp {
|
|
border-top-color: rgba(0, 0, 0, .6);
|
|
}
|
|
|
|
::v-deep .amap-info-close {
|
|
display: none;
|
|
}
|
|
|
|
::v-deep #map-mark {
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 20px solid rgba(0, 0, 255, 0.6);
|
|
}
|
|
|
|
.animation_check {
|
|
animation: myfirst 1s infinite;
|
|
}
|
|
|
|
@keyframes myfirst {
|
|
0% {
|
|
top: 0px
|
|
}
|
|
25% {
|
|
top: 5px;
|
|
}
|
|
50% {
|
|
top: 0px;
|
|
}
|
|
75% {
|
|
top: -5px;
|
|
}
|
|
100% {
|
|
top: 0px;
|
|
}
|
|
}
|
|
</style>
|