大更新

src/views/visualiz/sound/function/index.vue

@@ -4,12 +4,18 @@
       <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>
+              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-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>
         <a-radio-group @change="whereChange" v-model:value="where.timeSlot">
           <a-radio-button value="昼">昼</a-radio-button>
@@ -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(
-                  `<span>${e.feature.place}: ${e.feature.leq}dB(A)</span>`
+                  `<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.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(){

src/views/visualiz/sound/road/index.vue

@@ -7,9 +7,9 @@
             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 @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>
@@ -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(
-                  `<span>${e.feature.place}: ${e.feature.leq}dB(A)</span>`
+                  `<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.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(){

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>