jczxw-java/src/views/visualiz/sound/road/index.vue

<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/road-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>