gis,酸雨
This commit is contained in:
weicw
223
src/views/visualiz/sound/function/index.vue
Normal file
223
src/views/visualiz/sound/function/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<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-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.type">
|
||||
<a-radio-button value="place"> 点位 </a-radio-button>
|
||||
<a-radio-button value="area"> 城区 </a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group @change="whereChange" 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>
|
||||
</template>
|
||||
<script>
|
||||
// import axios from "axios";
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
// import { DrawControl } from '@antv/l7-draw';
|
||||
import { CityLayer } from "@antv/l7-district";
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getGisBase,
|
||||
getGisArea,
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/function-sound";
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
type: "area",
|
||||
monitorYear: "选择年份",
|
||||
},
|
||||
};
|
||||
},
|
||||
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, {
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
getColumnOptions("monitor_year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
if (this.where.type == "place") {
|
||||
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("cylinder")
|
||||
.size("leq", function (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(
|
||||
`<span>${e.feature.place}: ${e.feature.leq}dB(A)</span>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
scene.setPitch(48);
|
||||
scene.render()
|
||||
}
|
||||
});
|
||||
} else {
|
||||
getGisArea(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(pointLayer){
|
||||
pointLayer.destroy()
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
cityLayer = new CityLayer(scene, {
|
||||
data: res.data.data,
|
||||
joinBy: ["adcode", "regionCode"],
|
||||
adcode: ["450000", "450100"],
|
||||
depth: 3,
|
||||
visible: true,
|
||||
label: {
|
||||
field: "NAME_CHN",
|
||||
textAllowOverlap: false,
|
||||
},
|
||||
fill: {
|
||||
color: {
|
||||
field: "leq",
|
||||
values: (leq) => {
|
||||
if(!leq){
|
||||
return
|
||||
}
|
||||
const { timeSlot } = this.where;
|
||||
const color =
|
||||
timeSlot == "昼"
|
||||
? leq > 70
|
||||
? "#f50"
|
||||
: "#2db7f5"
|
||||
: leq > 65
|
||||
? "#f50"
|
||||
: "#2db7f5";
|
||||
return color;
|
||||
},
|
||||
},
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
triggerEvent: "mousemove",
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.leq + "dB(A)" || "无"}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
scene.setPitch(0);
|
||||
// scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.ele-card {
|
||||
z-index: 10;
|
||||
margin: 0 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +1,200 @@
|
||||
<template>
|
||||
<div>
|
||||
<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-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.type">
|
||||
<a-radio-button value="place"> 点位 </a-radio-button>
|
||||
<a-radio-button value="area"> 城区 </a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group @change="whereChange" 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>
|
||||
</template>
|
||||
<script>
|
||||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
// import axios from "axios";
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
// import { DrawControl } from '@antv/l7-draw';
|
||||
import { CityLayer } from "@antv/l7-district";
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getGisBase,
|
||||
getGisArea,
|
||||
getColumnOptions,
|
||||
} from "@/api/ecology/road-sound";
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
yearOptions: [],
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
type: "area",
|
||||
monitorYear: "选择年份",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.435159, 31.256971 ],
|
||||
zoom: 14.89,
|
||||
minZoom: 10
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
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, {
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
getColumnOptions("monitor_year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'circle',
|
||||
'triangle',
|
||||
'square',
|
||||
'pentagon',
|
||||
'hexagon',
|
||||
'octogon',
|
||||
'hexagram',
|
||||
'rhombus',
|
||||
'vesica'
|
||||
])
|
||||
.size('unit_price', [ 10, 25 ])
|
||||
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 2
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
if (this.where.type == "place") {
|
||||
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("cylinder")
|
||||
.size("leq", function (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(
|
||||
`<span>${e.feature.place}: ${e.feature.leq}dB(A)</span>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
scene.setPitch(48);
|
||||
scene.render()
|
||||
}
|
||||
});
|
||||
} else {
|
||||
getGisArea(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(pointLayer){
|
||||
pointLayer.destroy()
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
cityLayer = new CityLayer(scene, {
|
||||
data: res.data.data,
|
||||
joinBy: ["adcode", "regionCode"],
|
||||
adcode: ["450000", "450100"],
|
||||
depth: 3,
|
||||
visible: true,
|
||||
label: {
|
||||
field: "NAME_CHN",
|
||||
textAllowOverlap: false,
|
||||
},
|
||||
fill: {
|
||||
color: {
|
||||
field: "leq",
|
||||
values: (leq) => {
|
||||
if(!leq){
|
||||
return
|
||||
}
|
||||
const { timeSlot } = this.where;
|
||||
const color =
|
||||
timeSlot == "昼"
|
||||
? leq > 70
|
||||
? "#f50"
|
||||
: "#2db7f5"
|
||||
: leq > 65
|
||||
? "#f50"
|
||||
: "#2db7f5";
|
||||
return color;
|
||||
},
|
||||
},
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
triggerEvent: "mousemove",
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.leq + "dB(A)" || "无"}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
scene.setPitch(0);
|
||||
// scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -68,7 +204,16 @@ body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.ele-card {
|
||||
z-index: 10;
|
||||
margin: 0 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user