gis模块

public/index.html

@@ -19,4 +19,5 @@
     </div>
     <!-- built files will be auto injected -->
   </body>
+  <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=8gUIvdkXH5aACPaQZcVTLIZbglppPOkh"></script>
 </html>

src/api/gis/gisApi.js

@@ -0,0 +1,68 @@
+import axios from 'axios';
+
+const getLakePlace = function (data) { // 专项湖库
+  return axios.post("/lakeLibrary/lakeLibrarySpecial/gis", data)
+}
+
+const getLakePlaceInnerCity = function (data) { // 专项湖库
+  return axios.post("/lakeLibrary/lakeLibraryInnerCity/gis", data)
+}
+
+const getAirGis = function (data) {
+  return axios.get(`/ambientAir/ambientAir/gis/place?regionLevel=${data.regionLevel}&year=${data.year}`)
+}
+
+//lakeLibrary/lakeSpecialDict/getYear
+
+//lakeLibrary/lakeSpecialDict/getYear
+const getLakeYear = function () { // 专项湖库年份
+  return axios.get("/lakeLibrary/lakeSpecialDict/getYear")
+}
+
+// lakeLibrary/lakeCityDict/getYear
+const getInnerLakeYear = function () { // 城市内湖年份
+  return axios.get("/lakeLibrary/lakeCityDict/getYear")
+}
+
+const autonomous = function (data) { // 自治区水功能区数据查询
+  return axios.post("/water/visualiz/autonomous", data)
+}
+
+const national = function (data) { // 国家水功能区数据查询
+  return axios.post("/water/visualiz/national", data)
+}
+
+const river = function (data) { // 江河水质数据查询
+  return axios.post("/water/visualiz/river", data)
+}
+
+const waterStation = function (data) { // 水站数据查询
+  return axios.post("/water/visualiz/waterStation", data)
+}
+
+const waterCity = function (data) { // 城市
+  return axios.post("/drinkingWater/drinkingWater/cityGis", data)
+}
+
+const waterCounty = function (data) { // 区县
+  return axios.post("/drinkingWater/drinkingWater/countyGis", data)
+}
+
+const waterVillage = function (data) { // 农村
+  return axios.post("/drinkingWaterVillage/drinkingWaterVillage/villageGis", data)
+}
+
+export {
+  getLakePlace,
+  getAirGis,
+  getLakePlaceInnerCity,
+  getLakeYear,
+  getInnerLakeYear,
+  autonomous, //自治区水功能区数据查询
+  national,
+  river,
+  waterStation,
+  waterCity,
+  waterCounty,
+  waterVillage
+}

src/views/components/BaiduMap.vue

@@ -0,0 +1,78 @@
+<template>
+  <div ref="map" class="map">
+  </div>
+</template>
+
+<script>
+import {RadarOverlay} from './Radar';
+
+export default {
+  data() {
+    return {}
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      // eslint-disable-next-line no-undef
+      const map = new BMap.Map(this.$refs.map);
+      // eslint-disable-next-line no-undef
+      map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
+      // eslint-disable-next-line no-undef
+      const point = new BMap.Point(116.404, 39.915);
+      map.enableScrollWheelZoom(true);
+// 添加自定义覆盖物
+      const radar = new RadarOverlay(point, 40);
+      map.addOverlay(radar);
+    }
+  }
+}
+</script>
+
+<style>
+.map {
+  width: 100vw;
+  height: 100vh;
+}
+
+.radar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: red;
+  position: relative;
+}
+
+.radar .ripple {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid red;
+  animation: ripple 2s linear infinite;
+}
+
+.radar :nth-child(1) {
+  animation-delay: 0.666s;
+}
+
+.radar :nth-child(2) {
+  animation-delay: 1.322s;
+}
+
+@keyframes ripple {
+  to {
+    width: 150px;
+    height: 150px;
+    opacity: 0;
+  }
+}
+
+.radar-box {
+  position: absolute;
+}
+</style>

src/views/components/Radar.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line no-undef
+export class RadarOverlay extends BMap.Overlay {
+  constructor(point, size) {
+    super();
+    this.point = point;
+    this.size = size;
+  }
+
+  initialize(map) {
+    this._map = map;
+    const template = `<div class="radar-box">
+        <div class="radar">
+          <div class="ripple"></div>
+          <div class="ripple"></div>
+          <div class="ripple"></div>
+        </div>
+      </div>`;
+    const divFragment = document.createRange().createContextualFragment(template);
+    const div = divFragment.querySelectorAll('.radar-box')[0];
+    map.getPanes().markerPane.appendChild(div);
+    this._div = div;
+    return div;
+  }
+
+  draw() {
+    // 根据地理坐标转换为像素坐标，并设置给容器
+    const position = this._map.pointToOverlayPixel(this.point);
+    this._div.style.left = `${position.x - this.size / 2}px`;
+    this._div.style.top = `${position.y - this.size / 2}px`;
+  }
+}

src/views/components/gisMap.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="ele-body" style="width: 100%;height: 100%">
+    <!--    <a-space>-->
+
+    <!--      <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"-->
+    <!--                       placeholder="请输入需要搜索的点位">-->
+    <!--      </a-auto-complete>-->
+
+    <!--      <a-select @change="whereChange" name="year" 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" name="area" 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" name="day" v-model:value="where.timeSlot">-->
+    <!--        <a-radio-button value="昼">昼</a-radio-button>-->
+    <!--        <a-radio-button value="夜">夜</a-radio-button>-->
+    <!--      </a-radio-group>-->
+    <!--    </a-space>-->
+    <div id="map" ref="map">
+      <!--    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>-->
+    </div>
+  </div>
+</template>
+
+<script>
+var that
+// import tipTool from "@/views/components/tipToolPlace";
+// import mapNominal from "@/views/components/mapNominalPlace";
+// import mapTable from "@/views/components/mapTablePlace";
+// import mapTableCenter from "@/views/components/mapTableCenterPlace";
+
+export default {
+  name: "gisMap",
+  data() {
+    return {
+      yearOptions: [2020, 2021],
+      arriveCoor: [108.33, 22.84],//坐标点
+      where: {
+        timeSlot: "昼",
+        regionLevel: "市级",
+        monitorYear: "2021",
+      },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 0,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      nominalList: [],
+      points: []//数据准备
+    }
+  },
+  mounted() {
+    that = this
+    that.newInitMap();
+  },
+  methods: {
+    newInitMap: function () {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+    }
+  }
+}
+</script>
+
+<style scoped>
+#map {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
+</style>

src/views/components/mapNominal.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{ item.common }}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{ item.data }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mapNominal",
+  props: {
+    param: {
+      type: Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+}
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/components/mapNominalCate.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner"  v-for="(item,index) in param" v-bind:key="index" @click="pointColor(index)">
+      <div class="map-nominal-container-inner-text">{{item.common}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+<!--      <div class="map-nominal-container-inner-text">{{item.data}}</div>-->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  },
+  methods:{
+    pointColor:function(e){
+      this.$emit("pointColor",e)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/components/mapNominalPlace.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{item.text}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{item.data}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/components/mapNominalZone.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{item.common}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{item.data}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/components/mapTable.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped >
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/components/mapTableCenterPlace.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="功能区噪声" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/components/mapTableCenterZone.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="区域噪声" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/components/mapTablePlace.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'placeName',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '功能区代码',
+    dataIndex: 'functionCode',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/components/mapTableZone.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'placeName',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/views/components/tipTool.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{data.place}}
+    </div>
+    <div class="tip-tool-container-text">
+     点位等级 {{data.regionLevel}}
+    </div>
+    <div class="tip-tool-container-text">
+      所属地区 {{data.area}}
+    </div>
+    <div class="tip-tool-container-text">
+      所属路段 {{data.road}}
+    </div>
+    <div class="tip-tool-container-text">
+      噪声 {{data.leq}} dB(A)
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default:30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data:{
+      type:Object
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped >
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/components/tipToolPlace.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{data.placeName}}
+    </div>
+    <div class="tip-tool-container-text">
+     点位等级 {{data.regionLevel}}
+    </div>
+    <div class="tip-tool-container-text">
+      功能区代码 {{data.functionCode}}
+    </div>
+    <div class="tip-tool-container-text">
+      所属路段 {{data.road}}
+    </div>
+    <div class="tip-tool-container-text">
+      噪声 {{data.leq}} dB(A)
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default:30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data:{
+      type:Object
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/components/tipToolZone.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{ data.placeName }}
+    </div>
+    <div class="tip-tool-container-text">
+      点位等级 {{ data.regionLevel }}
+    </div>
+    <div class="tip-tool-container-text">
+      网格边长 {{ data.gridLength }}
+    </div>
+    <div class="tip-tool-container-text">
+      所属路段 {{ data.road }}
+    </div>
+    <div class="tip-tool-container-text">
+      噪声 {{ data.leq }} dB(A)
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default: 30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    filed: {
+      type: Array
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Object
+    },
+
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/visualiz/atmosphere/acid/components/mapNominal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{item.common}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{item.data}}</div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/visualiz/atmosphere/acid/components/mapTable.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '属性',
+    className: 'attribute',
+    dataIndex: 'attribute',
+  },
+  {
+    title: 'ph',
+    dataIndex: 'ph',
+  }
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+</style>

