From 762c1a870bd76ba8bb7e00680dbc1a02d9ebfa6c Mon Sep 17 00:00:00 2001
From: juwei001 <974220104@qq.com>
Date: Mon, 18 Mar 2024 08:54:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=B1=95=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../next/screen-content-map/cpt/zdyf-map.vue  | 401 +++++++++---------
 1 file changed, 191 insertions(+), 210 deletions(-)

diff --git a/src/views/next/screen-content-map/cpt/zdyf-map.vue b/src/views/next/screen-content-map/cpt/zdyf-map.vue
index f509104..df67964 100644
--- a/src/views/next/screen-content-map/cpt/zdyf-map.vue
+++ b/src/views/next/screen-content-map/cpt/zdyf-map.vue
@@ -1,25 +1,31 @@
 <template>
-    <div style="width: 100% ;height: 100%;">
-        <div class='bg_img' v-if="mapFlag == 'Emap'">
-            <div class="title">
-                {{ title }}
-            </div>
-            <chinaMap />
-            <div class="pot" @click="toProvince">
-                <img src="@/assets/images/map/yellowPot.png" alt="">
-                <img src="@/assets/images/map/36°.png" alt="">
-            </div>
-        </div>
-        <div id="myMap" v-if="mapFlag == 'Amap'">
-            <div v-if="mapType == 'polygon'">
-                <screen-map-header :data="headerList"></screen-map-header>
-                <screen-map-legeng></screen-map-legeng>
-            </div>
-        </div>
+  <div style="width: 100%; height: 100%">
+    <div class="bg_img" v-if="mapFlag == 'Emap'">
+      <div class="title">
+        {{ title }}
+      </div>
+      <chinaMap />
+      <div class="pot" @click="toProvince">
+        <img src="@/assets/images/map/yellowPot.png" alt="" />
+        <img src="@/assets/images/map/36°.png" alt="" />
+      </div>
     </div>
+    <div id="myMap" v-if="mapFlag == 'Amap'">
+      <div v-if="mapType == 'polygon'">
+        <screen-map-header :data="headerList"></screen-map-header>
+        <screen-map-legeng></screen-map-legeng>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import { Scene, PolygonLayer, LineLayer, ImageLayer, PointLayer } from '@antv/l7'
+import {
+  Scene,
+  PolygonLayer,
+  LineLayer,
+  ImageLayer,
+  PointLayer
+} from '@antv/l7'
 import { GaodeMap } from '@antv/l7-maps'
 import yifengJson from './yifeng.json'
 import jdbandaoJson from './jdbandao.json'
