大更新

2021-11-04 22:30:40 +08:00
parent e3b8cafdac
commit 18f4bd8a4d
45 changed files with 1447 additions and 16807 deletions
--- a/src/views/visualiz/sound/zone/index.vue
+++ b/src/views/visualiz/sound/zone/index.vue
@@ -0,0 +1,171 @@
+<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.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-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, Popup } from "@antv/l7";
+import { GaodeMap } from "@antv/l7-maps";
+import {
+  getPlaceGis,
+  getColumnOptions,
+} from "@/api/ecology/noise/zone-sound";
+let scene = null;
+let pointLayer = null;
+let cityLayer = null;
+export default {
+  data() {
+    return {
+      yearOptions: [],
+      where: {
+        timeSlot: "昼",
+        regionLevel: "市级",
+        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(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",
+                },
+              })
+              .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()
+          }
+        });
+    },
+    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>