src/views/visualiz/atmosphere/acid/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="酸雨点位" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/visualiz/atmosphere/acid/components/tipTool.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{data.place}}
+    </div>
+    <div class="tip-tool-container-text">
+     点位编号 {{data.placeCode}}
+    </div>
+    <div class="tip-tool-container-text">
+      点位属性 {{data.attribute}}
+    </div>
+    <div class="tip-tool-container-text">
+      PH {{data.ph}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default:30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data:{
+      type:Object
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/visualiz/atmosphere/acid/index.vue

@@ -2,64 +2,114 @@
   <div class="ele-body">
     <a-card class="ele-card" :bordered="false">
       <a-space>
+
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
         <a-select @change="whereChange" v-model:value="where.year">
           <a-select-option v-for="item in yearOptions" :key="item.value">{{
               item.label
-          }}</a-select-option>
+            }}
+          </a-select-option>
         </a-select>
-        <a-radio-group @change="whereChange" v-model:value="where.regionLevel">
+        <a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
           <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 id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <!--    <mapNominal :param="nominalList"></mapNominal>-->
+<!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
   </div>
 </template>
 <script>
-import { Scene, PointLayer, Popup } from "@antv/l7";
-import { GaodeMap } from "@antv/l7-maps";
 import {
   getPlaceGis,
 } from "@/api/ecology/atmosphere/acid";
 import {
   getColumnOptions,
 } from "@/api/ecology/atmosphere/acid-rain-plcae";
+
+import tipTool from "./components/tipTool";
+// import mapNominal from "./components/mapNominal";
+import mapTable from "./components/mapTable";
+// import mapTableCenter from "./components/mapTableCenter";
+
 let scene = null;
 let pointLayer = null;