@@ -39,7 +45,8 @@ export default {
   data () {
     return {
       mapFlag: 'Emap',
-      title: '农业要强，种业必须强。种业是现代农业芯片，是建设农业强国的标志性、先导性工程，是国家战略性、基础性核心产业。贯彻落实习近平总书记关于打一场种业翻身仗的重要指示精神，连续三年的中央一号文件对此专门部署；2023年的中央一号文件更是专节提出深入实施种业振兴行动。',
+      title:
+        '农业要强，种业必须强。种业是现代农业芯片，是建设农业强国的标志性、先导性工程，是国家战略性、基础性核心产业。贯彻落实习近平总书记关于打一场种业翻身仗的重要指示精神，连续三年的中央一号文件对此专门部署；2023年的中央一号文件更是专节提出深入实施种业振兴行动。',
       darkStyle: {
         style: 'amap://styles/blue',
         polygonColor: [
@@ -102,8 +109,7 @@ export default {
       mapType: ''
     }
   },
-  created () {
-  },
+  created () {},
   mounted () {
     window._AMapSecurityConfig = {
       securityJsCode: '92ea2c965c6cf1ba7ee3a8fe01449ef2'
@@ -116,49 +122,39 @@ export default {
   },
   methods: {
     ...mapActions({
-      set_qyjj: 'SET_QYJJ',
-      set_garden: 'SET_GARDEN'
+      set_qyjj: 'SET_QYJJ'
     }),
-    switcMapType: function (type) {
-      if (this.debounceTimer) {
-        clearTimeout(this.debounceTimer)
+    async switcMapType (type) {
+      if (type === 'Emap') {
+        this.mapType = null
+        this.mapFlag = 'Emap'
+        scene.destroy()
+        myMap = null
+        return
       }
+      this.mapFlag = 'Amap'
+      if (!myMap) {
+        await new Promise((resolve) => setTimeout(resolve, 5000))
+        await this.init(type)
+      } else {
+        if (polygonLayer) {
+          scene.removeLayer(polygonLayer)
+        }
+        this.initPolygonLayer(type)
 
-      this.debounceTimer = setTimeout(async () => {
-        if (type === 'Emap') {
-          this.mapType = null
-          this.mapFlag = 'Emap'
-          scene.destroy()
-          myMap = null
+        if (type === 'unit') {
+          this.initDot(point)
         } else {
-          this.mapFlag = 'Amap'
-          if (!myMap) {
-            await new Promise(resolve => setTimeout(resolve, 5000))
-            await this.init(type)
-          } else {
-            this.initPolygonLayer(type)
-          }
+          this.removeDotLayers()
         }
-      }, 1000) // 设置防抖间隔，这里是1秒
+      }
+    },
+    removeDotLayers () {
+      if (dotTextLayer || dotLayer) {
+        scene.removeLayer(dotTextLayer)
+        scene.removeLayer(dotLayer)
+      }
     },
-    // switcMapType: debounce(
-    //     async function (type) {
-    //         console.log(type);
-    //         if (type === 'Emap') {
-    //             this.mapType = null;
-    //             this.mapFlag = 'Emap';
-    //             scene.destroy();
-    //             myMap = null;
-    //             return;
-    //         }
-    //         this.mapFlag = 'Amap';
-    //         if (!myMap) {
-    //             await new Promise(resolve => setTimeout(resolve, 5000));
-    //             await this.init(type);
-    //         } else {
-    //             this.initPolygonLayer(type);
-    //         }
-    //     }, 2000),
     toProvince () {
       this.mapFlag = 'Amap'
       setTimeout(() => {
@@ -166,13 +162,10 @@ export default {
       }, 1000)
     },
     init (type) {
-      if (!jdbandaoJson) return false
+      if (!yifengJson) return false
       myMap = new GaodeMap({
         pitch: 40.24716321414439,
-        // mapStyle: "amap://styles/darkblue",
-        // mapStyle: 'amap://styles/3bd5ec68d60de6542634c3e701f64523',
         mapStyle: 'amap://styles/blue',
-        // mapStyle: 'amap://styles/fresh',
         // style: styleConfig.style,
         showLabel: false,
         center: [120.220563, 36.496127],
@@ -185,20 +178,23 @@ export default {
         doubleClickZoom: false,
         showRoad: false,
         viewMode: '3D'
-
       })
       scene = new Scene({
         id: 'myMap',
         logoVisible: false,
         map: myMap
       })
-      scene.addImage('textBg', require('@/assets/images/map/textBg.png'))
       scene.on('loaded', () => {
-        // if (!type) {
+        if (!type) {
           this.initCircle()
-        // } else if (type == 'unit' || type == 'resource' || type == 'szyf' || type == 'garden') {
+        } else if (type == 'unit') {
+          this.initDot(point)
+          this.initPolygonLayer()
+        } else if (type == 'resource') {
           this.initPolygonLayer(type)
-        // }
+        } else if (type == 'szyf') {
+          this.initFlow(type)
+        }
       })
       scene.on('click', (feature) => {
         // console.log(feature);
@@ -206,16 +202,35 @@ export default {
     },
     initCircle () {
       circleLayerSmall = new ImageLayer({})
-      circleLayerSmall.source(
-        require('@/assets/images/home/yifengdianLine.png'),
-        {
-          parser: {
-            type: 'image',
-            extent: [121.0819, 35.8908, 119.2372, 37.2278]
-          }
+      circleLayerSmall.source(`${process.env.VUE_APP_MAP_IMG}/circle1.png`, {
+        parser: {
+          type: 'image',
+          extent: [121.0819, 35.8908, 119.2372, 37.2278]
         }
-      )
+      })
       scene.addLayer(circleLayerSmall)
+      const data = jdbandaoJson
+      // 画区域面积
+      polygonLayer = new PolygonLayer({
+        autoFit: true
+      })
+        .size(300)
+        .source(data)
+        .color('name', ['rgba(0, 127, 241, .5)'])
+        .shape('extrude')
+        // .shape("fill")
+        .style({
+          opacityLinear: {
+            enable: true, // true - false
+            dir: 'out' // in - out
+          },
+          opacity: 0.8,
+          heightfixed: true,
+          sourceColor: '#4ee8fc',
+          targetColor: '#00284e'
+        })
+      scene.addLayer(polygonLayer)
+
       const that = this
       circleLayerSmall.on('click', (ev) => {
         // 处理点击事件的逻辑
@@ -228,15 +243,12 @@ export default {
       }
       scene.setZoom(10)
       roadLayer = new ImageLayer({})
-      roadLayer.source(
-        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/road.png',
-        {
-          parser: {
-            type: 'image',
-            extent: [119.7829, 36.7398, 120.5205, 36.2552]
-          }
+      roadLayer.source(`${process.env.VUE_APP_MAP_IMG}/road1.png`, {
+        parser: {
+          type: 'image',
+          extent: [119.7829, 36.7398, 120.5205, 36.2552]
         }
-      )
+      })
       scene.addLayer(roadLayer)
       const that = this
       roadLayer.on('click', (ev) => {
@@ -256,27 +268,15 @@ export default {
       }
       scene.setZoom(10)
       roadLayer = new ImageLayer({})
-      // roadLayer.source(
-      //   '/images/map/flow.png',
-      //   {
-      //     parser: {
-      //       type: 'image',
-      //       extent: [119.7829, 36.7398, 120.5205, 36.2552]
-      //     }
-      //   }
-      // )
+      roadLayer.source('/images/map/flow.png', {
+        parser: {
+          type: 'image',
+          extent: [119.7829, 36.7398, 120.5205, 36.2552]
+        }
+      })
       scene.addLayer(roadLayer)
     },
     initPolygonLayer (type) {
-      if (polygonLayer) {
-        scene.removeLayer(polygonLayer)
-      }
-      if (lineLayer) {
-        scene.removeLayer(lineLayer)
-      }
-      if (textLayer) {
-        scene.removeLayer(textLayer)
-      }
       if (type == 'szyf') {
         this.initFlow()
         return
@@ -287,19 +287,27 @@ export default {
       if (circleLayerSmall) {
         scene.removeLayer(circleLayerSmall)
       }
+      if (polygonLayer) {
+        scene.removeLayer(polygonLayer)
+      }
       this.mapType = 'polygon'
       const { darkStyle } = this
       const styleConfig = darkStyle
-      const data = jdbandaoJson
+      const data = yifengJson
       // 画区域面积
       polygonLayer = new PolygonLayer({
         autoFit: true
       })
-        .size(10000)
+        .size(300)
         .source(data)
-        .color('name', type == 'resource' ? styleConfig.polygonColor : ['rgba(0, 127, 241, .5)'])
+        .color(
+          'name',
+          type == 'resource'
+            ? styleConfig.polygonColor
+            : ['rgba(0, 127, 241, .5)']
+        )
         .shape('extrude')
-      // .shape("fill")
+        // .shape("fill")
         .style({
           opacityLinear: {
             enable: true, // true - false
@@ -352,22 +360,13 @@ export default {
         })
         .active(true)
       scene.addLayer(textLayer)
-      const filteredPoint = { ...point } // 或者使用其他对象深拷贝方法
-      filteredPoint.features = filteredPoint.features.filter(item => item.properties.category === type)
-      if (type === 'unit' || type === 'garden') {
-        this.initDot(filteredPoint, type)
-      }
-      polygonLayer.on('click', (e) => {
-
-      })
+      const _this = this
+      polygonLayer.on('click', (e) => {})
     },
-    initDot (data, type) {
-      if (dotTextLayer) {
-        scene.removeLayer(dotTextLayer)
-      }
-      if (dotLayer) {
-        scene.removeLayer(dotLayer)
-      }
+    initDot (data) {
+      console.log(data, '点位数据')
+      scene.addImage('dotBto', require('@/assets/images/map/dot.png'))
+      scene.addImage('textBg', require('@/assets/images/map/textBg.png'))
       // textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60]
       dotTextLayer = new PointLayer({
         zIndex: 21
@@ -402,19 +401,7 @@ export default {
       scene.addLayer(dotLayer)
       const that = this
       dotTextLayer.on('click', (e) => {
-        if (type == 'unit') {
-          if (e.feature.properties.id === '2') {
-            that.set_qyjj(true)
-          } else {
-            this.$message.error('暂无数据~')
-          }
-        } else {
-          if (e.feature.properties.id === '3') {
-            that.set_garden(true)
-          } else {
-            this.$message.error('暂无数据~')
-          }
-        }
+        that.set_qyjj(true)
       })
 
       // dotTextLayer.on("mousemove", (e) => {
@@ -437,105 +424,99 @@ export default {
   computed: {
     ...mapGetters(['navId'])
   },
-  beforeDestroy () {
-    if (myMap) {
-      scene.destroy()
-      myMap = null
-    }
-  },
   watch: {}
 }
 </script>
 
 <style lang="scss" scoped>
 .map-header {
-    position: absolute;
-    top: 100px;
-    left: 50%;
-    transform: translate(-50%);
-    width: 745px;
-    height: 58px;
-    z-index: 10;
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  transform: translate(-50%);
+  width: 745px;
+  height: 58px;
+  z-index: 10;
 }
 
 .map-legeng {
-    position: absolute;
-    top: 686px;
-    left: 554px;
-    transform: translate(-50%);
-    width: 140px;
-    height: 220px;
-    z-index: 10;
+  position: absolute;
+  top: 686px;
+  left: 554px;
+  transform: translate(-50%);
+  width: 140px;
+  height: 220px;
+  z-index: 10;
 }
 
 .bg_img {
-    background: url('~@/assets/images/map/echartsBg.png');
+  background: url("~@/assets/images/map/echartsBg.png");
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  .title {
+    width: 802px;
+    height: 98px;
+    background: url("~@/assets/images/map/title.png");
     background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    top: 80px;
+    transform: translate(-401px);
+    left: 50%;
+    color: #fff;
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-
-    .title {
-        width: 802px;
-        height: 98px;
-        background: url('~@/assets/images/map/title.png');
-        background-size: 100% 100%;
-        position: absolute;
-        top: 80px;
-        transform: translate(-401px);
-        left: 50%;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        padding: 16px 30px;
-        box-sizing: border-box;
-    }
+    padding: 16px 30px;
+    box-sizing: border-box;
+  }
 
-    .pot {
-        position: absolute;
-        right: 732px;
-        top: 445px;
-        @include flex(column);
-        align-items: center;
-
-        >:nth-child(1) {
-            width: 138px;
-            height: 142px;
-        }
+  .pot {
+    position: absolute;
+    right: 732px;
+    top: 445px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-        >:nth-child(2) {
-            width: 70px;
-            height: 32px;
-            position: relative;
-            top: -60px;
-            left: 20px;
-            z-index: 30;
-        }
+    > :nth-child(1) {
+      width: 138px;
+      height: 142px;
+    }
 
-        &::after {
-            content: "黄金育种带";
-            display: block;
-            width: 550px;
-            font-size: 22px;
-            padding-bottom: 12px;
-            height: 24px;
-            color: rgb(254, 221, 0);
-            text-align: center;
-            line-height: 24px;
-            border-bottom: 2px rgb(254, 221, 0) dashed;
-            position: absolute;
-            right: 83px;
-            top: 34px;
-        }
+    > :nth-child(2) {
+      width: 70px;
+      height: 32px;
+      position: relative;
+      top: -60px;
+      left: 20px;
+      z-index: 30;
     }
 
+    &::after {
+      content: "黄金育种带";
+      display: block;
+      width: 550px;
+      font-size: 22px;
+      padding-bottom: 12px;
+      height: 24px;
+      color: rgb(254, 221, 0);
+      text-align: center;
+      line-height: 24px;
+      border-bottom: 2px rgb(254, 221, 0) dashed;
+      position: absolute;
+      right: 83px;
+      top: 34px;
+    }
+  }
 }
 
 #myMap {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 </style>