昼
@@ -25,11 +31,9 @@
// 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,
+ getPlaceGis,
getColumnOptions,
} from "@/api/ecology/noise/function-sound";
let scene = null;
@@ -41,7 +45,8 @@ export default {
yearOptions: [],
where: {
timeSlot: "昼",
- type: "area",
+ regionLevel: "市级",
+ quarter: undefined,
monitorYear: "选择年份",
},
};
@@ -82,37 +87,39 @@ export default {
},
setPlaceData() {},
whereChange() {
- if (this.where.type == "place") {
- getGisBase(this.where).then((res) => {
+ if(scene && pointLayer){
+ scene.removeLayer(pointLayer)
+ }
+ getPlaceGis(this.where).then((res) => {
if (res.data.code == 0) {
- if(cityLayer){
- cityLayer.destroy()
- scene.removeLayer(cityLayer)
- }
+ if(cityLayer){
+ cityLayer.destroy()
+ scene.removeLayer(cityLayer)
+ }
pointLayer = new PointLayer({})
.source(res.data.data, {
parser: {
type: "json",
- x: "lng",
- y: "lat",
+ x: "placeLng",
+ y: "placeLat",
},
})
- .shape("cylinder")
- .size("leq", function (level) {
- return [4, 4, level];
- })
+ .shape('triangle').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;
+ .color("leq", () => {
+ // const { timeSlot } = this.where;
+ // const color =
+ // timeSlot == "昼"
+ // ? leq > 70
+ // ? "#f5222d"
+ // : "#13c2c2"
+ // : leq > 65
+ // ? "#f5222d"
+ // : "#13c2c2";
+ return "#13c2c2";
})
.style({
opacity: 1,
@@ -124,67 +131,18 @@ export default {
})
.setLnglat(e.lngLat)
.setHTML(
- `${e.feature.place}: ${e.feature.leq}dB(A)`
+ `点位名称: ${e.feature.placeName}
点位等级: ${e.feature.regionLevel}
功能区代码: ${e.feature.functionCode}
所属路段: ${e.feature.road}
噪声: ${e.feature.leq}dB(A)
`
);
scene.addPopup(popup);
});
pointLayer.setData(res.data.data);
scene.addLayer(pointLayer);
scene.setZoomAndCenter(12, [108.33, 22.84]);
- scene.setPitch(48);
+ // 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 `${props.NAME_CHN}:${props.leq + "dB(A)" || "无"}`;
- },
- },
- });
- scene.setPitch(0);
- // scene.setZoomAndCenter(12, [108.33, 22.84]);
- }
- });
- }
+
},
getAreaData() {},
exportMap(){
diff --git a/src/views/visualiz/sound/road/index.vue b/src/views/visualiz/sound/road/index.vue
index b4a93a8..57f185f 100644
--- a/src/views/visualiz/sound/road/index.vue
+++ b/src/views/visualiz/sound/road/index.vue
@@ -7,9 +7,9 @@
item.label
}}
-
- 点位
- 城区
+
+ 市级
+ 县级
昼
@@ -25,11 +25,9 @@
// 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/noise/road-sound";
let scene = null;
@@ -41,7 +39,7 @@ export default {
yearOptions: [],
where: {
timeSlot: "昼",
- type: "area",
+ regionLevel: "市级",
monitorYear: "选择年份",
},
};
@@ -82,7 +80,10 @@ export default {
},
setPlaceData() {},
whereChange() {
- if (this.where.type == "place") {
+
+ if(scene && pointLayer){
+ scene.removeLayer(pointLayer)
+ }
getGisBase(this.where).then((res) => {
if (res.data.code == 0) {
if(cityLayer){
@@ -97,10 +98,10 @@ export default {
y: "lat",
},
})
- .shape("cylinder")
- .size("leq", function (level) {
- return [4, 4, level];
- })
+ .shape('hexagon').size(10)
+ // .size("leq", acid (level) {
+ // return [4, 4, level];
+ // })
.active(true)
.color("leq", (leq) => {
const { timeSlot } = this.where;
@@ -124,67 +125,18 @@ export default {
})
.setLnglat(e.lngLat)
.setHTML(
- `${e.feature.place}: ${e.feature.leq}dB(A)`
+ `点位名称: ${e.feature.place}
点位等级: ${e.feature.regionLevel}
所属城区: ${e.feature.area}
所属路段: ${e.feature.road}
噪声: ${e.feature.leq}dB(A)
`
);
scene.addPopup(popup);
});
pointLayer.setData(res.data.data);
scene.addLayer(pointLayer);
scene.setZoomAndCenter(12, [108.33, 22.84]);
- scene.setPitch(48);
+ // 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 `${props.NAME_CHN}:${props.leq + "dB(A)" || "无"}`;
- },
- },
- });
- scene.setPitch(0);
- // scene.setZoomAndCenter(12, [108.33, 22.84]);
- }
- });
- }
+
},
getAreaData() {},
exportMap(){
diff --git a/src/views/visualiz/sound/zone/index.vue b/src/views/visualiz/sound/zone/index.vue
new file mode 100644
index 0000000..1fe7280
--- /dev/null
+++ b/src/views/visualiz/sound/zone/index.vue
@@ -0,0 +1,171 @@
+
+
+
+
+
+ {{
+ item.label
+ }}
+
+
+ 市级
+ 县级
+
+
+ 昼
+ 夜
+
+
+
+
+
+