-let cityLayer = null;
+var that
+
 export default {
+  components: {
+    tipTool,
+    // mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
   data() {
     return {
       yearOptions: [],
+      arriveCoor: [108.33, 22.84],//坐标点
       where: {
         regionLevel: "市级",
-        year: "选择年份",
+        year: "",
       },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      nominalList: [],
+      points: [],//数据准备
+      dataSource: [],
+      value: '',
+      result: [],
+      searchKey: "",
+      searchId: -1
     };
   },
   mounted() {
-    scene = new Scene({
+    that = this
-      id: "map",
+    this.newInitMap();
-      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() {
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
       getColumnOptions("year").then((res) => {
         if (res.data.code == 0) {
           this.yearOptions = res.data.data.map((item) => {
@@ -68,78 +118,147 @@ export default {
               value: item,
             };
           });
-          this.where.year = res.data.data[res.data.data.length - 1];
+          this.where.year = res.data.data[0];
           this.whereChange();
         }
-      });
+      })
     },
-    setPlaceData() {},
+    addMarker: function () {  // 创建图标对象
-    whereChange() {
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = "#fc4304"
+        // that.nominalList.forEach((it, ins) => {
+        //   if (item.leq >= it.min && item.leq <= it.max) {
+        //     color = that.nominalList[ins]['color']
+        //     return false
+        //   }
+        // })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        },true)
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        },true)
+      })
+    },
+    whereChange(e) {
+      if (typeof (e) == "object") {
+        if (e.target.name == "area") {
+          that.where.regionLevel = e.target.value
+          if (that.where.regionLevel == "county") {
+            that.zoom = 8
+          } else {
+            that.zoom = 13
+          }
+        }
+        // if (e.target.name == "day") {
+        //   that.where.timeSlot = e.target.value
+        // }
+      } else {
+        if (e > 0) {
+          that.where.year = e
+        }
+      }
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+
       if (scene && pointLayer) {
         scene.removeLayer(pointLayer)
       }
       getPlaceGis(this.where).then((res) => {
-          if (res.data.code == 0) {
+        that.pointData = []
-             if(cityLayer){
+        that.dataSource = []
-               cityLayer.destroy()
+        if (res.data.code == 0 && res.data.data.length > 0) {
-               scene.removeLayer(cityLayer)
+          that.pointData = res.data.data
+          that.pointData.forEach(item => {
+            that.dataSource.push(`${item.place}`)
+          })
+          that.addMarker()
         }
-            pointLayer = new PointLayer({})
+      })
-              .source(res.data.data, {
-                parser: {
-                  type: "json",
-                  x: "longitude",
-                  y: "latitude",
     },
-              })
-              .shape('circle').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.place}</p><p>点位编号: ${e.feature.placeCode}</p><p>点位属性: ${e.feature.attribute}</p><p>ph: ${e.feature.ph}</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>
+<style>
 ::-webkit-scrollbar {
   display: none;
 }
@@ -148,21 +267,85 @@ html,
 body {
   overflow: hidden;
   margin: 0;
+  width: 100vw;
+  height: 100vh;
 }
+
 .ele-body {
   position: relative;
-  height: 100%;
   padding: 16px 0;
+  height: 100%;
 }
+
 .ele-card {
   z-index: 10;
   margin: 0 16px;
   display: inline-block;
 }
+
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
 </style>

src/views/visualiz/atmosphere/air/components/mapNominal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{item.common}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{item.data}}</div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/visualiz/atmosphere/air/components/mapTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: "站点名称",
+    dataIndex: 'place'
+  },
+  {
+    title: '类别',
+    dataIndex: 'placeFunctionalAreaCategory',
+  },
+  {
+    title: 'Aqi',
+    dataIndex: 'avgAqi',
+  },
+  {
+    title: '点位级别',
+    dataIndex: 'attributes',
+  }
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/visualiz/atmosphere/air/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="环境空气点位" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/visualiz/atmosphere/air/components/tipTool.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{data.place}}
+    </div>
+    <div class="tip-tool-container-text">
+     点位属性 {{data.attributes}}
+    </div>
+    <div class="tip-tool-container-text">
+      片区名称 {{data.districtName}}
+    </div>
+    <div class="tip-tool-container-text">
+      所属功能区分类 {{data.placeFunctionalAreaCategory}}
+    </div>
+    <div class="tip-tool-container-text">
+      SO2 {{data.avgSo2}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO2 {{data.avgNo2}}
+    </div>
+    <div class="tip-tool-container-text">
+      PM10 {{data.avgPm10}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CO {{data.avgCo}}
+    </div>
+    <div class="tip-tool-container-text">
+      O3 {{data.avgO3}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PM2.5 {{data.avgPm25}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default:30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data:{
+      type:Object
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+
+  &-top {
+    font-size: 18px;
+    font-weight: 550;
+    text-align: left;
+  }
+
+  &-text {
+    font-size: 15px;
+    line-height: 30px;
+    text-align: left;
+  }
+}
+</style>

src/views/visualiz/atmosphere/air/index.vue

@@ -2,65 +2,133 @@
   <div class="ele-body">
     <a-card class="ele-card" :bordered="false">
       <a-space>
-        <a-select @change="whereChange" v-model:value="where.year">
+
-          <a-select-option v-for="item in yearOptions" :key="item.value">{{
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
+        <a-select @change="whereChange" name="year" v-model:value="where.year">
+          <a-select-option v-for="item in yearOptions" :key="item.value">
+            {{
               item.label
-          }}</a-select-option>
+            }}
+          </a-select-option>
         </a-select>
-        <a-radio-group @change="whereChange" v-model:value="where.regionLevel">
+        <a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
           <a-radio-button value="city">市级</a-radio-button>
           <a-radio-button value="county">县级</a-radio-button>
           <a-radio-button value="place">站点</a-radio-button>
         </a-radio-group>
+        <!--        <a-radio-group name="day" 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 id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList"></mapNominal>
+    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
   </div>
 </template>
 <script>
-import { Scene, PointLayer, Popup } from "@antv/l7";
+// import {
-import { GaodeMap } from "@antv/l7-maps";
+//   getGisCountList
+// } from "@/api/ecology/noise/road-sound";
+
 import {
-  getPlaceGis,
+  getAirGis,
-} from "@/api/ecology/atmosphere/air";
+} from "@/api/gis/gisApi";
 import {
   getColumnOptions,
 } from "@/api/ecology/atmosphere/air-plcae";
+
+import tipTool from "./components/tipTool";
+import mapNominal from "./components/mapNominal";
+import mapTable from "./components/mapTable";
+// import mapTableCenter from "./components/mapTableCenter";
+
 let scene = null;
 let pointLayer = null;
-let cityLayer = null;
+var that
+
 export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
   data() {
     return {
       yearOptions: [],
+      arriveCoor: [108.33, 22.84],//坐标点
       where: {
-        regionLevel: "place",
+        // timeSlot: "昼",
-        year: "选择年份",
+        regionLevel: "city",
+        year: "",
       },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      nominalList: [
+        {"text": "一级", "color": "#09952b", "data": "≤ 50.0", "min": "0", "max": "50.0", "common": "优"},
+        {"text": "二级", "color": "#c6c303", "data": "50.1~100.0", "min": "50.1", "max": "100.0", "common": "良"},
+        {"text": "三级", "color": "#ee7606", "data": "100.1~150.0", "min": "100.1", "max": "150.0", "common": "轻度污染"},
+        {"text": "四级", "color": "#f52b07", "data": "150.1~200.0", "min": "150.1", "max": "200.0", "common": "中度污染"},
+        {"text": "五级", "color": "#d50121", "data": "200.1~300.0", "min": "200.1", "max": "300", "common": "重度污染"},
+        {"text": "六级", "color": "#710000", "data": ">=300.1", "min": "300.1", "max": "100000", "common": "严重污染"},
+      ],
+      points: [],//数据准备
+      dataSource: [],
+      value: '',
+      result: [],
+      searchKey: "",
+      searchId: -1
     };
   },
   mounted() {
-    scene = new Scene({
+    that = this
-      id: "map",
+    this.newInitMap();
-      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() {
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
       getColumnOptions("year").then((res) => {
         if (res.data.code == 0) {
           this.yearOptions = res.data.data.map((item) => {
@@ -72,76 +140,146 @@ export default {
           this.where.year = res.data.data[res.data.data.length - 1];
           this.whereChange();
         }
-      });
+      })
     },
-    setPlaceData() {},
+    addMarker: function () {  // 创建图标对象
-    whereChange() {
+      //1、定义构造函数并继承Overlay
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = ""
+        that.nominalList.forEach((it, ins) => {
+          if (Number(item.avgAqi) >= it.min && Number(item.avgAqi) <= it.max) {
+            color = that.nominalList[ins]['color']
+            return false
+          }
+        })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        })
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        })
+      })
+    },
+    whereChange(e) {
+      if (typeof (e) == "object") {
+        if (e.target.name == "area") {
+          that.where.regionLevel = e.target.value
+          if (that.where.regionLevel == "county") {
+            that.zoom = 8
+          } else {
+            that.zoom = 13
+          }
+        }
+        // if (e.target.name == "day") {
+        //   that.where.timeSlot = e.target.value
+        // }
+      } else {
+        if (e > 0) {
+          that.where.year = e
+        }
+      }
+
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+      // GIS
+      // that.getGisCountList()
+
       if (scene && pointLayer) {
         scene.removeLayer(pointLayer)
       }
-        getPlaceGis(this.where).then((res) => {
+      getAirGis(this.where).then((res) => {
-          if (res.data.code == 0) {
+        that.pointData = []
-             if(cityLayer){
+        that.dataSource = []
-               cityLayer.destroy()
+        if (res.data.code == 0 && res.data.data.length > 0) {
-               scene.removeLayer(cityLayer)
+          that.pointData = res.data.data
-             }
+
-            pointLayer = new PointLayer({})
+          that.pointData.forEach(item => {
-              .source(res.data.data, {
+            that.dataSource.push(`${item.place}`)
-                parser: {
-                  type: "json",
-                  x: "longitude",
-                  y: "latitude",
-                },
           })
-              .shape('circle').size(10)
+          that.addMarker()
-              // .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.place}</p><p>点位属性: ${e.feature.attributes}</p><p>片区名称: ${e.feature.districtName}</p><p>所在功能区类别: ${e.feature.placeFunctionalAreaCategory}</p>
-<p>SO2: ${e.feature.avgSo2}    NO2: ${e.feature.avgNo2}</p><p>PM10: ${e.feature.avgPm10}    CO: ${e.feature.avgCo}</p><p>O3: ${e.feature.avgO3}    PM2.5: ${e.feature.avgPm25}</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>
+<style >
 ::-webkit-scrollbar {
   display: none;
 }
@@ -150,21 +288,85 @@ html,
 body {
   overflow: hidden;
   margin: 0;
+  width: 100vw;
+  height: 100vh;
 }
+
 .ele-body {
   position: relative;
-  height: 100%;
   padding: 16px 0;
+  height: 100%;
 }
+
 .ele-card {
   z-index: 10;
   margin: 0 16px;
   display: inline-block;
 }
+
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
 </style>

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

@@ -2,76 +2,175 @@
   <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">{{
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
-              item.label
+                         placeholder="请输入需要搜索的点位">
-            }}</a-select-option>
+        </a-auto-complete>
+
+        <a-select @change="whereChange" name="year" v-model:value="where.monitorYear">
+          <a-select-option v-for="item in yearOptions" :key="item.value">
+            {{ item.label }}
+          </a-select-option>
         </a-select>
-        <a-select v-model:value="where.quarter" placeholder="季度" allowClear>
+        <a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
-          <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-group @change="whereChange" name="day" v-model:value="where.timeSlot">
           <a-radio-button value="昼">昼</a-radio-button>
           <a-radio-button value="夜">夜</a-radio-button>
         </a-radio-group>
+
+        <a-button type="primary" :size="size" @click="checkType">{{ currentType == 0 ? '按功能区分类' : '按限值分类' }}</a-button>
+
+        <!--        <a-select placeholder="按功能区分类" style="width:200px" @select="selectCata">-->
+        <!--          <a-select-option :value="item.index" v-for="(item,index) in cate" v-bind:key="index">-->
+        <!--            {{ item.text }}-->
+        <!--          </a-select-option>-->
+        <!--        </a-select>-->
+
         <!-- <a-button @click="exportMap">导出</a-button> -->
       </a-space>
     </a-card>
-    <div id="map"></div>
+
+    <div id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList" v-if="currentType == 0"></mapNominal>
+    <mapNominalCate :param="cate" v-if="currentType == 1" @pointColor="pointColor"></mapNominalCate>
+<!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
   </div>
 </template>
 <script>
-// import axios from "axios";
-import { Scene, PointLayer, Popup } from "@antv/l7";
-// import { DrawControl } from '@antv/l7-draw';
-import { GaodeMap } from "@antv/l7-maps";
 import {
   getPlaceGis,
   getColumnOptions,
 } from "@/api/ecology/noise/function-sound";
+import tipTool from "@/views/components/tipToolPlace";
+import mapNominal from "@/views/components/mapNominalPlace";
+import mapTable from "@/views/components/mapTablePlace";
+// import mapTableCenter from "@/views/components/mapTableCenterPlace";
+import mapNominalCate from "@/views/components/mapNominalCate";
+
 let scene = null;
 let pointLayer = null;
-let cityLayer = null;
+var that
+
 export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter,
+    mapNominalCate
+  },
   data() {
     return {
-      yearOptions: [],
+      yearOptions: [2020, 2021],
+      arriveCoor: [108.33, 22.84],//坐标点
       where: {
         timeSlot: "昼",
         regionLevel: "市级",
-        quarter: undefined,
+        monitorYear: "2021",
-        monitorYear: "选择年份",
       },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      dataSource: [],
+      nominalList: [],
+      nominalListDay: [
+        {"text": "0类", "color": "#09952b", "data": "≤ 50", "min": "0", "max": "50", "common": "好"},
+        {"text": "1类", "color": "#669c08", "data": "50.1~55", "min": "50.1", "max": "55.0", "common": "较好"},
+        {"text": "2类", "color": "#9c9a07", "data": "55.1~60.0", "min": "55.1", "max": "60.0", "common": "一般"},
+        {"text": "3类", "color": "#eca5a0", "data": "60.1~65.0", "min": "60.1", "max": "65.0", "common": "较差"},
+        {"text": "4a类/4b类", "color": "#ca6e6e", "data": ">65.1", "min": "65.1", "max": "1000", "common": "差"},
+      ],
+      nominalListNight: [
+        {"text": "0类", "color": "#09952b", "data": "≤ 40", "min": "0", "max": "40", "common": "好"},
+        {"text": "1类", "color": "#669c08", "data": "40.1~45", "min": "40.1", "max": "45.0", "common": "较好"},
+        {"text": "2类", "color": "#9c9a07", "data": "45.1~40.0", "min": "45.1", "max": "50.0", "common": "一般"},
+        {"text": "3类", "color": "#eca5a0", "data": "50.1~55.0", "min": "50.1", "max": "55.0", "common": "较差"},
+        {"text": "4a类", "color": "#ca6e6e", "data": "55.1~60.0", "min": "55.1", "max": "60", "common": "差"},
+        {"text": "4b类", "color": "#900000", "data": ">=60.1", "min": "60.1", "max": "1000", "common": "差"},
+      ],
+      searchId: -1,
+      cate: [
+        {'text': '1类区域', 'color': '#ff0033', "common": "1类区域"},
+        {'text': '2类区域', 'color': '#119aee', "common": "2类区域"},
+        {'text': '3类区域', 'color': '#016812', "common": "3类区域"},
+        {'text': '4类区域', 'color': '#A020F0', "common": "4类区域"}
+      ],
+      points: [],//数据准备
+      sourceData: [],
+      currentCate: -1,
+      currentType: 0,
+      cateId: -1
     };
   },
   mounted() {
-    scene = new Scene({
+    that = this
-      id: "map",
+    that.nominalList = that.nominalListDay
-      map: new GaodeMap({
+    this.newInitMap();
-        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() {
+    pointColor: function (e) {
+      console.log(e)
+      that.cateId = Number(e + 1)
+
+      let tem_arr = []
+      that.sourceData.forEach((item) => {
+        if (item.functionType == that.cateId) {
+          tem_arr.push(item)
+        }
+      })
+      that.map.clearOverlays();
+      that.pointData = tem_arr
+      that.addMarker()
+    },
+    checkType: function () {
+      that.currentType = that.currentType == 0 ? 1 : 0
+      that.map.clearOverlays();
+      that.addMarker()
+    },
+    selectCata: function (e) {
+      that.currentCate = e + 1
+      that.whereChange()
+    },
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          console.log(that.pointData[that.searchId]['placeLng'])
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(Number(that.pointData[that.searchId]['placeLng']), Number(that.pointData[that.searchId]['placeLat'])), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
       getColumnOptions("monitor_year").then((res) => {
         if (res.data.code == 0) {
           this.yearOptions = res.data.data.map((item) => {
@@ -83,74 +182,169 @@ export default {
           this.where.monitorYear = res.data.data[res.data.data.length - 1];
           this.whereChange();
         }
-      });
+      })
     },
-    setPlaceData() {},
+    addMarker: function () {  // 创建图标对象
-    whereChange() {
+      //1、定义构造函数并继承Overlay
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      // 颜色
+      that.pointData.forEach(async (item, index) => {
+        let color = ""
+        if (that.currentType == 0) { // 限制
+          that.nominalList.forEach((it, ins) => {
+            if (Number(item.leq) >= Number(it.min) && Number(item.leq) <= Number(it.max)) {
+              color = that.nominalList[ins]['color']
+              return false
+            }
+          })
+        } else {
+          that.cate.forEach((i, j) => { // 区域
+            if (Number(item.functionType) == Number(j + 1)) {
+              color = that.cate[j]['color']
+              return false
+            }
+          })
+        }
+
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.placeLng, item.placeLat), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        })
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        })
+      })
+    },
+    whereChange(e) {
+      if (typeof (e) == "object") {
+        if (e.target.name == "area") {
+          that.where.regionLevel = e.target.value
+          if (that.where.regionLevel == "县级") {
+            that.zoom = 8
+          } else {
+            that.zoom = 13
+          }
+        }
+        if (e.target.name == "day") {
+          that.where.timeSlot = e.target.value
+          if (e.target.value == "昼") {
+            that.nominalList = that.nominalListDay
+          } else {
+            that.nominalList = that.nominalListNight
+          }
+        }
+      } else {
+        if (e > 0) {
+          that.where.monitorYear = e
+        }
+      }
+
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+      // GIS
       if (scene && pointLayer) {
         scene.removeLayer(pointLayer)
       }
       getPlaceGis(this.where).then((res) => {
-          if (res.data.code == 0) {
+        that.pointData = []
-            if(cityLayer){
+        if (res.data.code == 0 && res.data.data.length > 0) {
-              cityLayer.destroy()
+          that.pointData = res.data.data
-              scene.removeLayer(cityLayer)
+          that.sourceData = res.data.data
-            }
+          that.pointData.forEach(item => {
-            pointLayer = new PointLayer({})
+            that.dataSource.push(`${item.placeName}`)
-              .source(res.data.data, {
-                parser: {
-                  type: "json",
-                  x: "placeLng",
-                  y: "placeLat",
-                },
           })
-              .shape('triangle').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.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.render()
-          }
-        });
 
-    },
+          if (that.currentCate > 0) { // 筛选种类
-    getAreaData() {},
+            let tem = []
-    exportMap(){
+            let tem_str = []
-      console.log("exportMap");
+            that.sourceData.forEach((item) => {
-      scene.exportMap("png");
+              if (Number(item.functionType) == that.currentCate) {
+                tem.push(item)
+                tem_str.push(`${item.placeName}`)
+              }
+            })
+            that.pointData = tem
+            that.dataSource = tem_str
+          }
+          that.addMarker()
+        }
+      })
+    }
+  }
 }
-  },
-};
 </script>
 <style scoped>
 ::-webkit-scrollbar {
@@ -161,21 +355,85 @@ html,
 body {
   overflow: hidden;
   margin: 0;
+  width: 100vw;
+  height: 100vh;
 }
+
 .ele-body {
   position: relative;
-  height: 100%;
   padding: 16px 0;
+  height: 100%;
 }
+
 .ele-card {
   z-index: 10;
   margin: 0 16px;
   display: inline-block;
 }
+
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
 </style>

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

@@ -2,69 +2,123 @@
   <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">{{
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
+        <a-select @change="whereChange" name="year" v-model:value="where.monitorYear">
+          <a-select-option v-for="item in yearOptions" :key="item.value">
+            {{
               item.label
-          }}</a-select-option>
+            }}
+          </a-select-option>
         </a-select>
-        <a-radio-group @change="whereChange" v-model:value="where.regionLevel">
+        <a-radio-group @change="whereChange" name="area" 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-group @change="whereChange" name="day" 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 id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList"></mapNominal>
+    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
   </div>
 </template>
 <script>
-// import axios from "axios";
-import { Scene, PointLayer, Popup } from "@antv/l7";
-// import { DrawControl } from '@antv/l7-draw';
-import { GaodeMap } from "@antv/l7-maps";
 import {
   getGisBase,
-  getColumnOptions,
+  getColumnOptions
 } from "@/api/ecology/noise/road-sound";
+import tipTool from "@/views/components/tipTool";
+import mapNominal from "@/views/components/mapNominal";
+import mapTable from "@/views/components/mapTable";
+// import mapTableCenter from "@/views/components/mapTableCenter";
+
 let scene = null;
 let pointLayer = null;
-let cityLayer = null;
+var that
+
 export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
   data() {
     return {
-      yearOptions: [],
+      yearOptions: [2020, 2021],
+      arriveCoor: [108.33, 22.84],//坐标点
       where: {
         timeSlot: "昼",
         regionLevel: "市级",
-        monitorYear: "选择年份",
+        monitorYear: "2021",
       },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      nominalList: [
+        {"text": "一级", "color": "#09952b", "data": "≤ 68.0", "min": "0", "max": "68.8", "common": "好"},
+        {"text": "二级", "color": "#669c08", "data": "68.1~70.0", "min": "68.1", "max": "70.0", "common": "较好"},
+        {"text": "三级", "color": "#9c9a07", "data": "70.0~72.0", "min": "70.0", "max": "72.0", "common": "一般"},
+        {"text": "四级", "color": "#935507", "data": "72.1~74.0", "min": "72.1", "max": "74.0", "common": "较差"},
+        {"text": "五级", "color": "#900000", "data": ">74", "min": "74.1", "max": "1000", "common": "差"}
+      ],
+      points: [],//数据准备
+      dataSource: [],
+      value: '',
+      result: [],
+      searchKey: "",
+      searchId: -1
     };
   },
   mounted() {
-    scene = new Scene({
+    that = this
-      id: "map",
+    this.newInitMap();
-      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() {
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['lng'], that.pointData[that.searchId]['lat']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
       getColumnOptions("monitor_year").then((res) => {
         if (res.data.code == 0) {
           this.yearOptions = res.data.data.map((item) => {
@@ -76,75 +130,151 @@ export default {
           this.where.monitorYear = res.data.data[res.data.data.length - 1];
           this.whereChange();
         }
-      });
+      })
     },
-    setPlaceData() {},
+    addMarker: function () {  // 创建图标对象
-    whereChange() {
+      //1、定义构造函数并继承Overlay
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
 
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = ""
+        that.nominalList.forEach((it, ins) => {
+          if (item.leq >= it.min && item.leq <= it.max) {
+            color = that.nominalList[ins]['color']
+            return false
+          }
+        })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.lng, item.lat), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        })
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        })
+      })
+    },
+    whereChange(e) {
+      if (typeof (e) == "object") {
+        if (e.target.name == "area") {
+          that.where.regionLevel = e.target.value
+          if (that.where.regionLevel == "县级") {
+            that.zoom = 8
+          } else {
+            that.zoom = 13
+          }
+        }
+        if (e.target.name == "day") {
+          that.where.timeSlot = e.target.value
+        }
+      } else {
+        if (e > 0) {
+          that.where.monitorYear = e
+        }
+      }
+
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+      // GIS
+      // that.getGisCountList()
       if (scene && pointLayer) {
         scene.removeLayer(pointLayer)
       }
       getGisBase(this.where).then((res) => {
-          if (res.data.code == 0) {
+        that.pointData = []
-             if(cityLayer){
+        that.dataSource = []
-               cityLayer.destroy()
+        if (res.data.code == 0 && res.data.data.length > 0) {
-               scene.removeLayer(cityLayer)
+          that.pointData = res.data.data
-             }
-            pointLayer = new PointLayer({})
-              .source(res.data.data, {
-                parser: {
-                  type: "json",
-                  x: "lng",
-                  y: "lat",
-                },
-              })
-              .shape('hexagon').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;
-              })
-              .style({
-                opacity: 1,
-              });
-            pointLayer.on("mousemove", (e) => {
-              const popup = new Popup({
-                offsets: [0, 0],
-                closeButton: false,
-              })
-                .setLnglat(e.lngLat)
-                .setHTML(
-                  `<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.render()
-          }
-        });
 
-    },
+          that.pointData.forEach(item => {
-    getAreaData() {},
+            that.dataSource.push(`${item.place}`)
-    exportMap(){
+          })
-      console.log("exportMap");
+
-      scene.exportMap("png");
+          that.addMarker()
         }
+      })
     },
-};
+    getColor: function (laq) {
+      that.nominalList.forEach((item, index) => {
+        if (laq >= item.min && laq < item.max) {
+          console.log(that.nominalList[index]['color'])
+          return that.nominalList[index]['color']
+        }
+      })
+    }
+  }
+}
 </script>
 <style scoped>
 ::-webkit-scrollbar {
@@ -155,21 +285,126 @@ html,
 body {
   overflow: hidden;
   margin: 0;
+  width: 100vw;
+  height: 100vh;
 }
+
 .ele-body {
   position: relative;
-  height: 100%;
   padding: 16px 0;
+  height: 100%;
 }
+
 .ele-card {
   z-index: 10;
   margin: 0 16px;
   display: inline-block;
 }
+
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+.radar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: red;
+  position: relative;
+}
+
+
+.radar .ripple {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid red;
+  animation: ripple 2s linear infinite;
+}
+
+.radar :nth-child(1) {
+  animation-delay: 0.666s;
+}
+
+.radar :nth-child(2) {
+  animation-delay: 1.322s;
+}
+
+@keyframes ripple {
+  to {
+    width: 150px;
+    height: 150px;
+    opacity: 0;
+  }
+}
+
+.radar-box {
+  position: absolute;
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
 </style>

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

@@ -2,67 +2,136 @@
   <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">{{
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
+        <a-select @change="whereChange" name="year" v-model:value="where.monitorYear">
+          <a-select-option v-for="item in yearOptions" :key="item.value">
+            {{
               item.label
-          }}</a-select-option>
+            }}
+          </a-select-option>
         </a-select>
-        <a-radio-group @change="whereChange" v-model:value="where.regionLevel">
+        <a-radio-group @change="whereChange" name="area" 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-group @change="whereChange" name="day" 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 id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :filedData="filed" :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList"></mapNominal>
+    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
   </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";
+import tipTool from "@/views/components/tipToolZone";
+import mapNominal from "@/views/components/mapNominalZone";
+import mapTable from "@/views/components/mapTableZone";
+// import mapTableCenter from "@/views/components/mapTableCenterZone";
+
 let scene = null;
 let pointLayer = null;
-let cityLayer = null;
+var that
+
 export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
   data() {
     return {
-      yearOptions: [],
+      yearOptions: [2020, 2021],
+      arriveCoor: [108.33, 22.84],//坐标点
       where: {
         timeSlot: "昼",
         regionLevel: "市级",
-        monitorYear: "选择年份",
+        monitorYear: "2021",
       },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      dataSource: [],
+      zoom: 13,
+      filed: [
+        {'text': '点位名称', 'value': 'placeName'},
+        {'text': '点位等级', 'value': 'regionLevel'},
+        {'text': '网格边长', 'value': 'gridLength'},
+        {'text': '所属路段', 'value': 'road'},
+        {'text': '噪声', 'value': 'leq'},
+      ],
+      nominalList: [],
+      nominalListDay: [
+        {"text": "一级", "color": "#09952b", "data": "≤ 50", "min": "0", "max": "50", "common": "好"},
+        {"text": "二级", "color": "#669c08", "data": "50.1~55", "min": "50.1", "max": "55.0", "common": "较好"},
+        {"text": "三级", "color": "#9c9a07", "data": "55.1~60.0", "min": "55.1", "max": "60.0", "common": "一般"},
+        {"text": "四级", "color": "#935507", "data": "60.1~65.0", "min": "60.1", "max": "65.0", "common": "较差"},
+        {"text": "五级", "color": "#900000", "data": ">65.1", "min": "65.1", "max": "1000", "common": "差"},
+      ],
+      nominalListNight: [
+        {"text": "一级", "color": "#09952b", "data": "≤ 40", "min": "0", "max": "40", "common": "好"},
+        {"text": "二级", "color": "#669c08", "data": "40.1~45", "min": "40.1", "max": "45.0", "common": "较好"},
+        {"text": "三级", "color": "#9c9a07", "data": "45.1~50.0", "min": "45.1", "max": "50.0", "common": "一般"},
+        {"text": "四级", "color": "#935507", "data": "50.1~55.0", "min": "50.1", "max": "55.0", "common": "较差"},
+        {"text": "五级", "color": "#900000", "data": ">55.1", "min": "55.1", "max": "1000", "common": "差"},
+      ],
+      points: []//数据准备
     };
   },
   mounted() {
-    scene = new Scene({
+    that = this
-      id: "map",
+    that.nominalList = that.nominalListDay
-      map: new GaodeMap({
+    this.newInitMap();
-        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() {
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['placeLng'], that.pointData[that.searchId]['placeLat']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
       getColumnOptions("monitor_year").then((res) => {
         if (res.data.code == 0) {
           this.yearOptions = res.data.data.map((item) => {
@@ -74,73 +143,147 @@ export default {
           this.where.monitorYear = res.data.data[res.data.data.length - 1];
           this.whereChange();
         }
-      });
+      })
     },
-    setPlaceData() {},
+    addMarker: function () {  // 创建图标对象
-    whereChange() {
+      //1、定义构造函数并继承Overlay
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = ""
+        that.nominalList.forEach((it, ins) => {
+          if (Number(item.leq) >= Number(it.min) && Number(item.leq) <= Number(it.max)) {
+            color = that.nominalList[ins]['color']
+            return false
+          } else {
+            console.log(item.leq >= 65.6)
+          }
+        })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.placeLng, item.placeLat), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        })
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        })
+      })
+    },
+    whereChange(e) {
+      if (typeof (e) == "object") {
+        if (e.target.name == "area") {
+          that.where.regionLevel = e.target.value
+          if (that.where.regionLevel == "县级") {
+            that.zoom = 8
+          } else {
+            that.zoom = 13
+          }
+        }
+        if (e.target.name == "day") {
+          that.where.timeSlot = e.target.value
+          if (e.target.value == "昼") {
+            that.nominalList = that.nominalListDay
+          } else {
+            that.nominalList = that.nominalListNight
+          }
+        }
+      } else {
+        if (e > 0) {
+          that.where.monitorYear = e
+        }
+      }
+
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+      // GIS
       if (scene && pointLayer) {
         scene.removeLayer(pointLayer)
       }
       getPlaceGis(this.where).then((res) => {
-          if (res.data.code == 0) {
+        that.pointData = []
-             if(cityLayer){
+        that.dataSource = []
-               cityLayer.destroy()
+        if (res.data.code == 0 && res.data.data.length > 0) {
-               scene.removeLayer(cityLayer)
+          that.pointData = res.data.data
-             }
+          that.pointData.forEach(item => {
-            pointLayer = new PointLayer({})
+            that.dataSource.push(`${item.placeName}`)
-              .source(res.data.data, {
-                parser: {
-                  type: "json",
-                  x: "placeLng",
-                  y: "placeLat",
-                },
           })
-              .shape('square').size(10)
+          that.addMarker()
-              // .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 {
@@ -151,21 +294,87 @@ html,
 body {
   overflow: hidden;
   margin: 0;
+  width: 100vw;
+  height: 100vh;
 }
+
 .ele-body {
   position: relative;
-  height: 100%;
   padding: 16px 0;
+  height: 100%;
 }
+
 .ele-card {
   z-index: 10;
   margin: 0 16px;
   display: inline-block;
 }
+
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
 </style>
+

src/views/visualiz/water/drInking/components/mapNominal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{item.common}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{item.desc}}</div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/visualiz/water/drInking/components/mapTable.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '级别',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '来源',
+    dataIndex: 'waterSourceProperty',
+  },
+  {
+    title: '水质类别',
+    dataIndex: 'waterType',
+  },
+  {
+    title: 'PH',
+    dataIndex: 'ph',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/views/visualiz/water/drInking/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/visualiz/water/drInking/components/tipTool.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{ data.place }}
+    </div>
+    <div class="tip-tool-container-text">
+      级别 {{ data.regionLevel }}
+    </div>
+    <div class="tip-tool-container-text">
+      来源 {{ data.waterSourceProperty }}
+    </div>
+    <div class="tip-tool-container-text">
+      水质类别 {{ data.waterType }}
+    </div>
+    <div class="tip-tool-container-text">
+      PH {{ data.ph }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default: 30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Object
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/visualiz/water/drInking/index.vue

@@ -0,0 +1,435 @@
+<template>
+  <div class="ele-body">
+    <a-card class="ele-card" :bordered="false">
+      <a-space>
+
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
+        <a-select @change="whereChange" v-model:value="where.year">
+          <a-select-option v-for="item in yearOptions" :key="item.value">{{
+              item.label
+            }}
+          </a-select-option>
+        </a-select>
+        <a-radio-group @change="whereChange" name="area" v-model:value="regionLevel">
+          <a-radio-button value="城市">城市</a-radio-button>
+          <a-radio-button value="区县">区县</a-radio-button>
+          <a-radio-button value="农村">农村</a-radio-button>
+        </a-radio-group>
+      </a-space>
+    </a-card>
+
+    <div id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList"></mapNominal>
+    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
+  </div>
+</template>
+<script>
+import {
+  waterCity,
+  waterCounty,
+  waterVillage
+} from "@/api/gis/gisApi";
+import {
+  getColumnOptions,
+} from "@/api/ecology/atmosphere/acid-rain-plcae";
+
+import tipTool from "./components/tipTool";
+import mapNominal from "./components/mapNominal";
+import mapTable from "./components/mapTable";
+// import mapTableCenter from "./components/mapTableCenter";
+var that
+
+export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
+  data() {
+    return {
+      yearOptions: [],
+      arriveCoor: [108.33, 22.84],//坐标点
+      where: {
+        year: "",
+      },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 12,
+      points: [],//数据准备
+      dataSource: [],
+      value: '',
+      result: [],
+      searchKey: "",
+      searchId: -1,
+      regionLevel: "城市",
+      nominalList: [{
+        "text": "I类",
+        "color": "#80BC1C",
+        "common": "I",
+        "desc": "一类"
+      }, {
+        "text": "II类",
+        "color": "#BBD769",
+        "common": "Ⅱ",
+        "desc": "二类"
+      }, {
+        "text": "III类",
+        "color": "#F7E020",
+        "common": "Ⅲ",
+        "desc": "三类"
+      }, {
+        "text": "IV类",
+        "color": "#DF9913",
+        "common": "Ⅳ",
+        "desc": "四类"
+      }, {
+        "text": "V类",
+        "color": "#E57813",
+        "common": "Ⅴ",
+        "desc": "五类"
+      }, {
+        "text": "劣V类",
+        "color": "#DA251C",
+        "common": "劣Ⅴ",
+        "desc": "劣五类"
+      }]
+    }
+  },
+  mounted() {
+    that = this
+    this.newInitMap();
+  },
+  methods: {
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
+      getColumnOptions("year").then((res) => {
+        if (res.data.code == 0) {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+          this.where.year = res.data.data[0];
+          this.whereChange({target: {value: "城市"}});
+        }
+      })
+    },
+    addMarker: function () {  // 创建图标对象
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = "#9a9a9a"
+        that.nominalList.forEach((it, ins) => {
+          if (item.waterType == it.common) {
+            color = that.nominalList[ins]['color']
+            return false
+          }
+        })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        },true)
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        },true)
+      })
+    },
+    whereChange(e) {
+      that.map.clearOverlays();
+      let type = e ? e.target.value : "城市"
+      if (type == "城市") {
+        // eslint-disable-next-line no-undef
+        that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+
+        waterCity(this.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            that.pointData.forEach(item => {
+              that.dataSource.push(`${item.place}`)
+            })
+            that.addMarker()
+          }
+        })
+      }
+
+      if (type == "区县") {
+        that.zoom = 9
+        // eslint-disable-next-line no-undef
+        that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+        waterCounty(this.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            that.pointData.forEach(item => {
+              that.dataSource.push(`${item.place}`)
+            })
+            that.addMarker()
+          }
+        })
+      }
+
+      if (type == "农村") {
+        that.zoom = 11
+        // eslint-disable-next-line no-undef
+        that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+        waterVillage(this.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            that.pointData.forEach(item => {
+              that.dataSource.push(`${item.place}`)
+            })
+            that.addMarker()
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+::-webkit-scrollbar {
+  display: none;
+}
+
+html,
+body {
+  overflow: hidden;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.ele-body {
+  position: relative;
+  padding: 16px 0;
+  height: 100%;
+}
+
+.ele-card {
+  z-index: 10;
+  margin: 0 16px;
+  display: inline-block;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+
+.radar-box {
+  position: absolute;
+
+  .radar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: red;
+    position: relative;
+  }
+
+  .radar .ripple {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid red;
+    animation: ripple 2s linear infinite;
+  }
+
+  .radar :nth-child(1) {
+    animation-delay: 0.666s;
+  }
+
+  .radar :nth-child(2) {
+    animation-delay: 1.322s;
+  }
+
+  @keyframes ripple {
+    to {
+      width: 150px;
+      height: 150px;
+      opacity: 0;
+    }
+  }
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
+</style>

src/views/visualiz/water/lake/components/mapNominal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{ item.text }}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <!--      <div class="map-nominal-container-inner-text">{{item.data}}</div>-->
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "mapNominal",
+  props: {
+    param: {
+      type: Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/visualiz/water/lake/components/mapTable.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="湖库数据" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'placeName',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '水质',
+    dataIndex: 'waterType',
+  },
+  {
+    title: 'ph',
+    dataIndex: 'ph',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/views/visualiz/water/lake/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="湖库点位" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/visualiz/water/lake/components/tipTool.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-top">
+      点位名称 {{ data.placeName}}
+    </div>
+    <div class="tip-tool-container-text">
+      点位级别 {{data.regionLevel }}
+    </div>
+    <div class="tip-tool-container-text">
+      水质 {{ data.waterType }}
+    </div>
+    <div class="tip-tool-container-text">
+      PH {{ data.ph }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default: 30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Object
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/visualiz/water/lake/index.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="ele-body">
+    <a-card class="ele-card" :bordered="false">
+      <a-space>
+
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
+        <a-select @change="whereChange" v-model:value="where.year">
+          <a-select-option v-for="item in yearOptions" :key="item.value">{{
+              item.label
+            }}
+          </a-select-option>
+        </a-select>
+        <a-radio-group @change="whereChange" name="area" v-model:value="where.type">
+          <a-radio-button value="0">城市内湖</a-radio-button>
+          <a-radio-button value="1">专项湖区</a-radio-button>
+        </a-radio-group>
+      </a-space>
+    </a-card>
+
+    <div id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList"></mapNominal>
+<!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :rowData="pointData"></map-table>
+  </div>
+</template>
+<script>
+import {
+  getLakePlace,
+  getLakePlaceInnerCity,
+  getLakeYear,
+  getInnerLakeYear
+} from "@/api/gis/gisApi";
+// import {
+//   getColumnOptions,
+// } from "@/api/ecology/atmosphere/acid-rain-plcae";
+
+import tipTool from "./components/tipTool";
+import mapNominal from "./components/mapNominal";
+import mapTable from "./components/mapTable";
+// import mapTableCenter from "./components/mapTableCenter";
+
+let scene = null;
+let pointLayer = null;
+var that
+
+export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
+  data() {
+    return {
+      yearOptions: [],
+      arriveCoor: [108.33, 22.84],//坐标点
+      where: {
+        type: "0",
+        year: "",
+        filter: ["ph", "transparency", "dissolvedOxygenSaturation", "dissolvedOxygen", "permanganateIndex", "fiveDayBod", "totalNitrogen", "ammonia", "volatilePhenol", "as", "hg", "cr6", "pb", "cd", "totalPhosphorus", "petro", "fecalColiforms", "cod", "chlA", "anSaa", "s", "oxidationReductionPotential"]
+      },
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      nominalList: [{
+        "text": "I类",
+        "color": "#80BC1C",
+        "common": "I"
+      }, {
+        "text": "II类",
+        "color": "#BBD769",
+        "common": "II"
+      }, {
+        "text": "III类",
+        "color": "#F7E020",
+        "common": "III"
+      }, {
+        "text": "IV类",
+        "color": "#DF9913",
+        "common": "IV"
+      }, {
+        "text": "V类",
+        "color": "#E57813",
+        "common": "V"
+      }, {
+        "text": "劣V类",
+        "color": "#DA251C",
+        "common": "劣V"
+      }],
+      points: [],//数据准备
+      dataSource: [],
+      value: '',
+      result: [],
+      searchKey: "",
+      searchId: -1
+    };
+  },
+  mounted() {
+    that = this
+    this.newInitMap();
+  },
+  methods: {
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
+      if (that.where.type == 1) {
+        getLakeYear().then((res) => {
+          if (res.data.code == 0) {
+            this.yearOptions = res.data.data.years.map((item) => {
+              return {
+                label: item,
+                value: item,
+              };
+            });
+            this.where.year = res.data.data.years[0];
+            this.whereChange();
+          }
+        })
+      } else {
+        getInnerLakeYear().then((res) => {
+          if (res.data.code == 0) {
+            this.yearOptions = res.data.data.years.map((item) => {
+              return {
+                label: item,
+                value: item,
+              };
+            });
+            this.where.year = res.data.data.years[0];
+            this.whereChange();
+          }
+        })
+      }
+    },
+    addMarker: function () {  // 创建图标对象
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = ""
+        that.nominalList.forEach((it, ins) => {
+          if (item.waterType >= it.common) {
+            color = that.nominalList[ins]['color']
+            return false
+          }
+        })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        },true)
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        },true)
+      })
+    },
+    whereChange(e) {
+      if (typeof (e) == "object") {
+        if (e.target.name == "area") {
+          that.where.type = e.target.value
+          if (that.where.type == "1") {
+            that.zoom = 9
+          } else {
+            that.zoom = 13
+          }
+        }
+      } else {
+        if (e > 0) {
+          that.where.year = e
+        }
+      }
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
+
+      if (scene && pointLayer) {
+        scene.removeLayer(pointLayer)
+      }
+
+
+      if (that.where.type == 1) {
+        getLakePlace(this.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            let tem_arr = []
+            if (that.pointData.length > 0) {
+              that.pointData.forEach(item => {
+                that.dataSource.push(`${item.lakeLibraryName}`)
+                tem_arr.push({ // 整合字段
+                  'placeName': item.lakeLibraryName,
+                  'attributes': item.controlAttributes,
+                  'ph': item.ph,
+                  'regionLevel': item.regionLevel,
+                  'longitude': item.longitude,
+                  'latitude': item.latitude,
+                  'waterType' : item.waterType
+                })
+              })
+            }
+            that.pointData = tem_arr
+            that.addMarker()
+          }
+        })
+      } else {
+        getLakePlaceInnerCity(this.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            let tem_arr = []
+            if (that.pointData.length > 0) {
+              that.pointData.forEach(item => {
+                that.dataSource.push(`${item.pointName}`)
+                tem_arr.push({
+                  'placeName': item.pointName,
+                  'attributes': item.controlAttributes,
+                  'ph': item.ph,
+                  'regionLevel': item.regionLevel,
+                  'longitude': item.longitude,
+                  'latitude': item.latitude,
+                  'waterType' : item.waterType
+                })
+              })
+            }
+            that.pointData = tem_arr
+            that.addMarker()
+          }
+        })
+      }
+
+    }
+  }
+}
+</script>
+<style>
+::-webkit-scrollbar {
+  display: none;
+}
+
+html,
+body {
+  overflow: hidden;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.ele-body {
+  position: relative;
+  padding: 16px 0;
+  height: 100%;
+}
+
+.ele-card {
+  z-index: 10;
+  margin: 0 16px;
+  display: inline-block;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+
+.radar-box {
+  position: absolute;
+
+  .radar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: red;
+    position: relative;
+  }
+
+  .radar .ripple {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid red;
+    animation: ripple 2s linear infinite;
+  }
+
+  .radar :nth-child(1) {
+    animation-delay: 0.666s;
+  }
+
+  .radar :nth-child(2) {
+    animation-delay: 1.322s;
+  }
+
+  @keyframes ripple {
+    to {
+      width: 150px;
+      height: 150px;
+      opacity: 0;
+    }
+  }
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
+</style>

src/views/visualiz/water/river/components/mapNominal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="map-nominal-container">
+    <div class="map-nominal-container-inner" v-for="(item,index) in param" v-bind:key="index">
+      <div class="map-nominal-container-inner-text">{{item.text}}</div>
+      <div class="map-nominal-container-inner-label" :style="{'backgroundColor':item.color}"></div>
+      <div class="map-nominal-container-inner-text">{{item.data}}</div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "mapNominal",
+  props:{
+    param:{
+      type:Array
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map-nominal-container {
+  width: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 16px;
+  box-sizing: border-box;
+  padding: 6px;
+  background-color: #fff;
+  display: flex;
+
+
+}
+
+.map-nominal-container-inner-text {
+  width: 100%;
+  height: 29px;
+  line-height: 29px;
+  color: #606060;
+  font-size: 12px;
+  text-align: center;
+}
+
+.map-nominal-container-inner-label {
+  width: 100%;
+  height: 8px;
+}
+
+.map-nominal-container-inner {
+  width: 70px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 3px;
+}
+</style>

src/views/visualiz/water/river/components/mapTable.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="监测数据" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    rowData: {
+      type: Array
+    },
+    columns:{
+      type:Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 0px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

src/views/visualiz/water/river/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+    <a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
+            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
+      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+
+      <div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
+        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
+             style="width: 30px;height: 30px">
+      </div>
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+const columns = [
+  {
+    title: '点位名称',
+    dataIndex: 'place',
+  },
+  {
+    title: '点位等级',
+    className: 'regionLevel',
+    dataIndex: 'regionLevel',
+  },
+  {
+    title: '所属地区',
+    dataIndex: 'area',
+  },
+  {
+    title: '所属路段',
+    dataIndex: 'road',
+  },
+  {
+    title: '噪声 dB(A)',
+    dataIndex: 'leq',
+  },
+];
+export default {
+  props: {
+    rowData: {
+      type: Array
+    }
+  },
+  methods: {
+    showTable: function (type) {
+      this.type1 = type
+    }
+  },
+  data() {
+    return {
+      columns,
+      pagination: {
+        total: 0
+      },
+      type1: 0
+    };
+  },
+}
+</script>
+
+<style scoped>
+.map-table-container {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 10px;
+  position: absolute;
+  bottom: 300px;
+  transition: right 0.8s;
+}
+
+::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
+  padding: 3px 3px;
+}
+
+.left-close-button {
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  position: absolute;
+  left: -40px;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/visualiz/water/river/components/tipTool.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="tip-tool-container" class="tip-tool-container"
+       :style="{'top':`${currentY}px`,'left':`${currentX}px`}">
+    <div class="tip-tool-container-text" v-for="(item,index) in columns" :key="index">
+      {{item.title}} {{data[item.dataIndex]}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default:30000
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    flag: {
+      type: Boolean,
+      default: false
+    },
+    data:{
+      type:Object
+    },
+    columns:{
+      type:Array
+    }
+  },
+  watch: {
+    x(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolWidth = tipToolInfo.offsetWidth
+      this.currentX = val - tipToolWidth / 2
+    },
+    y(val) {
+      let tipToolInfo = document.getElementById("tip-tool-container")
+      let tipToolHeight = tipToolInfo.offsetHeight
+      this.currentY = val - tipToolHeight
+    }
+  },
+  data() {
+    return {
+      currentX: 30000,
+      currentY: 0,
+      currentFlag: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-tool-container {
+  min-width: 150px;
+  min-height: 150px;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, .6);
+  color: #fff;
+  position: absolute;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.tip-tool-container-top {
+  font-size: 18px;
+  font-weight: 550;
+  text-align: left;
+}
+.tip-tool-container-text {
+  font-size: 15px;
+  line-height: 30px;
+  text-align: left;
+}
+</style>

src/views/visualiz/water/river/index.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="ele-body">
+    <a-card class="ele-card" :bordered="false">
+      <a-space>
+
+        <a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
+                         placeholder="请输入需要搜索的点位">
+        </a-auto-complete>
+
+        <a-select @change="whereChange" v-model:value="where.year"
+                  style="width: 100px">
+          <a-select-option v-for="item in yearOptions" :key="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+
+        <a-select @change="selectMonth" :default-value="where.month+'月'"
+                  v-if="currentRequestCata == '1' ||currentRequestCata == '2' "
+                  style="width: 100px">
+          <a-select-option v-for="(item,index) in 12" :key="index">
+            {{ index + 1 }}月
+          </a-select-option>
+        </a-select>
+
+        <a-radio-group @change="changeCate" :default-value="currentRequestCata">
+          <a-radio-button value="0">江河水质</a-radio-button>
+          <a-radio-button value="1">水功能</a-radio-button>
+          <a-radio-button value="2">水站</a-radio-button>
+        </a-radio-group>
+
+        <a-select style="width: 200px;" v-if="currentRequestCata == '1'" @change="changeText" name="waterCate"
+                  :default-value="currentCate">
+          <a-select-option v-for="(item,index) in waterCate" :key="index">
+            {{ item }}
+          </a-select-option>
+        </a-select>
+
+      </a-space>
+    </a-card>
+
+    <div id="map" ref="map" style="overflow: hidden"></div>
+    <tip-tool :columns="columns" :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
+    <mapNominal :param="nominalList"></mapNominal>
+    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table :columns="columns" :rowData="pointData"></map-table>
+  </div>
+</template>
+<script>
+import {
+  river, national, waterStation, autonomous
+} from "@/api/gis/gisApi";
+import {
+  getColumnOptions,
+} from "@/api/ecology/atmosphere/acid-rain-plcae";
+
+import tipTool from "./components/tipTool";
+import mapNominal from "./components/mapNominal";
+import mapTable from "./components/mapTable";
+// import mapTableCenter from "./components/mapTableCenter";
+
+var that
+
+export default {
+  components: {
+    tipTool,
+    mapNominal,
+    mapTable,
+    // mapTableCenter
+  },
+  data() {
+    return {
+      yearOptions: [],
+      arriveCoor: [108.33, 22.84],//坐标点
+      where: {
+        name: "",
+        year: "",
+        month: "1"
+      },
+      waterCate: ["国家水功能区", "自治区水功能区"],
+      currentCate: "国家水功能区",
+      map: {},
+      pointData: [],
+      currentY: 0,
+      currentX: 30000,
+      tipFlag: false,
+      tipData: [],
+      zoom: 13,
+      points: [],//数据准备
+      dataSource: [],
+      value: '',
+      result: [],
+      searchKey: "",
+      searchId: -1,
+      currentRequestCata: "0",
+      columns: [],
+      columns0: [
+        {
+          title: "站点名称",
+          dataIndex: 'sectionName'
+        },
+        {
+          title: '流域',
+          dataIndex: 'basin',
+        },
+        {
+          title: '城市',
+          dataIndex: 'city',
+        },
+        {
+          title: '类别',
+          dataIndex: 'waterQualityCategory',
+        },
+        {
+          title: '河流级别',
+          dataIndex: 'riverLevel',
+        }
+      ],
+      columns2: [
+        {
+          title: '水站名称',
+          dataIndex: 'stationName',
+        },
+        {
+          title: '河流名称',
+          dataIndex: 'riverName',
+        },
+        {
+          title: '类别',
+          dataIndex: 'waterQualityCategory',
+        }
+      ],
+      nominalList: [{
+        "text": "I类",
+        "color": "#80BC1C",
+        "common": "Ⅰ",
+        "desc": "一类"
+      }, {
+        "text": "II类",
+        "color": "#BBD769",
+        "common": "Ⅱ",
+        "desc": "二类"
+      }, {
+        "text": "III类",
+        "color": "#F7E020",
+        "common": "Ⅲ",
+        "desc": "三类"
+      }, {
+        "text": "IV类",
+        "color": "#DF9913",
+        "common": "Ⅳ",
+        "desc": "四类"
+      }, {
+        "text": "V类",
+        "color": "#E57813",
+        "common": "Ⅴ",
+        "desc": "五类"
+      }, {
+        "text": "劣V类",
+        "color": "#DA251C",
+        "common": "劣Ⅴ",
+        "desc": "劣五类"
+      }],
+    };
+  },
+  mounted() {
+    that = this
+    this.newInitMap();
+  },
+  methods: {
+    selectMonth: function (e) {
+      that.where.month = e + 1
+      that.requestFun()
+    },
+    changeText: function (e) {
+      that.currentCate = that.waterCate[e]
+      that.requestFun()
+    },
+    changeCate: function (e) {
+      that.currentRequestCata = e.target.value
+      that.requestFun()
+    },
+    autoInput(e) {
+      that.dataSource.forEach((item, index) => {
+        if (item == e) {
+          if (that.searchId > 0) {
+            document.getElementById("id" + that.searchId).className = ""
+          }
+          that.searchId = index
+          // eslint-disable-next-line no-undef
+          that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['longitude'], that.pointData[that.searchId]['latitude']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+          document.getElementById("id" + that.searchId).className += "animation_check"
+        }
+      })
+    },
+    newInitMap() {
+      // eslint-disable-next-line no-undef
+      that.map = new BMap.Map(this.$refs.map); // 创建Map实例
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
+      that.map.addControl(
+        // eslint-disable-next-line no-undef
+        new BMap.MapTypeControl({
+          // eslint-disable-next-line no-undef
+          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
+        })
+      )
+      that.map.enableDragging();
+      that.map.enableScrollWheelZoom();
+      that.map.enableDoubleClickZoom();
+      that.map.enableKeyboard();
+
+      getColumnOptions("year").then((res) => {
+        if (res.data.code == 0) {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+          this.where.year = res.data.data[0];
+          that.requestFun()
+        }
+      })
+    },
+    addMarker: function () {  // 创建图标对象
+      //定义自定义覆盖物的构造函数
+      function ComplexCustomOverlay(point, index, color) {
+        this._point = point
+        this._index = index
+        this._color = color
+      }
+
+      // eslint-disable-next-line no-undef
+      ComplexCustomOverlay.prototype = new BMap.Overlay();
+
+      ComplexCustomOverlay.prototype.initialize = function (map) {
+        this._map = map;
+        var div = this._div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.float = "left"
+        div.style.cursor = "pointer"
+        // eslint-disable-next-line no-undef
+        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
+        div.style.height = "20px";
+        div.style.width = "10px";
+
+        var arrow = this._arrow = document.createElement("div");
+        arrow.style.width = "0px";
+        arrow.style.height = "0px";
+        arrow.style.borderLeftWidth = "10px"
+        arrow.style.borderLeftColor = "transparent"
+        arrow.style.borderStyle = "solid"
+        arrow.style.borderRightWidth = "10px"
+        arrow.style.borderRightColor = "transparent"
+        arrow.style.borderBottomWidth = "20px"
+        arrow.style.borderTopWidth = "0"
+        arrow.style.position = "absolute"
+        arrow.style.borderBottomColor = `${this._color}`
+        arrow.setAttribute("id", "id" + this._index)
+        arrow.style.top = "22px";
+        arrow.style.left = "10px";
+        div.appendChild(arrow);
+        that.map.getPanes().labelPane.appendChild(div);
+        return div;
+      }
+      ComplexCustomOverlay.prototype.draw = function () {
+        var map = this._map;
+        var pixel = map.pointToOverlayPixel(this._point);
+        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
+        this._div.style.top = pixel.y - 30 + "px";
+      }
+      ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
+        this._arrow['on' + event] = fun;
+      }
+      that.pointData.forEach(async (item, index) => {
+        let color = ""
+        that.nominalList.forEach((it, ins) => {
+          if (that.currentRequestCata == 0) {
+            if (item.waterQualityCategory == it.common) {
+              color = that.nominalList[ins]['color']
+            }
+          } else {
+            if (item.waterQualityCategory == it.desc) {
+              color = that.nominalList[ins]['color']
+            }
+          }
+
+        })
+        // eslint-disable-next-line no-undef
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(Number(item.longitude), Number(item.latitude)), index, color);
+        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
+        myCompOverlay.addEventListener('mouseover', function (e) {
+          let currentId = e.target.getAttribute("id")
+
+          setTimeout(() => {
+          }, 300)
+          let bodyInfo = document.getElementsByTagName("body")[0]
+          let screenWidth = bodyInfo.offsetWidth
+          // let screenHeight = bodyInfo.offsetHeight
+
+          let mapInfo = document.getElementById("map")
+          let mapWidth = mapInfo.offsetWidth;    // 返回元素的总宽度
+          // let mapHeight = mapInfo.offsetHeight;    // 返回元素的总高度
+
+          let calcWidth = screenWidth - mapWidth
+          // let calcHeight = screenHeight - mapHeight
+          that.tipFlag = true
+          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
+          that.currentX = e.pageX - calcWidth
+          that.currentY = e.pageY - 80
+        }, true)
+
+        myCompOverlay.addEventListener('mouseout', function () {
+          setTimeout(() => {
+          }, 300)
+          that.currentX = 30000
+          that.currentY = 0
+          that.tipFlag = false
+        }, true)
+      })
+    },
+    whereChange(e) {
+      that.where.year = e
+      that.requestFun()
+    },
+    requestFun: function () {
+      that.map.clearOverlays();
+      // eslint-disable-next-line no-undef
+      that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), 8); // 初始化地图,设置中心点坐标和地图级别
+
+      if (that.currentRequestCata == 0) { // 江河水质
+        that.columns = that.columns0
+
+        river(that.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            that.pointData.forEach(item => {
+              that.dataSource.push(`${item.sectionName}`)
+            })
+            that.addMarker()
+          }
+        })
+      }
+      if (that.currentRequestCata == 1) {
+        if (that.currentCate == "国家水功能区") {
+          national(that.where).then((res) => {
+            that.pointData = []
+            that.dataSource = []
+            if (res.data.code == 0 && res.data.data.length > 0) {
+              that.pointData = res.data.data
+              that.pointData.forEach(item => {
+                that.dataSource.push(`${item.place}`)
+              })
+              that.addMarker()
+            }
+          })
+        }
+        if(that.currentRequestCata == 2) {
+          autonomous(that.where).then((res) => {
+            that.pointData = []
+            that.dataSource = []
+            if (res.data.code == 0 && res.data.data.length > 0) {
+              that.pointData = res.data.data
+              that.pointData.forEach(item => {
+                that.dataSource.push(`${item.riverName}`)
+              })
+              that.addMarker()
+            }
+          })
+        }
+      }
+      if (that.currentRequestCata == 2) {
+        that.columns = that.columns2
+        waterStation(that.where).then((res) => {
+          that.pointData = []
+          that.dataSource = []
+          if (res.data.code == 0 && res.data.data.length > 0) {
+            that.pointData = res.data.data
+            that.pointData.forEach(item => {
+              that.dataSource.push(`${item.place}`)
+            })
+            that.addMarker()
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+::-webkit-scrollbar {
+  display: none;
+}
+
+html,
+body {
+  overflow: hidden;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.ele-body {
+  position: relative;
+  padding: 16px 0;
+  height: 100%;
+}
+
+.ele-card {
+  z-index: 10;
+  margin: 0 16px;
+  display: inline-block;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.anchorBL {
+  display: none;
+}
+
+::v-deep .amap-logo {
+  right: 0 !important;
+  left: auto !important;
+  display: none !important;
+}
+
+::v-deep .amap-copyright {
+  right: 70px !important;
+  left: auto !important;
+  opacity: 0 !important;
+}
+
+::v-deep .amap-info-content {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: #fff;
+  padding: 0;
+}
+
+::v-deep .bottom-center .amap-info-sharp {
+  border-top-color: rgba(0, 0, 0, .6);
+}
+
+::v-deep .amap-info-close {
+  display: none;
+}
+
+::v-deep #map-mark {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 20px solid rgba(0, 0, 255, 0.6);
+}
+
+
+.radar-box {
+  position: absolute;
+
+.radar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: red;
+  position: relative;
+}
+
+.radar .ripple {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid red;
+  animation: ripple 2s linear infinite;
+}
+
+.radar :nth-child(1) {
+  animation-delay: 0.666s;
+}
+
+.radar :nth-child(2) {
+  animation-delay: 1.322s;
+}
+
+@keyframes ripple {
+  to {
+    width: 150px;
+    height: 150px;
+    opacity: 0;
+  }
+}
+
+}
+
+.animation_check {
+  animation: myfirst 1s infinite;
+}
+
+@keyframes myfirst {
+  0% {
+    top: 0px
+  }
+  25% {
+    top: 5px;
+  }
+  50% {
+    top: 0px;
+  }
+  75% {
+    top: -5px;
+  }
+  100% {
+    top: 0px;
+  }
+}
+</style>