gis模块
This commit is contained in:
xc
21894
package-lock.json
generated
21894
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -19,4 +19,5 @@
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=8gUIvdkXH5aACPaQZcVTLIZbglppPOkh"></script>
|
||||
</html>
|
||||
|
||||
68
src/api/gis/gisApi.js
Normal file
68
src/api/gis/gisApi.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const getLakePlace = function (data) { // 专项湖库
|
||||
return axios.post("/lakeLibrary/lakeLibrarySpecial/gis", data)
|
||||
}
|
||||
|
||||
const getLakePlaceInnerCity = function (data) { // 专项湖库
|
||||
return axios.post("/lakeLibrary/lakeLibraryInnerCity/gis", data)
|
||||
}
|
||||
|
||||
const getAirGis = function (data) {
|
||||
return axios.get(`/ambientAir/ambientAir/gis/place?regionLevel=${data.regionLevel}&year=${data.year}`)
|
||||
}
|
||||
|
||||
//lakeLibrary/lakeSpecialDict/getYear
|
||||
|
||||
//lakeLibrary/lakeSpecialDict/getYear
|
||||
const getLakeYear = function () { // 专项湖库年份
|
||||
return axios.get("/lakeLibrary/lakeSpecialDict/getYear")
|
||||
}
|
||||
|
||||
// lakeLibrary/lakeCityDict/getYear
|
||||
const getInnerLakeYear = function () { // 城市内湖年份
|
||||
return axios.get("/lakeLibrary/lakeCityDict/getYear")
|
||||
}
|
||||
|
||||
const autonomous = function (data) { // 自治区水功能区数据查询
|
||||
return axios.post("/water/visualiz/autonomous", data)
|
||||
}
|
||||
|
||||
const national = function (data) { // 国家水功能区数据查询
|
||||
return axios.post("/water/visualiz/national", data)
|
||||
}
|
||||
|
||||
const river = function (data) { // 江河水质数据查询
|
||||
return axios.post("/water/visualiz/river", data)
|
||||
}
|
||||
|
||||
const waterStation = function (data) { // 水站数据查询
|
||||
return axios.post("/water/visualiz/waterStation", data)
|
||||
}
|
||||
|
||||
const waterCity = function (data) { // 城市
|
||||
return axios.post("/drinkingWater/drinkingWater/cityGis", data)
|
||||
}
|
||||
|
||||
const waterCounty = function (data) { // 区县
|
||||
return axios.post("/drinkingWater/drinkingWater/countyGis", data)
|
||||
}
|
||||
|
||||
const waterVillage = function (data) { // 农村
|
||||
return axios.post("/drinkingWaterVillage/drinkingWaterVillage/villageGis", data)
|
||||
}
|
||||
|
||||
export {
|
||||
getLakePlace,
|
||||
getAirGis,
|
||||
getLakePlaceInnerCity,
|
||||
getLakeYear,
|
||||
getInnerLakeYear,
|
||||
autonomous, //自治区水功能区数据查询
|
||||
national,
|
||||
river,
|
||||
waterStation,
|
||||
waterCity,
|
||||
waterCounty,
|
||||
waterVillage
|
||||
}
|
||||
78
src/views/components/BaiduMap.vue
Normal file
78
src/views/components/BaiduMap.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div ref="map" class="map">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {RadarOverlay} from './Radar';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
// eslint-disable-next-line no-undef
|
||||
const map = new BMap.Map(this.$refs.map);
|
||||
// eslint-disable-next-line no-undef
|
||||
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
|
||||
// eslint-disable-next-line no-undef
|
||||
const point = new BMap.Point(116.404, 39.915);
|
||||
map.enableScrollWheelZoom(true);
|
||||
// 添加自定义覆盖物
|
||||
const radar = new RadarOverlay(point, 40);
|
||||
map.addOverlay(radar);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.radar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radar .ripple {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
.radar :nth-child(1) {
|
||||
animation-delay: 0.666s;
|
||||
}
|
||||
|
||||
.radar :nth-child(2) {
|
||||
animation-delay: 1.322s;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.radar-box {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
31
src/views/components/Radar.js
Normal file
31
src/views/components/Radar.js
Normal file
@@ -0,0 +1,31 @@
|
||||
// eslint-disable-next-line no-undef
|
||||
export class RadarOverlay extends BMap.Overlay {
|
||||
constructor(point, size) {
|
||||
super();
|
||||
this.point = point;
|
||||
this.size = size;
|
||||
}
|
||||
|
||||
initialize(map) {
|
||||
this._map = map;
|
||||
const template = `<div class="radar-box">
|
||||
<div class="radar">
|
||||
<div class="ripple"></div>
|
||||
<div class="ripple"></div>
|
||||
<div class="ripple"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
const divFragment = document.createRange().createContextualFragment(template);
|
||||
const div = divFragment.querySelectorAll('.radar-box')[0];
|
||||
map.getPanes().markerPane.appendChild(div);
|
||||
this._div = div;
|
||||
return div;
|
||||
}
|
||||
|
||||
draw() {
|
||||
// 根据地理坐标转换为像素坐标，并设置给容器
|
||||
const position = this._map.pointToOverlayPixel(this.point);
|
||||
this._div.style.left = `${position.x - this.size / 2}px`;
|
||||
this._div.style.top = `${position.y - this.size / 2}px`;
|
||||
}
|
||||
}
|
||||
114
src/views/components/gisMap.vue
Normal file
114
src/views/components/gisMap.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="ele-body" style="width: 100%;height: 100%">
|
||||
<!-- <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-space>-->
|
||||
<div id="map" ref="map">
|
||||
<!-- <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that
|
||||
// import tipTool from "@/views/components/tipToolPlace";
|
||||
// import mapNominal from "@/views/components/mapNominalPlace";
|
||||
// import mapTable from "@/views/components/mapTablePlace";
|
||||
// import mapTableCenter from "@/views/components/mapTableCenterPlace";
|
||||
|
||||
export default {
|
||||
name: "gisMap",
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [2020, 2021],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
regionLevel: "市级",
|
||||
monitorYear: "2021",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 0,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
nominalList: [],
|
||||
points: []//数据准备
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
that = this
|
||||
that.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
newInitMap: function () {
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.animation_check {
|
||||
animation: myfirst 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
0% {
|
||||
top: 0px
|
||||
}
|
||||
25% {
|
||||
top: 5px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
75% {
|
||||
top: -5px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/views/components/mapNominal.vue
Normal file
53
src/views/components/mapNominal.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{ item.common }}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{ item.data }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props: {
|
||||
param: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
}
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
61
src/views/components/mapNominalCate.vue
Normal file
61
src/views/components/mapNominalCate.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index" @click="pointColor(index)">
|
||||
<div class="map-nominal-container-inner-text">{{item.common}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<!-- <div class="map-nominal-container-inner-text">{{item.data}}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
pointColor:function(e){
|
||||
this.$emit("pointColor",e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
56
src/views/components/mapNominalPlace.vue
Normal file
56
src/views/components/mapNominalPlace.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.text}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.data}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
56
src/views/components/mapNominalZone.vue
Normal file
56
src/views/components/mapNominalZone.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.common}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.data}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
93
src/views/components/mapTable.vue
Normal file
93
src/views/components/mapTable.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped >
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
93
src/views/components/mapTableCenter.vue
Normal file
93
src/views/components/mapTableCenter.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
93
src/views/components/mapTableCenterPlace.vue
Normal file
93
src/views/components/mapTableCenterPlace.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="功能区噪声" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
93
src/views/components/mapTableCenterZone.vue
Normal file
93
src/views/components/mapTableCenterZone.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="区域噪声" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
93
src/views/components/mapTablePlace.vue
Normal file
93
src/views/components/mapTablePlace.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'placeName',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '功能区代码',
|
||||
dataIndex: 'functionCode',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
94
src/views/components/mapTableZone.vue
Normal file
94
src/views/components/mapTableZone.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'placeName',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
87
src/views/components/tipTool.vue
Normal file
87
src/views/components/tipTool.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{data.place}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位等级 {{data.regionLevel}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
所属地区 {{data.area}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
所属路段 {{data.road}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
噪声 {{data.leq}} dB(A)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default:30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped >
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
87
src/views/components/tipToolPlace.vue
Normal file
87
src/views/components/tipToolPlace.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{data.placeName}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位等级 {{data.regionLevel}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
功能区代码 {{data.functionCode}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
所属路段 {{data.road}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
噪声 {{data.leq}} dB(A)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default:30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
90
src/views/components/tipToolZone.vue
Normal file
90
src/views/components/tipToolZone.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{ data.placeName }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位等级 {{ data.regionLevel }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
网格边长 {{ data.gridLength }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
所属路段 {{ data.road }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
噪声 {{ data.leq }} dB(A)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default: 30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
filed: {
|
||||
type: Array
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
56
src/views/visualiz/atmosphere/acid/components/mapNominal.vue
Normal file
56
src/views/visualiz/atmosphere/acid/components/mapNominal.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.common}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.data}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
87
src/views/visualiz/atmosphere/acid/components/mapTable.vue
Normal file
87
src/views/visualiz/atmosphere/acid/components/mapTable.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '属性',
|
||||
className: 'attribute',
|
||||
dataIndex: 'attribute',
|
||||
},
|
||||
{
|
||||
title: 'ph',
|
||||
dataIndex: 'ph',
|
||||
}
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="酸雨点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
84
src/views/visualiz/atmosphere/acid/components/tipTool.vue
Normal file
84
src/views/visualiz/atmosphere/acid/components/tipTool.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{data.place}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位编号 {{data.placeCode}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位属性 {{data.attribute}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
PH {{data.ph}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default:30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -2,64 +2,114 @@
|
||||
<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" v-model:value="where.year">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="市级"> 市级 </a-radio-button>
|
||||
<a-radio-button value="县级"> 县级 </a-radio-button>
|
||||
<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-button @click="exportMap">导出</a-button> -->
|
||||
</a-space>
|
||||
</a-card>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||
<!-- <mapNominal :param="nominalList"></mapNominal>-->
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getPlaceGis,
|
||||
} from "@/api/ecology/atmosphere/acid";
|
||||
import {
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/atmosphere/acid-rain-plcae";
|
||||
|
||||
import tipTool from "./components/tipTool";
|
||||
// import mapNominal from "./components/mapNominal";
|
||||
import mapTable from "./components/mapTable";
|
||||
// import mapTableCenter from "./components/mapTableCenter";
|
||||
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
// mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
regionLevel: "市级",
|
||||
year: "选择年份",
|
||||
year: "",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
nominalList: [],
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
scene = new Scene({
|
||||
id: "map",
|
||||
map: new GaodeMap({
|
||||
style: "light",
|
||||
center: [108.33, 22.84],
|
||||
// pitch: 48.62562,
|
||||
// rotation: -0.76,
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on("loaded", () => {
|
||||
this.initData();
|
||||
});
|
||||
|
||||
// const control = new DrawControl(scene, {
|
||||
// });
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), 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("year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
@@ -68,78 +118,147 @@ export default {
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.year = res.data.data[res.data.data.length - 1];
|
||||
this.where.year = res.data.data[0];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
if(scene && pointLayer){
|
||||
addMarker: function () { // 创建图标对象
|
||||
//定义自定义覆盖物的构造函数
|
||||
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 = "#fc4304"
|
||||
// that.nominalList.forEach((it, ins) => {
|
||||
// if (item.leq >= it.min && item.leq <= it.max) {
|
||||
// color = that.nominalList[ins]['color']
|
||||
// return false
|
||||
// }
|
||||
// })
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
that.currentX = e.pageX - calcWidth
|
||||
that.currentY = e.pageY - 80
|
||||
},true)
|
||||
|
||||
myCompOverlay.addEventListener('mouseout', function () {
|
||||
setTimeout(() => {
|
||||
}, 300)
|
||||
that.currentX = 30000
|
||||
that.currentY = 0
|
||||
that.tipFlag = false
|
||||
},true)
|
||||
})
|
||||
},
|
||||
whereChange(e) {
|
||||
if (typeof (e) == "object") {
|
||||
if (e.target.name == "area") {
|
||||
that.where.regionLevel = e.target.value
|
||||
if (that.where.regionLevel == "county") {
|
||||
that.zoom = 8
|
||||
} else {
|
||||
that.zoom = 13
|
||||
}
|
||||
}
|
||||
// if (e.target.name == "day") {
|
||||
// that.where.timeSlot = e.target.value
|
||||
// }
|
||||
} else {
|
||||
if (e > 0) {
|
||||
that.where.year = e
|
||||
}
|
||||
}
|
||||
that.map.clearOverlays();
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
|
||||
if (scene && pointLayer) {
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
getPlaceGis(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(cityLayer){
|
||||
cityLayer.destroy()
|
||||
scene.removeLayer(cityLayer)
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
pointLayer = new PointLayer({})
|
||||
.source(res.data.data, {
|
||||
parser: {
|
||||
type: "json",
|
||||
x: "longitude",
|
||||
y: "latitude",
|
||||
})
|
||||
},
|
||||
})
|
||||
.shape('circle').size(10)
|
||||
// .size("leq", acid (level) {
|
||||
// return [4, 4, level];
|
||||
// })
|
||||
.active(true)
|
||||
.color("leq", () => {
|
||||
// const { timeSlot } = this.where;
|
||||
// const color =
|
||||
// timeSlot == "昼"
|
||||
// ? leq > 70
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2"
|
||||
// : leq > 65
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2";
|
||||
return "#13c2c2";
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
pointLayer.on("mousemove", (e) => {
|
||||
const popup = new Popup({
|
||||
offsets: [0, 0],
|
||||
closeButton: false,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(
|
||||
`<p>点位名称: ${e.feature.place}</p><p>点位编号: ${e.feature.placeCode}</p><p>点位属性: ${e.feature.attribute}</p><p>ph: ${e.feature.ph}</p>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
// scene.setPitch(48);
|
||||
scene.render()
|
||||
}
|
||||
});
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
exportMap() {
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style>
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -148,21 +267,85 @@ html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
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>
|
||||
56
src/views/visualiz/atmosphere/air/components/mapNominal.vue
Normal file
56
src/views/visualiz/atmosphere/air/components/mapNominal.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.common}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.data}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
88
src/views/visualiz/atmosphere/air/components/mapTable.vue
Normal file
88
src/views/visualiz/atmosphere/air/components/mapTable.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "站点名称",
|
||||
dataIndex: 'place'
|
||||
},
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'placeFunctionalAreaCategory',
|
||||
},
|
||||
{
|
||||
title: 'Aqi',
|
||||
dataIndex: 'avgAqi',
|
||||
},
|
||||
{
|
||||
title: '点位级别',
|
||||
dataIndex: 'attributes',
|
||||
}
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="环境空气点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
94
src/views/visualiz/atmosphere/air/components/tipTool.vue
Normal file
94
src/views/visualiz/atmosphere/air/components/tipTool.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{data.place}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位属性 {{data.attributes}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
片区名称 {{data.districtName}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
所属功能区分类 {{data.placeFunctionalAreaCategory}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
SO2 {{data.avgSo2}} NO2 {{data.avgNo2}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
PM10 {{data.avgPm10}} CO {{data.avgCo}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
O3 {{data.avgO3}} PM2.5 {{data.avgPm25}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default:30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
|
||||
&-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,65 +2,133 @@
|
||||
<div class="ele-body">
|
||||
<a-card class="ele-card" :bordered="false">
|
||||
<a-space>
|
||||
<a-select @change="whereChange" v-model:value="where.year">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">{{
|
||||
|
||||
<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.year">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">
|
||||
{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="city"> 市级 </a-radio-button>
|
||||
<a-radio-button value="county"> 县级 </a-radio-button>
|
||||
<a-radio-button value="place"> 站点 </a-radio-button>
|
||||
<a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="city">市级</a-radio-button>
|
||||
<a-radio-button value="county">县级</a-radio-button>
|
||||
<a-radio-button value="place">站点</a-radio-button>
|
||||
</a-radio-group>
|
||||
<!-- <a-radio-group 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 @click="exportMap">导出</a-button> -->
|
||||
</a-space>
|
||||
</a-card>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||
<mapNominal :param="nominalList"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
// import {
|
||||
// getGisCountList
|
||||
// } from "@/api/ecology/noise/road-sound";
|
||||
|
||||
import {
|
||||
getPlaceGis,
|
||||
} from "@/api/ecology/atmosphere/air";
|
||||
getAirGis,
|
||||
} from "@/api/gis/gisApi";
|
||||
import {
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/atmosphere/air-plcae";
|
||||
|
||||
import tipTool from "./components/tipTool";
|
||||
import mapNominal from "./components/mapNominal";
|
||||
import mapTable from "./components/mapTable";
|
||||
// import mapTableCenter from "./components/mapTableCenter";
|
||||
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
regionLevel: "place",
|
||||
year: "选择年份",
|
||||
// timeSlot: "昼",
|
||||
regionLevel: "city",
|
||||
year: "",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
nominalList: [
|
||||
{"text": "一级", "color": "#09952b", "data": "≤ 50.0", "min": "0", "max": "50.0", "common": "优"},
|
||||
{"text": "二级", "color": "#c6c303", "data": "50.1~100.0", "min": "50.1", "max": "100.0", "common": "良"},
|
||||
{"text": "三级", "color": "#ee7606", "data": "100.1~150.0", "min": "100.1", "max": "150.0", "common": "轻度污染"},
|
||||
{"text": "四级", "color": "#f52b07", "data": "150.1~200.0", "min": "150.1", "max": "200.0", "common": "中度污染"},
|
||||
{"text": "五级", "color": "#d50121", "data": "200.1~300.0", "min": "200.1", "max": "300", "common": "重度污染"},
|
||||
{"text": "六级", "color": "#710000", "data": ">=300.1", "min": "300.1", "max": "100000", "common": "严重污染"},
|
||||
],
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
scene = new Scene({
|
||||
id: "map",
|
||||
map: new GaodeMap({
|
||||
style: "light",
|
||||
center: [108.33, 22.84],
|
||||
// pitch: 48.62562,
|
||||
// rotation: -0.76,
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on("loaded", () => {
|
||||
this.initData();
|
||||
});
|
||||
|
||||
// const control = new DrawControl(scene, {
|
||||
// });
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), 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("year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
@@ -72,76 +140,146 @@ export default {
|
||||
this.where.year = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
if(scene && pointLayer){
|
||||
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 = ""
|
||||
that.nominalList.forEach((it, ins) => {
|
||||
if (Number(item.avgAqi) >= it.min && Number(item.avgAqi) <= it.max) {
|
||||
color = that.nominalList[ins]['color']
|
||||
return false
|
||||
}
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
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 == "county") {
|
||||
that.zoom = 8
|
||||
} else {
|
||||
that.zoom = 13
|
||||
}
|
||||
}
|
||||
// if (e.target.name == "day") {
|
||||
// that.where.timeSlot = e.target.value
|
||||
// }
|
||||
} else {
|
||||
if (e > 0) {
|
||||
that.where.year = e
|
||||
}
|
||||
}
|
||||
|
||||
that.map.clearOverlays();
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
// GIS
|
||||
// that.getGisCountList()
|
||||
|
||||
if (scene && pointLayer) {
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
getPlaceGis(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(cityLayer){
|
||||
cityLayer.destroy()
|
||||
scene.removeLayer(cityLayer)
|
||||
}
|
||||
pointLayer = new PointLayer({})
|
||||
.source(res.data.data, {
|
||||
parser: {
|
||||
type: "json",
|
||||
x: "longitude",
|
||||
y: "latitude",
|
||||
},
|
||||
getAirGis(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
.shape('circle').size(10)
|
||||
// .size("leq", acid (level) {
|
||||
// return [4, 4, level];
|
||||
// })
|
||||
.active(true)
|
||||
.color("leq", () => {
|
||||
// const { timeSlot } = this.where;
|
||||
// const color =
|
||||
// timeSlot == "昼"
|
||||
// ? leq > 70
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2"
|
||||
// : leq > 65
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2";
|
||||
return "#13c2c2";
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
pointLayer.on("mousemove", (e) => {
|
||||
const popup = new Popup({
|
||||
offsets: [0, 0],
|
||||
closeButton: false,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(
|
||||
`<p>点位名称: ${e.feature.place}</p><p>点位属性: ${e.feature.attributes}</p><p>片区名称: ${e.feature.districtName}</p><p>所在功能区类别: ${e.feature.placeFunctionalAreaCategory}</p>
|
||||
<p>SO2: ${e.feature.avgSo2} NO2: ${e.feature.avgNo2}</p><p>PM10: ${e.feature.avgPm10} CO: ${e.feature.avgCo}</p><p>O3: ${e.feature.avgO3} PM2.5: ${e.feature.avgPm25}</p>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
// scene.setPitch(48);
|
||||
scene.render()
|
||||
that.addMarker()
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
;
|
||||
</script>
|
||||
<style scoped>
|
||||
<style >
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -150,21 +288,85 @@ html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
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>
|
||||
@@ -2,76 +2,175 @@
|
||||
<div class="ele-body">
|
||||
<a-card class="ele-card" :bordered="false">
|
||||
<a-space>
|
||||
<a-select @change="whereChange" v-model:value="where.monitorYear">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
|
||||
<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-select v-model:value="where.quarter" placeholder="季度" allowClear>
|
||||
<a-select-option value="1">第一季度</a-select-option>
|
||||
<a-select-option value="2">第二季度</a-select-option>
|
||||
<a-select-option value="3">第三季度</a-select-option>
|
||||
<a-select-option value="4">第四季度</a-select-option>
|
||||
</a-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="市级"> 市级 </a-radio-button>
|
||||
<a-radio-button value="县级"> 县级 </a-radio-button>
|
||||
<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" v-model:value="where.timeSlot">
|
||||
<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"></div>
|
||||
|
||||
<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="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import axios from "axios";
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
// import { DrawControl } from '@antv/l7-draw';
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getPlaceGis,
|
||||
getColumnOptions,
|
||||
} 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;
|
||||
let cityLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter,
|
||||
mapNominalCate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
yearOptions: [2020, 2021],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
regionLevel: "市级",
|
||||
quarter: undefined,
|
||||
monitorYear: "选择年份",
|
||||
monitorYear: "2021",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
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() {
|
||||
scene = new Scene({
|
||||
id: "map",
|
||||
map: new GaodeMap({
|
||||
style: "light",
|
||||
center: [108.33, 22.84],
|
||||
// pitch: 48.62562,
|
||||
// rotation: -0.76,
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on("loaded", () => {
|
||||
this.initData();
|
||||
});
|
||||
|
||||
// const control = new DrawControl(scene, {
|
||||
// });
|
||||
that = this
|
||||
that.nominalList = that.nominalListDay
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
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) => {
|
||||
@@ -83,74 +182,169 @@ export default {
|
||||
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
if(scene && pointLayer){
|
||||
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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
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)
|
||||
}
|
||||
getPlaceGis(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(cityLayer){
|
||||
cityLayer.destroy()
|
||||
scene.removeLayer(cityLayer)
|
||||
}
|
||||
pointLayer = new PointLayer({})
|
||||
.source(res.data.data, {
|
||||
parser: {
|
||||
type: "json",
|
||||
x: "placeLng",
|
||||
y: "placeLat",
|
||||
},
|
||||
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}`)
|
||||
})
|
||||
.shape('triangle').size(10)
|
||||
// .size("leq", acid (level) {
|
||||
// return [4, 4, level];
|
||||
// })
|
||||
.active(true)
|
||||
.color("leq", () => {
|
||||
// const { timeSlot } = this.where;
|
||||
// const color =
|
||||
// timeSlot == "昼"
|
||||
// ? leq > 70
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2"
|
||||
// : leq > 65
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2";
|
||||
return "#13c2c2";
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
pointLayer.on("mousemove", (e) => {
|
||||
const popup = new Popup({
|
||||
offsets: [0, 0],
|
||||
closeButton: false,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(
|
||||
`<p>点位名称: ${e.feature.placeName}</p><p>点位等级: ${e.feature.regionLevel}</p><p>功能区代码: ${e.feature.functionCode}</p><p>所属路段: ${e.feature.road}</p><p>噪声: ${e.feature.leq}dB(A)</p>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
// scene.setPitch(48);
|
||||
scene.render()
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
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 {
|
||||
@@ -161,21 +355,85 @@ html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
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>
|
||||
@@ -2,69 +2,123 @@
|
||||
<div class="ele-body">
|
||||
<a-card class="ele-card" :bordered="false">
|
||||
<a-space>
|
||||
<a-select @change="whereChange" v-model:value="where.monitorYear">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">{{
|
||||
|
||||
<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-option>
|
||||
</a-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="市级"> 市级 </a-radio-button>
|
||||
<a-radio-button value="县级"> 县级 </a-radio-button>
|
||||
<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" v-model:value="where.timeSlot">
|
||||
<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 @click="exportMap">导出</a-button> -->
|
||||
</a-space>
|
||||
</a-card>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||
<mapNominal :param="nominalList"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import axios from "axios";
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
// import { DrawControl } from '@antv/l7-draw';
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getGisBase,
|
||||
getColumnOptions,
|
||||
getColumnOptions
|
||||
} from "@/api/ecology/noise/road-sound";
|
||||
import tipTool from "@/views/components/tipTool";
|
||||
import mapNominal from "@/views/components/mapNominal";
|
||||
import mapTable from "@/views/components/mapTable";
|
||||
// import mapTableCenter from "@/views/components/mapTableCenter";
|
||||
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
yearOptions: [2020, 2021],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
regionLevel: "市级",
|
||||
monitorYear: "选择年份",
|
||||
monitorYear: "2021",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
nominalList: [
|
||||
{"text": "一级", "color": "#09952b", "data": "≤ 68.0", "min": "0", "max": "68.8", "common": "好"},
|
||||
{"text": "二级", "color": "#669c08", "data": "68.1~70.0", "min": "68.1", "max": "70.0", "common": "较好"},
|
||||
{"text": "三级", "color": "#9c9a07", "data": "70.0~72.0", "min": "70.0", "max": "72.0", "common": "一般"},
|
||||
{"text": "四级", "color": "#935507", "data": "72.1~74.0", "min": "72.1", "max": "74.0", "common": "较差"},
|
||||
{"text": "五级", "color": "#900000", "data": ">74", "min": "74.1", "max": "1000", "common": "差"}
|
||||
],
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
scene = new Scene({
|
||||
id: "map",
|
||||
map: new GaodeMap({
|
||||
style: "light",
|
||||
center: [108.33, 22.84],
|
||||
// pitch: 48.62562,
|
||||
// rotation: -0.76,
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on("loaded", () => {
|
||||
this.initData();
|
||||
});
|
||||
|
||||
// const control = new DrawControl(scene, {
|
||||
// });
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['lng'], that.pointData[that.searchId]['lat']), 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) => {
|
||||
@@ -76,75 +130,151 @@ export default {
|
||||
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
addMarker: function () { // 创建图标对象
|
||||
//1、定义构造函数并继承Overlay
|
||||
//定义自定义覆盖物的构造函数
|
||||
function ComplexCustomOverlay(point, index, color) {
|
||||
this._point = point
|
||||
this._index = index
|
||||
this._color = color
|
||||
}
|
||||
|
||||
if(scene && pointLayer){
|
||||
// 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 = ""
|
||||
that.nominalList.forEach((it, ins) => {
|
||||
if (item.leq >= it.min && item.leq <= it.max) {
|
||||
color = that.nominalList[ins]['color']
|
||||
return false
|
||||
}
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.lng, item.lat), 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
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
|
||||
}
|
||||
} 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
|
||||
// that.getGisCountList()
|
||||
if (scene && pointLayer) {
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
getGisBase(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(cityLayer){
|
||||
cityLayer.destroy()
|
||||
scene.removeLayer(cityLayer)
|
||||
}
|
||||
pointLayer = new PointLayer({})
|
||||
.source(res.data.data, {
|
||||
parser: {
|
||||
type: "json",
|
||||
x: "lng",
|
||||
y: "lat",
|
||||
},
|
||||
})
|
||||
.shape('hexagon').size(10)
|
||||
// .size("leq", acid (level) {
|
||||
// return [4, 4, level];
|
||||
// })
|
||||
.active(true)
|
||||
.color("leq", (leq) => {
|
||||
const { timeSlot } = this.where;
|
||||
const color =
|
||||
timeSlot == "昼"
|
||||
? leq > 70
|
||||
? "#f5222d"
|
||||
: "#13c2c2"
|
||||
: leq > 65
|
||||
? "#f5222d"
|
||||
: "#13c2c2";
|
||||
return color;
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
pointLayer.on("mousemove", (e) => {
|
||||
const popup = new Popup({
|
||||
offsets: [0, 0],
|
||||
closeButton: false,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(
|
||||
`<p>点位名称: ${e.feature.place}</p><p>点位等级: ${e.feature.regionLevel}</p><p>所属城区: ${e.feature.area}</p><p>所属路段: ${e.feature.road}</p><p>噪声: ${e.feature.leq}dB(A)</p>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
// scene.setPitch(48);
|
||||
scene.render()
|
||||
}
|
||||
});
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
},
|
||||
};
|
||||
getColor: function (laq) {
|
||||
that.nominalList.forEach((item, index) => {
|
||||
if (laq >= item.min && laq < item.max) {
|
||||
console.log(that.nominalList[index]['color'])
|
||||
return that.nominalList[index]['color']
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
@@ -155,21 +285,126 @@ html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
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);
|
||||
}
|
||||
|
||||
.radar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.radar .ripple {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
.radar :nth-child(1) {
|
||||
animation-delay: 0.666s;
|
||||
}
|
||||
|
||||
.radar :nth-child(2) {
|
||||
animation-delay: 1.322s;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.radar-box {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.animation_check {
|
||||
animation: myfirst 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
0% {
|
||||
top: 0px
|
||||
}
|
||||
25% {
|
||||
top: 5px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
75% {
|
||||
top: -5px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,67 +2,136 @@
|
||||
<div class="ele-body">
|
||||
<a-card class="ele-card" :bordered="false">
|
||||
<a-space>
|
||||
<a-select @change="whereChange" v-model:value="where.monitorYear">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">{{
|
||||
|
||||
<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-option>
|
||||
</a-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="市级"> 市级 </a-radio-button>
|
||||
<a-radio-button value="县级"> 县级 </a-radio-button>
|
||||
<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" v-model:value="where.timeSlot">
|
||||
<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 @click="exportMap">导出</a-button> -->
|
||||
</a-space>
|
||||
</a-card>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||
<tip-tool :filedData="filed" :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||
<mapNominal :param="nominalList"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getPlaceGis,
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/noise/zone-sound";
|
||||
import tipTool from "@/views/components/tipToolZone";
|
||||
import mapNominal from "@/views/components/mapNominalZone";
|
||||
import mapTable from "@/views/components/mapTableZone";
|
||||
// import mapTableCenter from "@/views/components/mapTableCenterZone";
|
||||
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
yearOptions: [2020, 2021],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
regionLevel: "市级",
|
||||
monitorYear: "选择年份",
|
||||
monitorYear: "2021",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
dataSource: [],
|
||||
zoom: 13,
|
||||
filed: [
|
||||
{'text': '点位名称', 'value': 'placeName'},
|
||||
{'text': '点位等级', 'value': 'regionLevel'},
|
||||
{'text': '网格边长', 'value': 'gridLength'},
|
||||
{'text': '所属路段', 'value': 'road'},
|
||||
{'text': '噪声', 'value': 'leq'},
|
||||
],
|
||||
nominalList: [],
|
||||
nominalListDay: [
|
||||
{"text": "一级", "color": "#09952b", "data": "≤ 50", "min": "0", "max": "50", "common": "好"},
|
||||
{"text": "二级", "color": "#669c08", "data": "50.1~55", "min": "50.1", "max": "55.0", "common": "较好"},
|
||||
{"text": "三级", "color": "#9c9a07", "data": "55.1~60.0", "min": "55.1", "max": "60.0", "common": "一般"},
|
||||
{"text": "四级", "color": "#935507", "data": "60.1~65.0", "min": "60.1", "max": "65.0", "common": "较差"},
|
||||
{"text": "五级", "color": "#900000", "data": ">65.1", "min": "65.1", "max": "1000", "common": "差"},
|
||||
],
|
||||
nominalListNight: [
|
||||
{"text": "一级", "color": "#09952b", "data": "≤ 40", "min": "0", "max": "40", "common": "好"},
|
||||
{"text": "二级", "color": "#669c08", "data": "40.1~45", "min": "40.1", "max": "45.0", "common": "较好"},
|
||||
{"text": "三级", "color": "#9c9a07", "data": "45.1~50.0", "min": "45.1", "max": "50.0", "common": "一般"},
|
||||
{"text": "四级", "color": "#935507", "data": "50.1~55.0", "min": "50.1", "max": "55.0", "common": "较差"},
|
||||
{"text": "五级", "color": "#900000", "data": ">55.1", "min": "55.1", "max": "1000", "common": "差"},
|
||||
],
|
||||
points: []//数据准备
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
scene = new Scene({
|
||||
id: "map",
|
||||
map: new GaodeMap({
|
||||
style: "light",
|
||||
center: [108.33, 22.84],
|
||||
// pitch: 48.62562,
|
||||
// rotation: -0.76,
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on("loaded", () => {
|
||||
this.initData();
|
||||
});
|
||||
|
||||
// const control = new DrawControl(scene, {
|
||||
// });
|
||||
that = this
|
||||
that.nominalList = that.nominalListDay
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['placeLng'], 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) => {
|
||||
@@ -74,73 +143,147 @@ export default {
|
||||
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
if(scene && pointLayer){
|
||||
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 = ""
|
||||
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 {
|
||||
console.log(item.leq >= 65.6)
|
||||
}
|
||||
})
|
||||
// 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
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)
|
||||
}
|
||||
getPlaceGis(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(cityLayer){
|
||||
cityLayer.destroy()
|
||||
scene.removeLayer(cityLayer)
|
||||
}
|
||||
pointLayer = new PointLayer({})
|
||||
.source(res.data.data, {
|
||||
parser: {
|
||||
type: "json",
|
||||
x: "placeLng",
|
||||
y: "placeLat",
|
||||
},
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.placeName}`)
|
||||
})
|
||||
.shape('square').size(10)
|
||||
// .size("leq", acid (level) {
|
||||
// return [4, 4, level];
|
||||
// })
|
||||
.active(true)
|
||||
.color("leq", () => {
|
||||
// const { timeSlot } = this.where;
|
||||
// const color =
|
||||
// timeSlot == "昼"
|
||||
// ? leq > 70
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2"
|
||||
// : leq > 65
|
||||
// ? "#f5222d"
|
||||
// : "#13c2c2";
|
||||
return "#13c2c2";
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
pointLayer.on("mousemove", (e) => {
|
||||
const popup = new Popup({
|
||||
offsets: [0, 0],
|
||||
closeButton: false,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(
|
||||
`<p>点位名称: ${e.feature.placeName}</p><p>点位等级: ${e.feature.regionLevel}</p><p>网格边长: ${e.feature.gridLength}</p><p>所属路段: ${e.feature.road}</p><p>噪声: ${e.feature.leq}dB(A)</p>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
// scene.setPitch(48);
|
||||
scene.render()
|
||||
that.addMarker()
|
||||
}
|
||||
});
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
@@ -151,21 +294,87 @@ html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
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>
|
||||
|
||||
|
||||
56
src/views/visualiz/water/drInking/components/mapNominal.vue
Normal file
56
src/views/visualiz/water/drInking/components/mapNominal.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.common}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.desc}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
93
src/views/visualiz/water/drInking/components/mapTable.vue
Normal file
93
src/views/visualiz/water/drInking/components/mapTable.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '级别',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'waterSourceProperty',
|
||||
},
|
||||
{
|
||||
title: '水质类别',
|
||||
dataIndex: 'waterType',
|
||||
},
|
||||
{
|
||||
title: 'PH',
|
||||
dataIndex: 'ph',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
87
src/views/visualiz/water/drInking/components/tipTool.vue
Normal file
87
src/views/visualiz/water/drInking/components/tipTool.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{ data.place }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
级别 {{ data.regionLevel }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
来源 {{ data.waterSourceProperty }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
水质类别 {{ data.waterType }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
PH {{ data.ph }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default: 30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
435
src/views/visualiz/water/drInking/index.vue
Normal file
435
src/views/visualiz/water/drInking/index.vue
Normal file
@@ -0,0 +1,435 @@
|
||||
<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" v-model:value="where.year">
|
||||
<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="regionLevel">
|
||||
<a-radio-button value="城市">城市</a-radio-button>
|
||||
<a-radio-button value="区县">区县</a-radio-button>
|
||||
<a-radio-button value="农村">农村</a-radio-button>
|
||||
</a-radio-group>
|
||||
</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"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
waterCity,
|
||||
waterCounty,
|
||||
waterVillage
|
||||
} from "@/api/gis/gisApi";
|
||||
import {
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/atmosphere/acid-rain-plcae";
|
||||
|
||||
import tipTool from "./components/tipTool";
|
||||
import mapNominal from "./components/mapNominal";
|
||||
import mapTable from "./components/mapTable";
|
||||
// import mapTableCenter from "./components/mapTableCenter";
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
year: "",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 12,
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1,
|
||||
regionLevel: "城市",
|
||||
nominalList: [{
|
||||
"text": "I类",
|
||||
"color": "#80BC1C",
|
||||
"common": "I",
|
||||
"desc": "一类"
|
||||
}, {
|
||||
"text": "II类",
|
||||
"color": "#BBD769",
|
||||
"common": "Ⅱ",
|
||||
"desc": "二类"
|
||||
}, {
|
||||
"text": "III类",
|
||||
"color": "#F7E020",
|
||||
"common": "Ⅲ",
|
||||
"desc": "三类"
|
||||
}, {
|
||||
"text": "IV类",
|
||||
"color": "#DF9913",
|
||||
"common": "Ⅳ",
|
||||
"desc": "四类"
|
||||
}, {
|
||||
"text": "V类",
|
||||
"color": "#E57813",
|
||||
"common": "Ⅴ",
|
||||
"desc": "五类"
|
||||
}, {
|
||||
"text": "劣V类",
|
||||
"color": "#DA251C",
|
||||
"common": "劣Ⅴ",
|
||||
"desc": "劣五类"
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), 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("year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.year = res.data.data[0];
|
||||
this.whereChange({target: {value: "城市"}});
|
||||
}
|
||||
})
|
||||
},
|
||||
addMarker: function () { // 创建图标对象
|
||||
//定义自定义覆盖物的构造函数
|
||||
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 = "#9a9a9a"
|
||||
that.nominalList.forEach((it, ins) => {
|
||||
if (item.waterType == it.common) {
|
||||
color = that.nominalList[ins]['color']
|
||||
return false
|
||||
}
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
that.currentX = e.pageX - calcWidth
|
||||
that.currentY = e.pageY - 80
|
||||
},true)
|
||||
|
||||
myCompOverlay.addEventListener('mouseout', function () {
|
||||
setTimeout(() => {
|
||||
}, 300)
|
||||
that.currentX = 30000
|
||||
that.currentY = 0
|
||||
that.tipFlag = false
|
||||
},true)
|
||||
})
|
||||
},
|
||||
whereChange(e) {
|
||||
that.map.clearOverlays();
|
||||
let type = e ? e.target.value : "城市"
|
||||
if (type == "城市") {
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
|
||||
waterCity(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (type == "区县") {
|
||||
that.zoom = 9
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
waterCounty(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (type == "农村") {
|
||||
that.zoom = 11
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
waterVillage(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-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);
|
||||
}
|
||||
|
||||
|
||||
.radar-box {
|
||||
position: absolute;
|
||||
|
||||
.radar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radar .ripple {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
.radar :nth-child(1) {
|
||||
animation-delay: 0.666s;
|
||||
}
|
||||
|
||||
.radar :nth-child(2) {
|
||||
animation-delay: 1.322s;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.animation_check {
|
||||
animation: myfirst 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
0% {
|
||||
top: 0px
|
||||
}
|
||||
25% {
|
||||
top: 5px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
75% {
|
||||
top: -5px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/views/visualiz/water/lake/components/mapNominal.vue
Normal file
56
src/views/visualiz/water/lake/components/mapNominal.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{ item.text }}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<!-- <div class="map-nominal-container-inner-text">{{item.data}}</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props: {
|
||||
param: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
90
src/views/visualiz/water/lake/components/mapTable.vue
Normal file
90
src/views/visualiz/water/lake/components/mapTable.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="湖库数据" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'placeName',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '水质',
|
||||
dataIndex: 'waterType',
|
||||
},
|
||||
{
|
||||
title: 'ph',
|
||||
dataIndex: 'ph',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
93
src/views/visualiz/water/lake/components/mapTableCenter.vue
Normal file
93
src/views/visualiz/water/lake/components/mapTableCenter.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="湖库点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
84
src/views/visualiz/water/lake/components/tipTool.vue
Normal file
84
src/views/visualiz/water/lake/components/tipTool.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-top">
|
||||
点位名称 {{ data.placeName}}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
点位级别 {{data.regionLevel }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
水质 {{ data.waterType }}
|
||||
</div>
|
||||
<div class="tip-tool-container-text">
|
||||
PH {{ data.ph }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default: 30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
471
src/views/visualiz/water/lake/index.vue
Normal file
471
src/views/visualiz/water/lake/index.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<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" v-model:value="where.year">
|
||||
<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.type">
|
||||
<a-radio-button value="0">城市内湖</a-radio-button>
|
||||
<a-radio-button value="1">专项湖区</a-radio-button>
|
||||
</a-radio-group>
|
||||
</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"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getLakePlace,
|
||||
getLakePlaceInnerCity,
|
||||
getLakeYear,
|
||||
getInnerLakeYear
|
||||
} from "@/api/gis/gisApi";
|
||||
// import {
|
||||
// getColumnOptions,
|
||||
// } from "@/api/ecology/atmosphere/acid-rain-plcae";
|
||||
|
||||
import tipTool from "./components/tipTool";
|
||||
import mapNominal from "./components/mapNominal";
|
||||
import mapTable from "./components/mapTable";
|
||||
// import mapTableCenter from "./components/mapTableCenter";
|
||||
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
type: "0",
|
||||
year: "",
|
||||
filter: ["ph", "transparency", "dissolvedOxygenSaturation", "dissolvedOxygen", "permanganateIndex", "fiveDayBod", "totalNitrogen", "ammonia", "volatilePhenol", "as", "hg", "cr6", "pb", "cd", "totalPhosphorus", "petro", "fecalColiforms", "cod", "chlA", "anSaa", "s", "oxidationReductionPotential"]
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
nominalList: [{
|
||||
"text": "I类",
|
||||
"color": "#80BC1C",
|
||||
"common": "I"
|
||||
}, {
|
||||
"text": "II类",
|
||||
"color": "#BBD769",
|
||||
"common": "II"
|
||||
}, {
|
||||
"text": "III类",
|
||||
"color": "#F7E020",
|
||||
"common": "III"
|
||||
}, {
|
||||
"text": "IV类",
|
||||
"color": "#DF9913",
|
||||
"common": "IV"
|
||||
}, {
|
||||
"text": "V类",
|
||||
"color": "#E57813",
|
||||
"common": "V"
|
||||
}, {
|
||||
"text": "劣V类",
|
||||
"color": "#DA251C",
|
||||
"common": "劣V"
|
||||
}],
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), 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();
|
||||
|
||||
if (that.where.type == 1) {
|
||||
getLakeYear().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.years.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.year = res.data.data.years[0];
|
||||
this.whereChange();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
getInnerLakeYear().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.years.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.year = res.data.data.years[0];
|
||||
this.whereChange();
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
addMarker: function () { // 创建图标对象
|
||||
//定义自定义覆盖物的构造函数
|
||||
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 = ""
|
||||
that.nominalList.forEach((it, ins) => {
|
||||
if (item.waterType >= it.common) {
|
||||
color = that.nominalList[ins]['color']
|
||||
return false
|
||||
}
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
that.currentX = e.pageX - calcWidth
|
||||
that.currentY = e.pageY - 80
|
||||
},true)
|
||||
|
||||
myCompOverlay.addEventListener('mouseout', function () {
|
||||
setTimeout(() => {
|
||||
}, 300)
|
||||
that.currentX = 30000
|
||||
that.currentY = 0
|
||||
that.tipFlag = false
|
||||
},true)
|
||||
})
|
||||
},
|
||||
whereChange(e) {
|
||||
if (typeof (e) == "object") {
|
||||
if (e.target.name == "area") {
|
||||
that.where.type = e.target.value
|
||||
if (that.where.type == "1") {
|
||||
that.zoom = 9
|
||||
} else {
|
||||
that.zoom = 13
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (e > 0) {
|
||||
that.where.year = e
|
||||
}
|
||||
}
|
||||
that.map.clearOverlays();
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
|
||||
if (scene && pointLayer) {
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
|
||||
|
||||
if (that.where.type == 1) {
|
||||
getLakePlace(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
let tem_arr = []
|
||||
if (that.pointData.length > 0) {
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.lakeLibraryName}`)
|
||||
tem_arr.push({ // 整合字段
|
||||
'placeName': item.lakeLibraryName,
|
||||
'attributes': item.controlAttributes,
|
||||
'ph': item.ph,
|
||||
'regionLevel': item.regionLevel,
|
||||
'longitude': item.longitude,
|
||||
'latitude': item.latitude,
|
||||
'waterType' : item.waterType
|
||||
})
|
||||
})
|
||||
}
|
||||
that.pointData = tem_arr
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
getLakePlaceInnerCity(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
let tem_arr = []
|
||||
if (that.pointData.length > 0) {
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.pointName}`)
|
||||
tem_arr.push({
|
||||
'placeName': item.pointName,
|
||||
'attributes': item.controlAttributes,
|
||||
'ph': item.ph,
|
||||
'regionLevel': item.regionLevel,
|
||||
'longitude': item.longitude,
|
||||
'latitude': item.latitude,
|
||||
'waterType' : item.waterType
|
||||
})
|
||||
})
|
||||
}
|
||||
that.pointData = tem_arr
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-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);
|
||||
}
|
||||
|
||||
|
||||
.radar-box {
|
||||
position: absolute;
|
||||
|
||||
.radar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radar .ripple {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
.radar :nth-child(1) {
|
||||
animation-delay: 0.666s;
|
||||
}
|
||||
|
||||
.radar :nth-child(2) {
|
||||
animation-delay: 1.322s;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.animation_check {
|
||||
animation: myfirst 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
0% {
|
||||
top: 0px
|
||||
}
|
||||
25% {
|
||||
top: 5px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
75% {
|
||||
top: -5px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/views/visualiz/water/river/components/mapNominal.vue
Normal file
56
src/views/visualiz/water/river/components/mapNominal.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="map-nominal-container">
|
||||
<div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
|
||||
<div class="map-nominal-container-inner-text">{{item.text}}</div>
|
||||
<div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
|
||||
<div class="map-nominal-container-inner-text">{{item.data}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mapNominal",
|
||||
props:{
|
||||
param:{
|
||||
type:Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-nominal-container {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-text {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner-label {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.map-nominal-container-inner {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 3px;
|
||||
}
|
||||
</style>
|
||||
73
src/views/visualiz/water/river/components/mapTable.vue
Normal file
73
src/views/visualiz/water/river/components/mapTable.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
},
|
||||
columns:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
93
src/views/visualiz/water/river/components/mapTableCenter.vue
Normal file
93
src/views/visualiz/water/river/components/mapTableCenter.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
||||
<a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
|
||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
|
||||
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
||||
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||
style="width: 30px;height: 30px">
|
||||
</div>
|
||||
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '点位名称',
|
||||
dataIndex: 'place',
|
||||
},
|
||||
{
|
||||
title: '点位等级',
|
||||
className: 'regionLevel',
|
||||
dataIndex: 'regionLevel',
|
||||
},
|
||||
{
|
||||
title: '所属地区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
},
|
||||
{
|
||||
title: '噪声 dB(A)',
|
||||
dataIndex: 'leq',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTable: function (type) {
|
||||
this.type1 = type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
pagination: {
|
||||
total: 0
|
||||
},
|
||||
type1: 0
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-table-container {
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 300px;
|
||||
transition: right 0.8s;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
.left-close-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
78
src/views/visualiz/water/river/components/tipTool.vue
Normal file
78
src/views/visualiz/water/river/components/tipTool.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div id="tip-tool-container" class="tip-tool-container"
|
||||
:style="{'top':`${currentY}px`,'left':`${currentX}px`}">
|
||||
<div class="tip-tool-container-text" v-for="(item,index) in columns" :key="index">
|
||||
{{item.title}} {{data[item.dataIndex]}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
x: {
|
||||
type: Number,
|
||||
default:30000
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data:{
|
||||
type:Object
|
||||
},
|
||||
columns:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
x(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolWidth = tipToolInfo.offsetWidth
|
||||
this.currentX = val - tipToolWidth / 2
|
||||
},
|
||||
y(val) {
|
||||
let tipToolInfo = document.getElementById("tip-tool-container")
|
||||
let tipToolHeight = tipToolInfo.offsetHeight
|
||||
this.currentY = val - tipToolHeight
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentX: 30000,
|
||||
currentY: 0,
|
||||
currentFlag: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tip-tool-container {
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tip-tool-container-top {
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
text-align: left;
|
||||
}
|
||||
.tip-tool-container-text {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
524
src/views/visualiz/water/river/index.vue
Normal file
524
src/views/visualiz/water/river/index.vue
Normal file
@@ -0,0 +1,524 @@
|
||||
<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" v-model:value="where.year"
|
||||
style="width: 100px">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-select @change="selectMonth" :default-value="where.month+'月'"
|
||||
v-if="currentRequestCata == '1' ||currentRequestCata == '2' "
|
||||
style="width: 100px">
|
||||
<a-select-option v-for="(item,index) in 12" :key="index">
|
||||
{{ index + 1 }}月
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-radio-group @change="changeCate" :default-value="currentRequestCata">
|
||||
<a-radio-button value="0">江河水质</a-radio-button>
|
||||
<a-radio-button value="1">水功能</a-radio-button>
|
||||
<a-radio-button value="2">水站</a-radio-button>
|
||||
</a-radio-group>
|
||||
|
||||
<a-select style="width: 200px;" v-if="currentRequestCata == '1'" @change="changeText" name="waterCate"
|
||||
:default-value="currentCate">
|
||||
<a-select-option v-for="(item,index) in waterCate" :key="index">
|
||||
{{ item }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</a-space>
|
||||
</a-card>
|
||||
|
||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||
<tip-tool :columns="columns" :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||
<mapNominal :param="nominalList"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :columns="columns" :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
river, national, waterStation, autonomous
|
||||
} from "@/api/gis/gisApi";
|
||||
import {
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/atmosphere/acid-rain-plcae";
|
||||
|
||||
import tipTool from "./components/tipTool";
|
||||
import mapNominal from "./components/mapNominal";
|
||||
import mapTable from "./components/mapTable";
|
||||
// import mapTableCenter from "./components/mapTableCenter";
|
||||
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
name: "",
|
||||
year: "",
|
||||
month: "1"
|
||||
},
|
||||
waterCate: ["国家水功能区", "自治区水功能区"],
|
||||
currentCate: "国家水功能区",
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1,
|
||||
currentRequestCata: "0",
|
||||
columns: [],
|
||||
columns0: [
|
||||
{
|
||||
title: "站点名称",
|
||||
dataIndex: 'sectionName'
|
||||
},
|
||||
{
|
||||
title: '流域',
|
||||
dataIndex: 'basin',
|
||||
},
|
||||
{
|
||||
title: '城市',
|
||||
dataIndex: 'city',
|
||||
},
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'waterQualityCategory',
|
||||
},
|
||||
{
|
||||
title: '河流级别',
|
||||
dataIndex: 'riverLevel',
|
||||
}
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
title: '水站名称',
|
||||
dataIndex: 'stationName',
|
||||
},
|
||||
{
|
||||
title: '河流名称',
|
||||
dataIndex: 'riverName',
|
||||
},
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'waterQualityCategory',
|
||||
}
|
||||
],
|
||||
nominalList: [{
|
||||
"text": "I类",
|
||||
"color": "#80BC1C",
|
||||
"common": "Ⅰ",
|
||||
"desc": "一类"
|
||||
}, {
|
||||
"text": "II类",
|
||||
"color": "#BBD769",
|
||||
"common": "Ⅱ",
|
||||
"desc": "二类"
|
||||
}, {
|
||||
"text": "III类",
|
||||
"color": "#F7E020",
|
||||
"common": "Ⅲ",
|
||||
"desc": "三类"
|
||||
}, {
|
||||
"text": "IV类",
|
||||
"color": "#DF9913",
|
||||
"common": "Ⅳ",
|
||||
"desc": "四类"
|
||||
}, {
|
||||
"text": "V类",
|
||||
"color": "#E57813",
|
||||
"common": "Ⅴ",
|
||||
"desc": "五类"
|
||||
}, {
|
||||
"text": "劣V类",
|
||||
"color": "#DA251C",
|
||||
"common": "劣Ⅴ",
|
||||
"desc": "劣五类"
|
||||
}],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
selectMonth: function (e) {
|
||||
that.where.month = e + 1
|
||||
that.requestFun()
|
||||
},
|
||||
changeText: function (e) {
|
||||
that.currentCate = that.waterCate[e]
|
||||
that.requestFun()
|
||||
},
|
||||
changeCate: function (e) {
|
||||
that.currentRequestCata = e.target.value
|
||||
that.requestFun()
|
||||
},
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), 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("year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.year = res.data.data[0];
|
||||
that.requestFun()
|
||||
}
|
||||
})
|
||||
},
|
||||
addMarker: function () { // 创建图标对象
|
||||
//定义自定义覆盖物的构造函数
|
||||
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 = ""
|
||||
that.nominalList.forEach((it, ins) => {
|
||||
if (that.currentRequestCata == 0) {
|
||||
if (item.waterQualityCategory == it.common) {
|
||||
color = that.nominalList[ins]['color']
|
||||
}
|
||||
} else {
|
||||
if (item.waterQualityCategory == it.desc) {
|
||||
color = that.nominalList[ins]['color']
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(Number(item.longitude), Number(item.latitude)), 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
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
that.currentX = e.pageX - calcWidth
|
||||
that.currentY = e.pageY - 80
|
||||
}, true)
|
||||
|
||||
myCompOverlay.addEventListener('mouseout', function () {
|
||||
setTimeout(() => {
|
||||
}, 300)
|
||||
that.currentX = 30000
|
||||
that.currentY = 0
|
||||
that.tipFlag = false
|
||||
}, true)
|
||||
})
|
||||
},
|
||||
whereChange(e) {
|
||||
that.where.year = e
|
||||
that.requestFun()
|
||||
},
|
||||
requestFun: function () {
|
||||
that.map.clearOverlays();
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), 8); // 初始化地图,设置中心点坐标和地图级别
|
||||
|
||||
if (that.currentRequestCata == 0) { // 江河水质
|
||||
that.columns = that.columns0
|
||||
|
||||
river(that.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.sectionName}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
if (that.currentRequestCata == 1) {
|
||||
if (that.currentCate == "国家水功能区") {
|
||||
national(that.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
if(that.currentRequestCata == 2) {
|
||||
autonomous(that.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.riverName}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
if (that.currentRequestCata == 2) {
|
||||
that.columns = that.columns2
|
||||
waterStation(that.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
::-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);
|
||||
}
|
||||
|
||||
|
||||
.radar-box {
|
||||
position: absolute;
|
||||
|
||||
.radar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radar .ripple {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
.radar :nth-child(1) {
|
||||
animation-delay: 0.666s;
|
||||
}
|
||||
|
||||
.radar :nth-child(2) {
|
||||
animation-delay: 1.322s;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.animation_check {
|
||||
animation: myfirst 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
0% {
|
||||
top: 0px
|
||||
}
|
||||
25% {
|
||||
top: 5px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
75% {
|
||||
top: -5px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user