大更新

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(){